Tự động triển khai ứng dụng web Node.js Genkit dựa trên AI tạo sinh từ Quản lý phiên bản sang Cloud Run

1. Tổng quan

Việc triển khai ứng dụng web lần đầu có thể khiến bạn lo lắng. Ngay cả sau lần triển khai đầu tiên, nếu quá trình này quá nhiều việc, bạn có thể tránh triển khai các phiên bản mới của ứng dụng. Với tính năng triển khai liên tục, bạn có thể dễ dàng tự động triển khai các thay đổi đối với ứng dụng.

Trong lớp học lập trình này, bạn sẽ viết một ứng dụng web và định cấu hình Cloud Run để tự động triển khai ứng dụng khi có thay đổi đối với mã nguồn của ứng dụng. Sau đó, bạn sửa đổi ứng dụng và triển khai lại ứng dụng.

Kiến thức bạn sẽ học được

  • Viết ứng dụng web bằng Trình chỉnh sửa Cloud Shell
  • Lưu trữ mã ứng dụng trong GitHub
  • Tự động triển khai ứng dụng của bạn lên Cloud Run
  • Thêm AI tạo sinh vào ứng dụng bằng Genkit
  • Quản lý lời nhắc LLM bằng thư viện dotprompt

2. Điều kiện tiên quyết

  1. Nếu chưa có Tài khoản Google, bạn phải tạo Tài khoản Google.
    • Sử dụng tài khoản cá nhân thay vì tài khoản công việc hoặc trường học. Tài khoản công việc và tài khoản trường học có thể có các quy định hạn chế khiến bạn không bật được các API cần thiết cho lớp học này.
  2. Nếu chưa có tài khoản GitHub, bạn phải tạo tài khoản GitHub

3. Thiết lập dự án

  1. Đăng nhập vào Google Cloud Console.
  2. Bật tính năng thanh toán trong Cloud Console.
    • Chi phí để hoàn thành lớp học này sẽ dưới 1 USD cho các tài nguyên trên đám mây.
    • Bạn có thể làm theo các bước ở cuối lớp học này để xoá tài nguyên nhằm tránh bị tính thêm phí.
    • Người dùng mới đủ điều kiện dùng thử miễn phí 300 USD.
    • Bạn sẽ tham dự sự kiện Gen AI for Devs (AI tạo sinh dành cho nhà phát triển)? Bạn có thể nhận được 1 USD tín dụng.
  3. Tạo dự án mới hoặc chọn sử dụng lại một dự án hiện có.

4. Mở Trình chỉnh sửa Cloud Shell

  1. Chuyển đến Trình chỉnh sửa Cloud Shell
  2. Nếu cửa sổ dòng lệnh không xuất hiện ở cuối màn hình, hãy mở cửa sổ đó:
    • Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang Biểu tượng trình đơn có ba đường kẻ
    • Nhấp vào Terminal (Thiết bị đầu cuối)
    • Nhấp vào New Terminal (Thiết bị đầu cuối mới)Mở cửa sổ dòng lệnh mới trong Trình chỉnh sửa Cloud Shell
  3. Trong dòng lệnh, hãy thiết lập dự án bằng lệnh sau:
    • Định dạng:
      gcloud config set project [PROJECT_ID]
    • Ví dụ:
      gcloud config set project lab-project-id-example
    • Nếu bạn không nhớ mã dự án của mình:
      • Bạn có thể liệt kê tất cả mã dự án bằng:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Đặt mã dự án trong thiết bị đầu cuối của Trình chỉnh sửa Cloud Shell
  4. Nếu bạn được nhắc uỷ quyền, hãy nhấp vào Uỷ quyền để tiếp tục. Nhấp để uỷ quyền cho Cloud Shell
  5. Bạn sẽ thấy thông báo này:
    Updated property [core/project].
    Nếu bạn thấy WARNING và được hỏi Do you want to continue (Y/N)?, thì có thể bạn đã nhập sai mã dự án. Nhấn N, nhấn Enter rồi thử chạy lại lệnh gcloud config set project.

5. Bật API

Trong dòng lệnh, hãy bật các API:

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

Quá trình thực thi lệnh này có thể mất vài phút, nhưng cuối cùng sẽ tạo ra một thông báo thành công tương tự như sau:

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

6. Định cấu hình Git

  1. Đặt email người dùng git chung:
    git config --global user.email "you@example.com"
  2. Đặt tên người dùng git chung:
    git config --global user.name "Your Name"
  3. Đặt nhánh mặc định git chung thành main:
    git config --global init.defaultBranch main

7. Viết mã

Cách viết ứng dụng trong Node.js:

  1. Chuyển đến thư mục gốc:
    cd ~
  2. Tạo thư mục codelab-genai:
    mkdir codelab-genai
  3. Chuyển đến thư mục codelab-genai:
    cd codelab-genai
  4. Tạo tệp index.js:
    touch index.js
  5. Tạo tệp package.json:
    npm init es6 -y
  6. Thêm express làm phần phụ thuộc
    npm install express
  7. Thêm tệp .gitignore để ngăn việc cam kết node_modules
    echo node_modules/ >> .gitignore
  8. Mở tệp index.js trong Trình chỉnh sửa Cloud Shell:
    cloudshell edit index.js
    Giờ đây, một tệp trống sẽ xuất hiện ở phần trên cùng của màn hình. Đây là nơi bạn có thể chỉnh sửa tệp index.js này. Hiển thị mã đó ở phần trên cùng của màn hình
  9. Sao chép mã sau và dán vào tệp index.js đã mở:
    import express from 'express';

const app = express();
app.get('/', async (req, res) => {
    res.send('Hello world!');
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});
    Sau vài giây, Trình chỉnh sửa Cloud Shell sẽ tự động lưu mã của bạn. Mã này phản hồi các yêu cầu http bằng lời chào "Hello world!" (Xin chào thế giới!).

Mã ban đầu cho ứng dụng của bạn đã hoàn tất và sẵn sàng được lưu trữ trong phần kiểm soát phiên bản.

8. Tạo kho lưu trữ

  1. Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
  2. Đảm bảo bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Khởi chạy kho lưu trữ git
    git init -b main
  4. Đăng nhập vào GitHub CLI
    gh auth login
    Nhấn Enter để chấp nhận các tuỳ chọn mặc định và làm theo hướng dẫn trong công cụ GitHub CLI, bao gồm:
    1. Bạn muốn đăng nhập vào tài khoản nào? GitHub.com
    2. Bạn muốn sử dụng giao thức nào cho các thao tác Git trên máy chủ này? HTTPS
    3. Xác thực Git bằng thông tin xác thực GitHub của bạn? Y (Bỏ qua nếu không thấy mục này.)
    4. Bạn muốn xác thực GitHub CLI theo cách nào? Login with a web browser
    5. Sao chép mã một lần
    6. Mở https://github.com/login/device
    7. Dán mã một lần
    8. Nhấp vào Uỷ quyền GitHub
    9. Hoàn tất quy trình đăng nhập
  5. Xác nhận bạn đã đăng nhập:
    gh api user -q ".login"
    Nếu bạn đã đăng nhập thành công, thì tên người dùng GitHub của bạn sẽ xuất ra.
  6. Tạo biến GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. Xác nhận rằng bạn đã tạo biến môi trường:
    echo ${GITHUB_USERNAME}
    Nếu bạn đã tạo thành công biến, thì biến này sẽ xuất ra tên người dùng GitHub của bạn.
  8. Tạo một kho lưu trữ GitHub trống có tên codelab-genai:
    gh repo create codelab-genai --private
    Nếu bạn gặp lỗi:
    GraphQL: Name already exists on this account (createRepository)
    thì tức là bạn đã có một kho lưu trữ có tên codelab-genai. Bạn có hai lựa chọn để tiếp tục theo dõi hướng dẫn này:
  9. Thêm kho lưu trữ codelab-genai làm origin từ xa:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. Chia sẻ mã

  1. Xác nhận rằng bạn đang ở đúng thư mục:
    cd ~/codelab-genai
  2. Thêm tất cả tệp trong thư mục hiện tại vào thay đổi sau:
    git add .
  3. Tạo thay đổi đầu tiên:
    git commit -m "add http server"
  4. Đẩy thay đổi của bạn vào nhánh main của kho lưu trữ origin:
    git push -u origin main

Bạn có thể chạy lệnh này và truy cập vào URL thu được để xem mã ứng dụng trên GitHub:

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

10. Thiết lập tính năng triển khai tự động

  1. Để thẻ Trình chỉnh sửa Cloud Shell mở. Chúng ta sẽ quay lại thẻ này sau.
  2. Trong một thẻ mới, hãy truy cập vào trang Cloud Run
  3. Chọn đúng Dự án Google Cloud trong bảng điều khiển Trình đơn thả xuống về dự án trên Google Cloud Console
  4. Nhấp vào KẾT NỐI KHO LƯU TRỮ
  5. Nhấp vào THIẾT LẬP BẰNG CLOUD BUILD
    1. Chọn GitHub làm Nhà cung cấp kho lưu trữ
      • Nếu bạn chưa đăng nhập vào tài khoản GitHub trong trình duyệt, hãy đăng nhập bằng thông tin xác thực của bạn.
    2. Nhấp vào Xác thực rồi nhấp vào Tiếp tục.
    3. Sau khi đăng nhập, bạn sẽ thấy thông báo trên trang Cloud Run cho biết Ứng dụng GitHub chưa được cài đặt trên bất kỳ kho lưu trữ nào của bạn.
    4. Nhấp vào nút INSTALL GOOGLE CLOUD BUILD (CÀI ĐẶT GOOGLE CLOUD BUILD).
      • Trên trang Thiết lập cài đặt, hãy chọn Chỉ chọn kho lưu trữ rồi chọn kho lưu trữ codelab-genai mà bạn đã tạo thông qua CLI.
      • Nhấp vào Cài đặt
      • Lưu ý: Nếu bạn có nhiều kho lưu trữ GitHub, thì quá trình này có thể mất vài phút để tải.
    5. Chọn your-user-name/codelab-genai làm Kho lưu trữ
      • Nếu kho lưu trữ không xuất hiện, hãy nhấp vào đường liên kết Quản lý kho lưu trữ đã kết nối.
    6. Giữ nguyên Branch là ^main$
    7. Nhấp vào Go, Node.js, Python, Java, .NET Core, Ruby hoặc PHP thông qua các gói xây dựng của Google Cloud
      • Giữ nguyên các trường khác (Build context directory, Entrypoint và Function target).
    8. Nhấp vào Lưu
  6. Di chuyển xuống phần Xác thực
  7. Nhấp vào Allow unauthenticated invocations (Cho phép các lệnh gọi chưa xác thực)
  8. Nhấp vào TẠO

Sau khi bản dựng hoàn tất (sẽ mất vài phút), hãy chạy lệnh này và truy cập vào URL thu được để xem ứng dụng đang chạy:

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. Thay đổi mã

Quay lại Trình chỉnh sửa Cloud Shell

Nếu vẫn mở Trình chỉnh sửa Cloud Shell, bạn có thể bỏ qua các bước này.

  1. Chuyển đến Trình chỉnh sửa Cloud Shell
  2. Nếu cửa sổ dòng lệnh không xuất hiện ở cuối màn hình, hãy mở cửa sổ đó:
    • Nhấp vào trình đơn có biểu tượng ba dấu gạch ngang Biểu tượng trình đơn ba đường kẻ
    • Nhấp vào Terminal (Thiết bị đầu cuối)
    • Nhấp vào New Terminal (Thiết bị đầu cuối mới)Mở cửa sổ dòng lệnh mới trong Trình chỉnh sửa Cloud Shell
  3. Trong dòng lệnh, hãy thiết lập dự án bằng lệnh sau:
    • Định dạng:
      gcloud config set project [PROJECT_ID]
    • Ví dụ:
      gcloud config set project lab-project-id-example
    • Nếu bạn không nhớ mã dự án của mình:
      • Bạn có thể liệt kê tất cả mã dự án bằng:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Đặt mã dự án trong thiết bị đầu cuối của Trình chỉnh sửa Cloud Shell
  4. Nếu bạn được nhắc uỷ quyền, hãy nhấp vào Uỷ quyền để tiếp tục. Nhấp để uỷ quyền cho Cloud Shell
  5. Bạn sẽ thấy thông báo này:
    Updated property [core/project].
    Nếu bạn thấy WARNING và được hỏi Do you want to continue (Y/N)?, thì có thể bạn đã nhập sai mã dự án. Nhấn N, nhấn Enter rồi thử chạy lại lệnh gcloud config set project.

Thêm Vertex AI vào ứng dụng

  1. Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
  2. Đảm bảo bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Cài đặt SDK Genkit của Node.js:
    npm install @genkit-ai/ai
  4. Cài đặt SDK Genkit Node.js cho Vertex AI:
    npm install @genkit-ai/vertexai
  5. Cài đặt SDK xác thực của Google cho Node.js:
    npm install google-auth-library
  6. Mở lại index.js trong Trình chỉnh sửa Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  7. Thay thế mã trong tệp index.js bằng:
    import express from 'express';
const app = express();

import { generate } from '@genkit-ai/ai';
import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';

import { GoogleAuth } from 'google-auth-library';
const auth = new GoogleAuth();

app.get('/', async (req, res) => {
    const project = await auth.getProjectId();

    const animal = req.query.animal || 'dog';
    const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
    const result = await generate({
        plugins: [
            vertexAI({ projectId: project, location: 'us-central1' }),
        ],
        model: gemini15Flash,
        prompt,
    });
    const html = result.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});

12. Triển khai lại

  1. Đảm bảo bạn vẫn đang ở đúng thư mục trong Cloud Shell:
    cd ~/codelab-genai
  2. Chạy các lệnh sau để cam kết phiên bản mới của ứng dụng vào kho lưu trữ git cục bộ:
    git add .
git commit -m "add latest changes"
  3. Đẩy các thay đổi lên GitHub:
    git push
  4. Sau khi bản dựng hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai:
    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"

Có thể mất vài phút để quá trình tạo bản dựng hoàn tất trước khi bạn có thể thấy các thay đổi.

Bạn có thể xem nhật ký của tất cả các bản sửa đổi tại đây: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Không bắt buộc) Kiểm tra việc sử dụng Vertex AI

Giống như các dịch vụ khác của Google Cloud, bạn có thể kiểm tra hoạt động của Vertex AI. Nhật ký kiểm tra giúp bạn trả lời các câu hỏi "Ai đã làm gì, ở đâu và khi nào?". Theo mặc định, nhật ký kiểm tra quản trị cho Vertex AI sẽ được bật. Để kiểm tra các yêu cầu tạo nội dung, bạn phải bật nhật ký kiểm tra quyền truy cập dữ liệu:

  1. Trong Google Cloud Console, hãy chuyển đến trang Nhật ký kiểm tra:

    Nếu bạn sử dụng thanh tìm kiếm để tìm trang này, hãy chọn kết quả có tiêu đề phụ là IAM & Quản trị.
  2. Đảm bảo rằng dự án Google Cloud hiện có là dự án mà bạn tạo ứng dụng Cloud Run.
  3. Trong bảng Cấu hình nhật ký kiểm tra quyền truy cập dữ liệu, hãy tìm và chọn Vertex AI API trong cột Dịch vụ.
  4. Trong thẻ Loại nhật ký, hãy chọn các loại nhật ký kiểm tra Quyền truy cập dữ liệu Admin read và Data read.
  5. Nhấp vào Lưu.

Sau khi bật tính năng này, bạn sẽ có thể xem nhật ký kiểm tra cho mỗi lệnh gọi của ứng dụng. Để xem nhật ký kiểm tra có thông tin chi tiết về lệnh gọi, hãy làm như sau:

  1. Quay lại ứng dụng đã triển khai và làm mới trang để kích hoạt nhật ký.
  2. Trong Google Cloud Console, hãy chuyển đến trang Trình khám phá nhật ký:

  3. Trong cửa sổ truy vấn, hãy nhập:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. Nhấp vào Run query (Chạy truy vấn).

Nhật ký kiểm tra ghi lại việc sử dụng API Vertex AI nhưng không cho phép bạn quan sát dữ liệu liên quan đến khối lượng công việc, chẳng hạn như lời nhắc hoặc thông tin chi tiết về phản hồi.

14. (Không bắt buộc) Tăng khả năng quan sát khối lượng công việc AI

Nhật ký kiểm tra không ghi lại thông tin liên quan đến khối lượng công việc. Để tăng khả năng quan sát khối lượng công việc, bạn phải ghi lại thông tin này một cách rõ ràng. Bạn có thể sử dụng khung ghi nhật ký mà bạn yêu thích để thực hiện việc này. Các bước sau đây minh hoạ cách thực hiện việc này bằng cơ chế ghi nhật ký gốc của Node.js.

  1. Mở lại index.js trong Trình chỉnh sửa Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  2. Sau lệnh gọi đến await generativeModel.generateContent(prompt) (dòng 19), hãy thêm dòng sau:
        console.log(JSON.stringify({
        severity: 'DEBUG',
        message: 'Content is generated',
        prompt: prompt,
        response: resp.response,
    }));
    Mã này ghi vào stdout thông tin về nội dung được tạo bằng định dạng ghi nhật ký có cấu trúc. Tác nhân ghi nhật ký trong Cloud Run sẽ ghi lại kết quả được in vào stdout và ghi định dạng này vào Cloud Logging.
  3. Mở lại Cloud Shell rồi nhập lệnh sau để đảm bảo rằng bạn đang ở đúng thư mục:
    cd ~/codelab-genai
  4. Gửi các thay đổi:
    git commit -am "observe generated content"
  5. Đẩy các thay đổi lên GitHub để kích hoạt việc triển khai lại phiên bản đã sửa đổi:
    git push

Sau khi triển khai phiên bản mới, bạn có thể quan sát thông tin gỡ lỗi về các lệnh gọi đến Vertex AI.

Để xem nhật ký ứng dụng, hãy làm như sau:

  1. Trong Google Cloud Console, hãy chuyển đến trang Trình khám phá nhật ký:

  2. Trong cửa sổ truy vấn, hãy nhập:
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. Nhấp vào Run query (Chạy truy vấn).

Kết quả của truy vấn cho thấy nhật ký có câu lệnh và phản hồi của Vertex AI, bao gồm cả "điểm xếp hạng an toàn" có thể dùng để theo dõi các phương pháp an toàn

15. (Không bắt buộc) Dọn dẹp

Mặc dù Cloud Run không tính phí khi bạn không sử dụng dịch vụ, nhưng bạn vẫn có thể phải trả phí để lưu trữ hình ảnh vùng chứa trong CSDL cấu phần phần mềm. Bạn có thể xoá dự án trên Google Cloud để tránh bị tính phí. Việc xoá dự án trên Google Cloud sẽ dừng tính phí cho tất cả tài nguyên được sử dụng trong dự án đó.

Nếu bạn muốn, hãy xoá dự án:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Bạn cũng có thể xoá các tài nguyên không cần thiết khỏi ổ đĩa cloudshell. Bạn có thể:

  1. Xoá thư mục dự án lớp học lập trình: 
    rm -rf ~/codelab-genai
  2. Cảnh báo! Bạn không thể huỷ thao tác này! Nếu muốn xoá mọi thứ trên Cloud Shell để giải phóng dung lượng, bạn có thể xoá toàn bộ thư mục gốc. Hãy lưu mọi thứ bạn muốn giữ lại ở nơi khác. 
    sudo rm -rf $HOME

16. Xin chúc mừng

Trong lớp học lập trình này, bạn đã viết một ứng dụng web và định cấu hình Cloud Run để tự động triển khai ứng dụng khi có thay đổi đối với mã nguồn của ứng dụng. Sau đó, bạn đã sửa đổi ứng dụng và triển khai lại ứng dụng.

Nếu thấy thích thú với lớp học này, bạn có thể thử lại trong một ngôn ngữ lập trình hoặc khung khác:

Nếu bạn muốn tham gia một nghiên cứu về trải nghiệm người dùng (UX) để cải thiện các sản phẩm mà bạn đã sử dụng hôm nay, hãy đăng ký tại đây.

Dưới đây là một số cách để bạn tiếp tục học tập: