Tự động triển khai ứng dụng web Genkit Node.js AI tạo sinh từ tính năng Kiểm soát phiên bản sang Cloud Run

1. Tổng quan

Việc triển khai một ứ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 quy trình này quá phức tạp, 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 của ứng dụng.

Trong phòng thí nghiệm 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 rồi triển khai lại.

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

  • Viết một ứng dụng web bằng Cloud Shell Editor
  • Lưu trữ mã ứng dụng của bạn 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ý câu lệnh 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 một Tài khoản Google.
    • Sử dụng tài khoản cá nhân thay vì tài khoản do nơi làm việc hoặc trường học cấp. Tài khoản do nơi làm việc và trường học cấp có thể có những hạn chế khiến bạn không thể bật 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 một 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.
    • Việc hoàn thành bài thực hành này sẽ tốn ít hơn 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 bài thực hành này để xoá tài nguyên nhằm tránh bị tính thêm phí.
    • Người dùng mới sẽ đủ điều kiện dùng thử miễn phí 300 USD.
    • Bạn sẽ tham dự một sự kiện về AI tạo sinh cho nhà phát triển chứ? Bạn có thể nhận được khoản tín dụng trị giá 1 USD.
  3. Tạo một dự án mới hoặc chọn sử dụng lại một dự án hiện có.
  4. Xác nhận rằng bạn đã bật tính năng thanh toán trong phần Dự án của tôi trong mục Thanh toán trên Cloud
    • Nếu dự án mới của bạn có trạng thái Billing is disabled trong cột Billing account:
      1. Nhấp vào biểu tượng ba dấu chấm trong cột Actions
      2. Nhấp vào Thay đổi thông tin thanh toán
      3. Chọn tài khoản thanh toán mà bạn muốn sử dụng
    • Nếu bạn tham dự một sự kiện về AI tạo sinh cho nhà phát triển, thì tài khoản đó có thể có tên là Tài khoản thanh toán dùng thử của Google Cloud Platform

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 thiết bị đầu cuối không xuất hiện ở cuối màn hình, hãy mở thiết bị đầu cuối:
    • 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ở thiết bị đầu cuối mới trong Trình chỉnh sửa Cloud Shell
  3. Trong thiết bị đầu cuối, 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, hãy làm như sau:
      • Bạn có thể liệt kê tất cả mã dự án bằng cách dùng:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Đặt mã dự án trong thiết bị đầu cuối Cloud Shell Editor
  4. Nếu đượ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 sau:
    Updated property [core/project].
    Nếu thấy biểu tượng WARNING và được yêu cầu 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

Lệnh này có thể mất vài phút để hoàn tấ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ư thông báo này:

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 toàn cầu:
    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 một ứng dụng bằng Node.js:

  1. Chuyển đến thư mục chính:
    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 xác nhận node_modules
    echo node_modules/ >> .gitignore
  8. Mở tệp index.js trong Cloud Shell Editor:
    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. Cho thấy mã nằm ở phần trên cùng của màn hình
  9. Sao chép mã sau đây rồi 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, Cloud Shell Editor sẽ tự động lưu mã của bạn. Đoạn mã này phản hồi các yêu cầu http bằng lời chào "Hello world!" của chúng ta.

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 hệ thống 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 rằng bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Khởi tạo 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 lựa 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 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 đăng nhập GitHub của bạn? Y (Bỏ qua nếu không thấy lựa chọn này.)
    4. Bạn muốn xác thực GitHub CLI bằng cách nào? Login with a web browser
    5. Sao chép mã một lần
    6. Truy cập vào https://github.com/login/device
    7. Dán mã một lần
    8. Nhấp vào Uỷ quyền cho github
    9. Hoàn tất quá trình đăng nhập
  5. Xác nhận rằng bạn đã đăng nhập:
    gh api user -q ".login"
    Nếu bạn đã đăng nhập thành công, lệnh này sẽ xuất tên người dùng GitHub của bạn.
  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 này, thì biến này sẽ xuất tên người dùng GitHub của bạn.
  8. Tạo một kho lưu trữ trống trên GitHub có tên là codelab-genai:
    gh repo create codelab-genai --private
    Nếu bạn gặp lỗi:
    GraphQL: Name already exists on this account (createRepository)
    Sau đó, bạn đã có một kho lưu trữ có tên là codelab-genai. Bạn có 2 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ã của bạn

  1. Xác nhận rằng bạn đang ở đúng thư mục:
    cd ~/codelab-genai
  2. Thêm tất cả các tệp trong thư mục hiện tại vào cam kết này:
    git add .
  3. Tạo cam kết đầu tiên:
    git commit -m "add http server"
  4. Đẩy cam kết 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 kết quả để xem mã ứng dụng của mình 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 quy trình triển khai tự động

  1. Để thẻ Cloud Shell Editor 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 dự án trên Google Cloud Console
  4. Nhấp vào CONNECT REPO (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 đăng nhập 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 một 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 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ữ và 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ữ trên 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 có ở đó, hãy nhấp vào đường liên kết Quản lý kho lưu trữ được kết nối.
    6. Rời khỏi Nhánh dưới dạng ^main$
    7. Nhấp vào Go, Node.js, Python, Java, .NET Core, Ruby hoặc PHP thông qua buildpack 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 Cho phép lệnh gọi chưa được xác thực
  8. Nhấp vào TẠO

Sau khi quá trình tạo bản dựng hoàn tất (mất vài phút), hãy chạy lệnh này và truy cập vào URL kết quả để 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 Cloud Shell Editor

Nếu vẫn mở Cloud Shell Editor, 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 thiết bị đầu cuối không xuất hiện ở cuối màn hình, hãy mở thiết bị đầu cuối:
    • 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ở thiết bị đầu cuối mới trong Trình chỉnh sửa Cloud Shell
  3. Trong thiết bị đầu cuối, 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, hãy làm như sau:
      • Bạn có thể liệt kê tất cả mã dự án bằng cách dùng:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Đặt mã dự án trong thiết bị đầu cuối Cloud Shell Editor
  4. Nếu đượ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 sau:
    Updated property [core/project].
    Nếu thấy biểu tượng WARNING và được yêu cầu 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 Genkit và 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 rằng bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Cài đặt Node.js Genkit SDK:
    npm install @genkit-ai/ai
  4. Cài đặt Node.js Genkit SDK cho Vertex AI:
    npm install @genkit-ai/vertexai
  5. Mở lại index.js trong Trình chỉnh sửa Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  6. Thay thế mã trong tệp index.js bằng:
    import express from 'express';
const app = express();

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

const ai = genkit({
    plugins: [
        vertexAI({ location: 'us-central1' }),
    ],
});

app.get('/', async (req, res) => {
    const animal = req.query.animal || 'dog';
    const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
    const llmResponse = await ai.generate({
        model: gemini15Flash,
        prompt: prompt,
    });
    const html = llmResponse.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});
  1. Đảm bảo rằng bạn vẫn đang ở đúng thư mục trong Cloud Shell:
    cd ~/codelab-genai
  2. Chạy các lệnh này để xác nhận mộ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 quá trình tạo hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai của bạn:
    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 để 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

12. (Không bắt buộc) Sử dụng tệp .prompt với Genkit

  1. Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
  2. Đảm bảo rằng bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Tạo một thư mục prompts để lưu trữ câu lệnh:
    mkdir prompts
  4. Tạo tệp animal-facts.prompt để tạo câu lệnh đầu tiên:
    touch prompts/animal-facts.prompt
  5. Mở tệp animal-facts.prompt trong Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  6. Chỉnh sửa animal-facts.prompt và dán mã sau vào đó:
    ---
model: vertexai/gemini-1.5-flash
input:
    schema:
        animal: string
---

Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
  7. Mở tệp index.js trong Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/index.js
  8. Thay thế mã trong tệp index.js bằng:
    import express from 'express';
const app = express();

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

const ai = genkit({
    plugins: [
        vertexAI({ location: 'us-central1' }),
    ],
});

app.get('/', async (req, res) => {
    const animal = req.query.animal || 'dog';
    const animalPrompt = ai.prompt('animal-facts');
    const llmResponse = await animalPrompt({animal});
    const html = llmResponse.text;
    res.send(html);
});

const port = process.env.PORT || 8080;
app.listen(port, () => {
    console.log(`codelab-genai: listening on port ${port}`);
});
  1. Đảm bảo rằng bạn vẫn đang ở đúng thư mục trong Cloud Shell:
    cd ~/codelab-genai
  2. Chạy các lệnh này để xác nhận mộ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 quá trình tạo hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai của bạn:
    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 để 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) Sử dụng câu lệnh hệ thống

Bước này giả định rằng bạn đã thêm các tệp .prompt trong bước trước.

  1. Quay lại thiết bị đầu cuối Cloud Shell ở cuối màn hình.
  2. Đảm bảo rằng bạn vẫn đang ở đúng thư mục:
    cd ~/codelab-genai
  3. Mở tệp animal-facts.prompt trong Cloud Shell Editor:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  4. Chỉnh sửa animal-facts.prompt và dán mã sau vào đó:
    ---
model: vertexai/gemini-1.5-flash
config:
    temperature: 0.9
input:
    schema:
        animal: string
---

role "system"
The user should have submitted an animal.
If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts.
Give the user 10 fun facts about the animal the user provided.
All responses should be valid HTML without markdown backticks.

role "user"
{{animal}}
  1. Đảm bảo rằng bạn vẫn đang ở đúng thư mục trong Cloud Shell:
    cd ~/codelab-genai
  2. Chạy các lệnh này để xác nhận mộ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 quá trình tạo hoàn tất, hãy chạy lệnh này và truy cập vào ứng dụng đã triển khai của bạn:
    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 để 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

14. Xin chúc mừng

Trong phòng thí nghiệm 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.

Nếu thích phòng thí nghiệm này, bạn có thể thử lại bằng một ngôn ngữ hoặc khung lập trình khác:

Sau đây là một số lựa chọn để bạn tiếp tục học tập: