ทำให้เว็บแอปพลิเคชัน Generative AI Angular ใช้งานได้โดยอัตโนมัติจากการควบคุมเวอร์ชันไปยัง Cloud Run

1. ภาพรวม

การทำให้เว็บแอปพลิเคชันใช้งานได้เป็นครั้งแรกอาจฟังดูเป็นเรื่องยาก แม้หลังจากที่ติดตั้งใช้งานครั้งแรกแล้ว หากกระบวนการนี้เป็นงานที่มากเกินไป คุณอาจหลีกเลี่ยงการติดตั้งใช้งานแอปพลิเคชันเวอร์ชันใหม่ การทำให้ใช้งานได้อย่างต่อเนื่องช่วยให้คุณทำให้การเปลี่ยนแปลงของแอปพลิเคชันใช้งานได้โดยอัตโนมัติได้อย่างง่ายดาย

ในห้องทดลองนี้ คุณจะเขียนเว็บแอปพลิเคชันและกำหนดค่า Cloud Run เพื่อให้ระบบนำแอปพลิเคชันไปใช้งานโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงซอร์สโค้ดของแอปพลิเคชัน จากนั้นคุณก็แก้ไขแอปพลิเคชันและทำให้ใช้งานได้อีกครั้ง

สิ่งที่คุณจะได้เรียนรู้

  • เขียนเว็บแอปพลิเคชันด้วย Cloud Shell Editor
  • จัดเก็บโค้ดแอปพลิเคชันใน GitHub
  • ทำให้แอปพลิเคชันใช้งานได้ใน Cloud Run โดยอัตโนมัติ
  • เพิ่ม Generative AI ลงในแอปพลิเคชันโดยใช้ Vertex AI

2. ข้อกำหนดเบื้องต้น

  1. หากยังไม่มีบัญชี Google คุณต้องสร้างบัญชี Google
    • ใช้บัญชีส่วนตัวแทนบัญชีงานหรือบัญชีโรงเรียน บัญชีงานและบัญชีโรงเรียนอาจมีข้อจำกัดที่ทำให้คุณเปิดใช้ API ที่จำเป็นสำหรับห้องทดลองนี้ไม่ได้
  2. หากยังไม่มีบัญชี GitHub คุณต้องสร้างบัญชี GitHub

3. การตั้งค่าโปรเจ็กต์

  1. ลงชื่อเข้าใช้ Google Cloud Console
  2. เปิดใช้การเรียกเก็บเงินใน Cloud Console
    • การทำแล็บนี้ควรมีค่าใช้จ่ายน้อยกว่า $1 USD ในทรัพยากรระบบคลาวด์
    • คุณสามารถทำตามขั้นตอนที่ส่วนท้ายของแล็บนี้เพื่อลบทรัพยากรเพื่อหลีกเลี่ยงการเรียกเก็บเงินเพิ่มเติม
    • ผู้ใช้ใหม่มีสิทธิ์ใช้ช่วงทดลองใช้ฟรีมูลค่า$300 USD
    • หากกำลังจะเข้าร่วมกิจกรรม Gen AI สำหรับนักพัฒนาซอฟต์แวร์ คุณอาจได้รับเครดิตมูลค่า$1 USD
  3. สร้างโปรเจ็กต์ใหม่หรือเลือกใช้โปรเจ็กต์ที่มีอยู่ซ้ำ
  4. ยืนยันว่าได้เปิดใช้การเรียกเก็บเงินในโปรเจ็กต์ของฉันในการเรียกเก็บเงินใน Cloud แล้ว
    • หากโปรเจ็กต์ใหม่แสดง Billing is disabled ในคอลัมน์ Billing account ให้ทำดังนี้
      1. คลิกจุด 3 จุดในActions คอลัมน์
      2. คลิกเปลี่ยนการเรียกเก็บเงิน
      3. เลือกบัญชีสำหรับการเรียกเก็บเงินที่ต้องการใช้
    • หากคุณเข้าร่วมกิจกรรม Gen AI สำหรับนักพัฒนาซอฟต์แวร์ บัญชีดังกล่าวอาจมีชื่อว่าบัญชีสำหรับการเรียกเก็บเงินของ Google Cloud Platform เวอร์ชันทดลองใช้งาน

4. เปิดเครื่องมือแก้ไข Cloud Shell

  1. ไปที่ Cloud Shell Editor
  2. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดโดยทำดังนี้
    • คลิกเมนู 3 ขีด ไอคอนเมนู 3 ขีด
    • คลิก Terminal
    • คลิก Terminal ใหม่เปิดเทอร์มินัลใหม่ใน Cloud Shell Editor
  3. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
    • รูปแบบ:
      gcloud config set project [PROJECT_ID]
    • ตัวอย่าง
      gcloud config set project lab-project-id-example
    • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
      • คุณแสดงรหัสโปรเจ็กต์ทั้งหมดได้โดยใช้คำสั่งต่อไปนี้
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ตั้งค่ารหัสโปรเจ็กต์ในเทอร์มินัลของ Cloud Shell Editor
  4. หากได้รับแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ คลิกเพื่อให้สิทธิ์ Cloud Shell
  5. คุณควรเห็นข้อความต่อไปนี้
    Updated property [core/project].
    หากเห็น WARNING และระบบขอให้คุณ Do you want to continue (Y/N)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด N กด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

5. เปิดใช้ API

เปิดใช้ API ในเทอร์มินัลโดยทำดังนี้

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

คำสั่งนี้อาจใช้เวลาสักครู่จึงจะเสร็จสมบูรณ์ แต่ในที่สุดควรจะแสดงข้อความว่าสำเร็จคล้ายกับข้อความนี้

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. กำหนดค่า Git

  1. ตั้งค่าอีเมลผู้ใช้ Git ทั่วโลก
    git config --global user.email "you@example.com"
  2. ตั้งชื่อผู้ใช้ Git ทั่วโลก
    git config --global user.name "Your Name"
  3. ตั้งค่าสาขาเริ่มต้นของ Git ทั่วโลกเป็น main โดยทำดังนี้
    git config --global init.defaultBranch main

7. เขียนโค้ด

วิธีเขียนแอปพลิเคชันใน Node.js

  1. ไปที่ไดเรกทอรีหลักโดยใช้คำสั่งต่อไปนี้
    cd ~
  2. สร้างแอปพลิเคชัน codelab-genai Angular ใหม่
    npx @angular/cli new codelab-genai \
    --minimal \
    --inline-template \
    --inline-style \
    --ssr \
    --defaults
  3. หากระบบขอให้ติดตั้ง @angular/cli ให้กด @angular/cli เพื่อดำเนินการต่อEnter
    Need to install the following packages:
@angular/cli@18.2.4
Ok to proceed? (y)
  4. ไปที่ไดเรกทอรี codelab-genai
    cd codelab-genai
  5. เปิดไฟล์ app.component.ts ใน Cloud Shell Editor โดยทำดังนี้
    cloudshell edit src/app/app.component.ts
    ตอนนี้คุณควรเห็นไฟล์ว่างที่ส่วนบนของหน้าจอ คุณแก้ไขไฟล์ app.component.ts นี้ได้ที่นี่ แสดงว่าโค้ดจะอยู่ในส่วนบนของหน้าจอ
  6. คัดลอกโค้ดต่อไปนี้และวางลงในไฟล์ app.component.ts ที่เปิดอยู่
    import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet],
    template: `
        <h1>Hello world!</h1>

        <router-outlet />
    `,
    styles: [],
})
export class AppComponent { }
    หลังจากผ่านไป 2-3 วินาที Cloud Shell Editor จะบันทึกโค้ดโดยอัตโนมัติ โค้ดนี้จะตอบสนองต่อคำขอ HTTP ด้วยคำทักทาย "Hello world!" ของเรา

โค้ดเริ่มต้นสำหรับแอปพลิเคชันของคุณเสร็จสมบูรณ์แล้วและพร้อมที่จะจัดเก็บไว้ในการควบคุมเวอร์ชัน

8. สร้างที่เก็บ

  1. กลับไปที่เทอร์มินัล Cloud Shell ที่ด้านล่างของหน้าจอ
  2. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  3. เริ่มต้นที่เก็บ Git
    git init -b main
  4. เข้าสู่ระบบ GitHub CLI
    gh auth login
    กด Enter เพื่อยอมรับตัวเลือกเริ่มต้นและทำตามวิธีการในเครื่องมือ GitHub CLI ซึ่งรวมถึง
    1. คุณต้องการเข้าสู่ระบบบัญชีใด GitHub.com
    2. คุณต้องการใช้โปรโตคอลใดสำหรับการดำเนินการ Git ในโฮสต์นี้ HTTPS
    3. ตรวจสอบสิทธิ์ Git ด้วยข้อมูลเข้าสู่ระบบ GitHub ไหม Y (ข้ามหากไม่ปรากฏ)
    4. คุณต้องการตรวจสอบสิทธิ์ GitHub CLI ด้วยวิธีใด Login with a web browser
    5. คัดลอกรหัสแบบใช้ครั้งเดียว
    6. เปิด https://github.com/login/device
    7. วางรหัสแบบใช้ครั้งเดียว
    8. คลิกให้สิทธิ์ github
    9. เข้าสู่ระบบให้เสร็จสมบูรณ์
  5. ยืนยันว่าคุณได้เข้าสู่ระบบแล้ว
    gh api user -q ".login"
    หากคุณเข้าสู่ระบบสำเร็จแล้ว คำสั่งนี้ควรแสดงชื่อผู้ใช้ GitHub ของคุณ
  6. สร้างตัวแปร GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. ยืนยันว่าคุณได้สร้างตัวแปรสภาพแวดล้อมแล้ว
    echo ${GITHUB_USERNAME}
    หากสร้างตัวแปรสำเร็จแล้ว ตัวแปรนี้ควรแสดงชื่อผู้ใช้ GitHub ของคุณ
  8. สร้างที่เก็บ GitHub ที่ว่างเปล่าชื่อ codelab-genai
    gh repo create codelab-genai --private
    หากได้รับข้อผิดพลาดต่อไปนี้
    GraphQL: Name already exists on this account (createRepository)
    คุณมีที่เก็บชื่อ codelab-genai อยู่แล้ว คุณมี 2 ตัวเลือกในการทำตามบทแนะนำนี้ต่อ
  9. เพิ่มที่เก็บ codelab-genai เป็นรีโมต origin ดังนี้
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. แชร์รหัส

  1. ตรวจสอบว่าคุณอยู่ในไดเรกทอรีที่ถูกต้องโดยทำดังนี้
    cd ~/codelab-genai
  2. เพิ่มไฟล์ทั้งหมดในไดเรกทอรีปัจจุบันไปยังคอมมิตนี้
    git add .
  3. สร้างคอมมิตแรก
    git commit -m "add http server"
  4. พุชคอมมิตไปยังกิ่ง main ของที่เก็บ origin
    git push -u origin main

คุณเรียกใช้คำสั่งนี้และไปที่ URL ที่ได้เพื่อดูโค้ดของแอปพลิเคชันใน GitHub ได้

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/src/app/app.component.ts \n\n"

10. ตั้งค่าการทำให้ใช้งานได้อัตโนมัติ

  1. เปิดแท็บ Cloud Shell Editor ค้างไว้ เราจะกลับมาที่แท็บนี้ในภายหลัง
  2. ไปที่หน้า Cloud Run ในแท็บใหม่
  3. เลือกโปรเจ็กต์ Google Cloud ที่ถูกต้องในคอนโซล เมนูแบบเลื่อนลงของโปรเจ็กต์ Google Cloud Console
  4. คลิกเชื่อมต่อ REPO
  5. คลิกตั้งค่าด้วย Cloud Build
    1. เลือก GitHub เป็นผู้ให้บริการที่เก็บ
      • หากไม่ได้เข้าสู่ระบบบัญชี GitHub ในเบราว์เซอร์ ให้เข้าสู่ระบบด้วยข้อมูลเข้าสู่ระบบ
    2. คลิกตรวจสอบสิทธิ์ แล้วคลิกต่อไป
    3. หลังจากเข้าสู่ระบบแล้ว คุณจะเห็นข้อความในหน้า Cloud Run ที่ระบุว่าแอป GitHub ยังไม่ได้ติดตั้งอยู่บนที่เก็บของคุณ
    4. คลิกปุ่มติดตั้ง Google Cloud Build
      • ในหน้าการตั้งค่าการติดตั้ง ให้เลือกเลือกเฉพาะที่เก็บ แล้วเลือกที่เก็บ codelab-genai ที่คุณสร้างผ่าน CLI
      • คลิกติดตั้ง
      • หมายเหตุ: หากคุณมีที่เก็บ GitHub จำนวนมาก การโหลดอาจใช้เวลา 2-3 นาที
    5. เลือก your-user-name/codelab-genai เป็นที่เก็บ
      • หากไม่มีที่เก็บ ให้คลิกลิงก์จัดการที่เก็บที่เชื่อมต่อ
    6. ออกจาก Branch ในฐานะ ^main$
    7. คลิก Go, Node.js, Python, Java, .NET Core, Ruby หรือ PHP ผ่าน Buildpack ของ Google Cloud
      • ปล่อยให้ช่องอื่นๆ (Build context directory, Entrypoint และ Function target) เป็นไปตามเดิม
    8. คลิกบันทึก
  6. เลื่อนลงไปที่การตรวจสอบสิทธิ์
  7. คลิกอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์
  8. คลิกสร้าง

เมื่อการสร้างเสร็จสิ้น (ซึ่งจะใช้เวลาหลายนาที) ให้เรียกใช้คำสั่งนี้และไปที่ URL ที่ได้เพื่อดูแอปพลิเคชันที่กำลังทำงาน

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. เปลี่ยนรหัส

กลับไปที่ Cloud Shell Editor

หากยังเปิด Cloud Shell Editor อยู่ ให้ข้ามขั้นตอนเหล่านี้

  1. ไปที่ Cloud Shell Editor
  2. หากเทอร์มินัลไม่ปรากฏที่ด้านล่างของหน้าจอ ให้เปิดโดยทำดังนี้
    • คลิกเมนู 3 ขีด ไอคอนเมนู 3 ขีด
    • คลิก Terminal
    • คลิก Terminal ใหม่เปิดเทอร์มินัลใหม่ใน Cloud Shell Editor
  3. ในเทอร์มินัล ให้ตั้งค่าโปรเจ็กต์ด้วยคำสั่งนี้
    • รูปแบบ:
      gcloud config set project [PROJECT_ID]
    • ตัวอย่าง
      gcloud config set project lab-project-id-example
    • หากจำรหัสโปรเจ็กต์ไม่ได้ ให้ทำดังนี้
      • คุณแสดงรหัสโปรเจ็กต์ทั้งหมดได้โดยใช้คำสั่งต่อไปนี้
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      ตั้งค่ารหัสโปรเจ็กต์ในเทอร์มินัลของ Cloud Shell Editor
  4. หากได้รับแจ้งให้ให้สิทธิ์ ให้คลิกให้สิทธิ์เพื่อดำเนินการต่อ คลิกเพื่อให้สิทธิ์ Cloud Shell
  5. คุณควรเห็นข้อความต่อไปนี้
    Updated property [core/project].
    หากเห็น WARNING และระบบขอให้คุณ Do you want to continue (Y/N)? แสดงว่าคุณอาจป้อนรหัสโปรเจ็กต์ไม่ถูกต้อง กด N กด Enter แล้วลองเรียกใช้คำสั่ง gcloud config set project อีกครั้ง

เพิ่ม Vertex AI ลงในแอปพลิเคชัน

  1. กลับไปที่เทอร์มินัล Cloud Shell ที่ด้านล่างของหน้าจอ
  2. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  3. ติดตั้ง Vertex AI SDK สำหรับ Node.js โดยใช้คำสั่งต่อไปนี้
    npm install @google-cloud/vertexai
  4. ติดตั้ง Node.js Google Auth SDK โดยใช้คำสั่งต่อไปนี้
    npm install google-auth-library
  5. เปิด server.ts อีกครั้งใน Cloud Shell Editor
    cloudshell edit server.ts
  6. แทนที่โค้ดในไฟล์ server.ts ด้วยโค้ดต่อไปนี้
    // server.ts
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine } from '@angular/ssr';
import express from 'express';
import { fileURLToPath } from 'node:url';
import { dirname, join, resolve } from 'node:path';
import bootstrap from './src/main.server';

import { VertexAI } from '@google-cloud/vertexai';
import { GoogleAuth } from 'google-auth-library';


// The Express app is exported so that it can be used by serverless Functions.
export function app(): express.Express {
    const server = express();
    const serverDistFolder = dirname(fileURLToPath(import.meta.url));
    const browserDistFolder = resolve(serverDistFolder, '../browser');
    const indexHtml = join(serverDistFolder, 'index.server.html');
    const commonEngine = new CommonEngine();

    const auth = new GoogleAuth();

    server.set('view engine', 'html');
    server.set('views', browserDistFolder);

    // Example Express Rest API endpoints
    server.get('/api/facts', async (req, res) => {
        const project = await auth.getProjectId();

        const vertex = new VertexAI({ project: project });
        const generativeModel = vertex.getGenerativeModel({
            model: 'gemini-1.5-flash',
            generationConfig: { responseMimeType: 'application/json' }
        });

        const animal = req.query['animal'] || 'dog';
        const prompt = `Give me 10 fun facts about ${animal}. 
                        Return as json as an array in the format ['fact 1', 'fact 2']
                        Remove backticks and other markdown formatting.`;

        const resp = await generativeModel.generateContent(prompt);
        let factArray = '';

        if (resp.response.candidates) {
            factArray = JSON.parse(resp.response.candidates[0].content.parts[0].text || '');
        }
        res.send(factArray);
    });

    // Serve static files from /browser
    server.get('**', express.static(browserDistFolder, {
        maxAge: '1y',
        index: 'index.html',
    }));

    // All regular routes use the Angular engine
    server.get('**', (req, res, next) => {
        const { protocol, originalUrl, baseUrl, headers } = req;

        commonEngine
            .render({
                bootstrap,
                documentFilePath: indexHtml,
                url: `${protocol}://${headers.host}${originalUrl}`,
                publicPath: browserDistFolder,
                providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
            })
            .then((html) => res.send(html))
            .catch((err) => next(err));
    });

    return server;
}

function run(): void {
    const port = process.env['PORT'] || 4000;

    // Start up the Node server
    const server = app();
    server.listen(port, () => {
        console.log(`Node Express server listening on http://localhost:${port}`);
    });
}

run();
  7. เปิด app.component.ts ใน Cloud Shell Editor
    cloudshell edit src/app/app.component.ts
  8. แทนที่โค้ดในไฟล์ app.components.ts ด้วยโค้ดต่อไปนี้
    // app.component.ts
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterOutlet } from '@angular/router';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, FormsModule],
    template: `
        <section>
            <input
                type="text"
                placeholder="dog"
                [(ngModel)]="animal"
                class="text-black border-2 p-2 m-2 rounded"
            />
            <button
                (click)="getNewFunFacts()"
            >
                Get New Fun Facts
            </button>
            <ol>
                @for(fact of facts(); track fact) {
                    <li>{{fact}}</li>  
                } @empty {
                    <li>No facts are available</li>
                }
            </ol>
        </section>
    `,
    styles: '',
})
export class AppComponent {
    animal = '';
    facts = signal<string[]>([]);

    getNewFunFacts() {
        fetch(`/api/facts?animal=${this.animal}`).then(response => response.json()).then(facts => {
            this.facts.set(facts);
        });
    }
}

12. ทำให้ใช้งานได้อีกครั้ง

  1. ตรวจสอบว่าคุณยังอยู่ในไดเรกทอรีที่ถูกต้องใน Cloud Shell โดยทำดังนี้
    cd ~/codelab-genai
  2. เรียกใช้คำสั่งต่อไปนี้เพื่อคอมมิตแอปพลิเคชันเวอร์ชันใหม่ไปยังที่เก็บ Git ในเครื่อง
    git add .
git commit -m "add latest changes"
  3. พุชการเปลี่ยนแปลงไปยัง GitHub
    git push
  4. เมื่อการสร้างเสร็จสิ้น ให้เรียกใช้คำสั่งนี้และไปที่แอปพลิเคชันที่ติดตั้งใช้งาน
    echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

การบิลด์อาจใช้เวลาหลายนาทีก่อนที่จะเสร็จสิ้นและคุณจะเห็นการเปลี่ยนแปลง

คุณดูประวัติการแก้ไขทั้งหมดได้ที่ https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (ไม่บังคับ) ตรวจสอบการใช้งาน Vertex AI

คุณตรวจสอบการดำเนินการของ Vertex AI ได้เช่นเดียวกับบริการอื่นๆ ของ Google Cloud บันทึกการตรวจสอบจะช่วยตอบคำถามว่า "ใครทำอะไร ที่ไหน และเมื่อใด" ระบบจะเปิดใช้บันทึกการตรวจสอบของผู้ดูแลระบบสำหรับ Vertex AI โดยค่าเริ่มต้น หากต้องการตรวจสอบคำขอสร้างเนื้อหา คุณต้องเปิดใช้บันทึกการตรวจสอบการเข้าถึงข้อมูลโดยทำดังนี้

  1. ในคอนโซล Google Cloud ให้ไปที่หน้าบันทึกการตรวจสอบ

    หากใช้แถบค้นหาเพื่อค้นหาหน้านี้ ให้เลือกผลการค้นหาที่มีส่วนหัวย่อยเป็น IAM และผู้ดูแลระบบ
  2. ตรวจสอบว่าโปรเจ็กต์ Google Cloud ที่มีอยู่เป็นโปรเจ็กต์ที่คุณสร้างแอปพลิเคชัน Cloud Run
  3. ในตารางการกำหนดค่าบันทึกการตรวจสอบการเข้าถึงข้อมูล ให้ค้นหาและเลือก Vertex AI API จากคอลัมน์บริการ
  4. ในแท็บประเภทบันทึก ให้เลือกประเภทบันทึกการตรวจสอบการเข้าถึงข้อมูล Admin read และ Data read
  5. คลิกบันทึก

หลังจากเปิดใช้แล้ว คุณจะดูบันทึกการตรวจสอบสำหรับการเรียกใช้แต่ละครั้งของแอปพลิเคชันได้ หากต้องการดูบันทึกการตรวจสอบที่มีรายละเอียดการเรียกใช้ ให้ทำดังนี้

  1. กลับไปที่แอปพลิเคชันที่ติดตั้งใช้งานแล้วและรีเฟรชหน้าเว็บเพื่อทริกเกอร์บันทึก
  2. ในคอนโซล Google Cloud ให้ไปที่หน้า Log Explorer

  3. ในหน้าต่างคำค้นหา ให้พิมพ์
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. คลิกเรียกใช้การค้นหา

บันทึกการตรวจสอบจะบันทึกการใช้ Vertex AI API แต่จะไม่ให้คุณสังเกตข้อมูลที่เกี่ยวข้องกับเวิร์กโหลด เช่น พรอมต์หรือรายละเอียดการตอบกลับ

14. (ไม่บังคับ) เพิ่มความสามารถในการสังเกตปริมาณงาน AI

บันทึกการตรวจสอบจะไม่บันทึกข้อมูลที่เกี่ยวข้องกับภาระงาน คุณต้องบันทึกข้อมูลนี้อย่างชัดเจนเพื่อเพิ่มการสังเกตการณ์ของภาระงาน คุณใช้เฟรมเวิร์กล็อกที่ชอบเพื่อดำเนินการนี้ได้ ขั้นตอนต่อไปนี้แสดงวิธีดำเนินการโดยใช้กลไกการบันทึกของ Node.js เอง

  1. เปิด server.ts อีกครั้งใน Cloud Shell Editor
    cloudshell edit ~/codelab-genai/server.ts
  2. หลังจากเรียกใช้ await generativeModel.generateContent(prompt) (บรรทัดที่ 19) ให้เพิ่มบรรทัดต่อไปนี้
    console.log(JSON.stringify({
    severity: 'DEBUG',
    message: 'Content is generated',
    prompt: prompt,
    response: resp.response,
}));
    โค้ดนี้จะเขียนข้อมูลstdoutเกี่ยวกับเนื้อหาที่สร้างขึ้นโดยใช้รูปแบบการบันทึกแบบมีโครงสร้าง เอเจนต์การบันทึกใน Cloud Run จะบันทึกเอาต์พุตที่พิมพ์ไปยัง stdout และเขียนรูปแบบนี้ไปยัง Cloud Logging
  3. เปิด Cloud Shell อีกครั้งแล้วพิมพ์คำสั่งต่อไปนี้เพื่อให้แน่ใจว่าคุณอยู่ในไดเรกทอรีที่ถูกต้อง
    cd ~/codelab-genai
  4. คอมมิตการเปลี่ยนแปลง
    git commit -am "observe generated content"
  5. พุชการเปลี่ยนแปลงไปยัง GitHub เพื่อทริกเกอร์การติดตั้งใช้งานเวอร์ชันที่แก้ไขอีกครั้งโดยทำดังนี้
    git push

หลังจากที่ติดตั้งใช้งานเวอร์ชันใหม่แล้ว คุณจะดูข้อมูลการแก้ไขข้อบกพร่องเกี่ยวกับการเรียกใช้ Vertex AI ได้

หากต้องการดูบันทึกของแอปพลิเคชัน ให้ทำดังนี้

  1. ในคอนโซล Google Cloud ให้ไปที่หน้า Log Explorer

  2. ในหน้าต่างคำค้นหา ให้พิมพ์
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. คลิกเรียกใช้การค้นหา

ผลลัพธ์ของการค้นหาจะแสดงบันทึกที่มีพรอมต์และคำตอบของ Vertex AI รวมถึง "คะแนนความปลอดภัย" ที่ใช้ในการตรวจสอบแนวทางปฏิบัติด้านความปลอดภัยได้

15. (ไม่บังคับ) ทำความสะอาด

แม้ว่า Cloud Run จะไม่เรียกเก็บเงินเมื่อไม่ได้ใช้บริการ แต่คุณอาจยังคงถูกเรียกเก็บเงินสำหรับการจัดเก็บอิมเมจคอนเทนเนอร์ใน Artifact Registry คุณสามารถลบโปรเจ็กต์ Cloud เพื่อหลีกเลี่ยงการเรียกเก็บเงิน การลบโปรเจ็กต์ Cloud จะหยุดการเรียกเก็บเงินสำหรับทรัพยากรทั้งหมดที่ใช้ภายในโปรเจ็กต์นั้น

หากต้องการ ให้ลบโปรเจ็กต์โดยทำดังนี้

gcloud projects delete $GOOGLE_CLOUD_PROJECT

นอกจากนี้ คุณอาจต้องการลบทรัพยากรที่ไม่จำเป็นออกจากดิสก์ Cloud Shell ด้วย ดังนี้

  1. ลบไดเรกทอรีโปรเจ็กต์ Codelab 
    rm -rf ~/codelab-genai
  2. คำเตือน! การดำเนินการนี้เมื่อทำแล้วจะยกเลิกไม่ได้ หากต้องการลบทุกอย่างใน Cloud Shell เพื่อเพิ่มพื้นที่ว่าง คุณสามารถลบไดเรกทอรีหน้าแรกทั้งหมดได้ โปรดระมัดระวังและตรวจสอบว่าได้บันทึกทุกอย่างที่คุณต้องการเก็บไว้ที่อื่นแล้ว 
    sudo rm -rf $HOME

16. ขอแสดงความยินดี

ในแล็บนี้ คุณได้เขียนเว็บแอปพลิเคชันและกำหนดค่า Cloud Run เพื่อให้ระบบนำแอปพลิเคชันไปใช้งานโดยอัตโนมัติเมื่อมีการเปลี่ยนแปลงซอร์สโค้ดของแอปพลิเคชัน จากนั้นคุณได้แก้ไขแอปพลิเคชันและทำให้ใช้งานได้อีกครั้ง

หากคุณชอบแล็บนี้ คุณสามารถลองอีกครั้งในภาษาหรือเฟรมเวิร์กการเขียนโค้ดอื่นได้

หากสนใจเข้าร่วมการศึกษาวิจัยประสบการณ์ของผู้ใช้ (UX) เพื่อปรับปรุงผลิตภัณฑ์ที่คุณใช้ในวันนี้ โปรดลงทะเบียนที่นี่

ตัวเลือกบางส่วนในการเรียนรู้เพิ่มเติมมีดังนี้