自动将生成式 AI Node.js Genkit Web 应用从版本控制系统部署到 Cloud Run

1. 概览

首次部署 Web 应用可能会令人望而生畏。即使在首次部署后，如果该流程过于繁琐，您也可能会避免部署应用的新版本。借助持续部署，您可以轻松自动部署应用更改。

在本实验中，您将编写一个 Web 应用，并配置 Cloud Run，以便在应用的源代码发生更改时自动部署应用。然后，您修改应用并再次部署。

学习内容

• 使用 Cloud Shell 编辑器编写 Web 应用
• 将应用代码存储在 GitHub 中
• 自动将应用部署到 Cloud Run

• 使用 Genkit 将生成式 AI 添加到您的应用中
• 使用 dotprompt 库管理 LLM 提示

2. 前提条件

1. 如果您还没有 Google 账号，则必须先创建一个 Google 账号。
   • 请改用个人账号，而非工作账号或学校账号。工作账号和学校账号可能存在限制，导致您无法启用本实验所需的 API。
2. 如果您还没有 GitHub 账号，则必须创建 GitHub 账号
   • 使用已有的 GitHub 账号（如果有）。GitHub 更容易将新账号视为垃圾账号加以屏蔽。
   • 在 GitHub 账号中配置双重身份验证，以降低账号被标记为垃圾账号的几率。

3. 项目设置

1. 登录 Google Cloud 控制台。
2. 在 Cloud 控制台中启用结算功能。
   • 完成本实验的 Cloud 资源费用应不到 1 美元。
   • 您可以按照本实验结束时的步骤删除资源，以避免产生更多费用。
   • 新用户符合参与 300 美元免费试用计划的条件。
   • 要参加 Gen AI for Devs 活动？您或许可以获得 1 美元抵用金。
3. 创建新项目或选择重复使用现有项目。
4. 确认 Cloud 结算中的我的项目已启用结算功能
   • 如果新项目的 Billing account 列中显示 Billing is disabled，请执行以下操作：
     1. 点击 Actions 列中的三点状图标
     2. 点击更改结算信息
     3. 选择您要使用的结算账号
   • 如果您参加的是 Gen AI for Devs 活动，则该账号的名称很可能是 Google Cloud Platform 试用结算账号

4. 打开 Cloud Shell Editor

1. 前往 Cloud Shell 编辑器
2. 如果终端未显示在屏幕底部，请打开它：
   • 点击汉堡式菜单
   • 点击终端
   • 点击 New Terminal
3. 在终端中，使用以下命令设置项目：
   • 格式：

     gcloud config set project [PROJECT_ID]
     

   • 示例：

     gcloud config set project lab-project-id-example
     

   • 如果您不记得项目 ID，请执行以下操作：
     • 您可以使用以下命令列出所有项目 ID：

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. 如果系统提示您进行授权，请点击授权以继续。
5. 您应会看到以下消息：

   Updated property [core/project].
   

   如果您看到 WARNING 并被问到 Do you want to continue (Y/N)?，则很可能是您输入的项目 ID 有误。按 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 "[e-mail]"
   

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 目录：

   mkdir codelab-genai
   

3. 导航到 codelab-genai 目录：

   cd codelab-genai
   

4. 创建 index.js 文件：

   touch index.js
   

5. 创建 package.json 文件：

   npm init es6 -y
   

6. 将 express 添加为依赖项

   npm install express
   

7. 添加 .gitignore 文件以防止提交 node_modules

   echo node_modules/ >> .gitignore
   

8. 在 Cloud Shell 编辑器中打开 index.js 文件：

   cloudshell edit index.js
   

   屏幕顶部现在应会显示一个空文件。您可以在此处修改此 index.js 文件。
9. 复制以下代码并将其粘贴到打开的 index.js 文件中：

   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}`);
   });
   

   几秒钟后，Cloud Shell 编辑器会自动保存您的代码。此代码使用我们的“Hello world!”问候语响应 HTTP 请求。

应用的初始代码已完成，可以存储在版本控制系统中。

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. 是否使用您的 GitHub 凭据对 Git 进行身份验证？Y（如果未显示此选项，请跳过。）
   4. 您想如何对 GitHub CLI 进行身份验证？ Login with a web browser
   5. 复制一次性验证码
   6. 打开 https://github.com/login/device
   7. 粘贴一次性验证码
   8. 点击 Authorize 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. 创建一个名为 codelab-genai 的空 GitHub 代码库：

   gh repo create codelab-genai --private
   

   如果您收到以下错误：

   GraphQL: Name already exists on this account (createRepository)
   

   那么您已经有一个名为 codelab-genai 的代码库。您可以通过以下两种方式继续学习本教程：
   • 删除现有的 GitHub 代码库
   • 创建具有其他名称的代码库，并记得在以下命令中更改该名称。
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. 将提交推送到 origin 代码库的 main 分支：

   git push -u origin main
   

您可以运行此命令，然后访问生成的网址，以在 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. 设置自动部署

1. 将 Cloud Shell 编辑器标签页保持打开状态。我们稍后会返回此标签页。
2. 在新标签页中，访问 Cloud Run 页面
3. 在控制台中选择正确的 Google Cloud 项目
4. 点击 CONNECT REPO
5. 点击使用 Cloud Build 进行设置
   1. 选择 GitHub 作为代码库提供程序
      • 如果您尚未在浏览器中登录 GitHub 账号，请使用您的凭据登录。
   2. 点击验证，然后点击继续。
   3. 登录后，您会在 Cloud Run 页面上看到一条消息，指出未针对您的任何代码库安装 GitHub 应用。
   4. 点击安装 Google Cloud Build 按钮。
      • 在“安装设置”页面上，选择仅选择代码库，然后选择您通过 CLI 创建的 codelab-genai 代码库。
      • 点击安装
      • 注意：如果您有大量 GitHub 代码库，则可能需要几分钟才能加载完成。
   5. 选择 your-user-name/codelab-genai 作为代码库
      • 如果未显示相应代码库，请点击管理关联的代码库链接。
   6. 将分支保留为 ^main$
   7. 点击 Go、Node.js、Python、Java、.NET Core、Ruby 或 PHP（通过 Google Cloud Buildpack）
      • 其他字段（Build context directory、Entrypoint 和 Function target）保持不变。
   8. 点击保存
6. 向下滚动到身份验证
7. 点击允许未经身份验证的调用
8. 点击创建 (CREATE)

构建完成后（需要几分钟时间），运行此命令并访问生成的网址，以查看正在运行的应用：

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 编辑器

如果您仍打开着 Cloud Shell 编辑器，则可以跳过这些步骤。

1. 前往 Cloud Shell 编辑器
2. 如果终端未显示在屏幕底部，请打开它：
   • 点击汉堡式菜单
   • 点击终端
   • 点击 New Terminal
3. 在终端中，使用以下命令设置项目：
   • 格式：

     gcloud config set project [PROJECT_ID]
     

   • 示例：

     gcloud config set project lab-project-id-example
     

   • 如果您不记得项目 ID，请执行以下操作：
     • 您可以使用以下命令列出所有项目 ID：

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. 如果系统提示您进行授权，请点击授权以继续。
5. 您应会看到以下消息：

   Updated property [core/project].
   

   如果您看到 WARNING 并被问到 Do you want to continue (Y/N)?，则很可能是您输入的项目 ID 有误。按 N，按 Enter，然后尝试再次运行 gcloud config set project 命令。

将 Genkit 和 Vertex AI 添加到您的应用

1. 返回到屏幕底部的 Cloud Shell 终端。
2. 确保您仍位于正确的目录中：

   cd ~/codelab-genai
   

3. 安装 Node.js Genkit SDK：

   npm install @genkit-ai/ai
   

4. 安装适用于 Vertex AI 的 Node.js Genkit SDK：

   npm install @genkit-ai/vertexai
   

5. 在 Cloud Shell 编辑器中重新打开 index.js

   cloudshell edit ~/codelab-genai/index.js
   

6. 将 index.js 文件中的代码替换为：

   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. 确保您仍在 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"
   

可能需要过几分钟，build 才能完成，然后您才能看到所做的更改。

您可以在以下网址查看所有修订版本的历史记录：https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

12. （可选）将 .prompt 文件与 Genkit 搭配使用

1. 返回到屏幕底部的 Cloud Shell 终端。
2. 确保您仍位于正确的目录中：

   cd ~/codelab-genai
   

3. 创建一个 prompts 文件夹来存储提示：

   mkdir prompts
   

4. 创建一个 animal-facts.prompt 文件来创建您的第一个提示：

   touch prompts/animal-facts.prompt
   

5. 在 Cloud Shell 编辑器中打开 animal-facts.prompt 文件：

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

6. 修改 animal-facts.prompt 并将以下代码粘贴到其中：

   ---
   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. 在 Cloud Shell 编辑器中打开 index.js 文件：

   cloudshell edit ~/codelab-genai/index.js
   

8. 将 index.js 文件中的代码替换为：

   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. 确保您仍在 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"
   

可能需要过几分钟，build 才能完成，然后您才能看到所做的更改。

您可以在以下网址查看所有修订版本的历史记录：https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. （可选）使用系统提示

此步骤假定您已在上一步中添加了 .prompt 文件。

1. 返回到屏幕底部的 Cloud Shell 终端。
2. 确保您仍位于正确的目录中：

   cd ~/codelab-genai
   

3. 在 Cloud Shell 编辑器中打开 animal-facts.prompt 文件：

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

4. 修改 animal-facts.prompt 并将以下代码粘贴到其中：

   ---
   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. 确保您仍在 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"
   

可能需要过几分钟，build 才能完成，然后您才能看到所做的更改。

您可以在以下网址查看所有修订版本的历史记录：https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. 恭喜

在本实验中，您编写了一个 Web 应用，并配置了 Cloud Run，以便在应用的源代码发生更改时自动部署应用。然后，您修改了应用并再次部署。

如果您喜欢本实验，可以尝试使用其他编码语言或框架再次完成本实验：

• Python
• Node.js
• Go
• Java
• Angular
• Next.js

以下是一些可供您继续学习的选项：

• Genkit 文档：使用入门
• 用于为 Node.js 应用添加可观测性的 Codelab：JavaScript 中生成式 AI 应用的实用可观测性技术
• Codelab：使用 Next.js 为应用添加前端：自动将生成式 AI Next.js Web 应用从版本控制系统部署到 Cloud Run
• 展示如何使用函数调用的 Codelab：如何将 Gemini 函数调用与 Cloud Run 搭配使用
• 使用 AI 处理视频内容的 Codelab：如何使用 Cloud Run 作业 Video Intelligence API 逐场景处理视频