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

1. 概览

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

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

学习内容

• 使用 Cloud Shell Editor 编写 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 美元免费试用的条件。
   • 要参加“面向开发者的生成式 AI”活动？您可能会获得 1 美元抵用金。
3. 创建新项目或选择重复使用现有项目。
4. 在 Cloud Billing 的我负责的项目中确认已启用结算功能
   • 如果新项目的 Billing account 列显示 Billing is disabled：
     1. 点击 Actions 列中的三点状图标
     2. 点击更改结算信息
     3. 选择要使用的结算账号
   • 如果您要参加面向开发者的 Gen AI 活动，该账号的名称可能为 Google Cloud Platform 试用结算账号

4. 打开 Cloud Shell Editor

1. 前往 Cloud Shell Editor
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 Editor 中打开 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. 点击授权 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 Editor 标签页保持打开状态。我们稍后会返回此标签页。
2. 在新的标签页中，访问 Cloud Run 页面
3. 在控制台中选择正确的 Google Cloud 项目
4. 点击关联代码库
5. 点击使用 Cloud Build 进行设置
   1. 选择 GitHub 作为代码库提供程序
      • 如果您尚未在浏览器中登录 GitHub 账号，请使用您的凭据登录。
   2. 点击身份验证，然后点击继续。
   3. 登录后，您会在 Cloud Run 页面上看到一条消息，其中指出未针对您的任何代码库安装 GitHub 应用。
   4. 点击 INSTALL GOOGLE CLOUD BUILD 按钮。
      • 在“Installation Setup”（安装设置）页面上，选择 Only select repositories（仅选择代码库），然后选择您通过 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 Editor

如果 Cloud Shell Editor 仍处于打开状态，则可以跳过以下步骤。

1. 前往 Cloud Shell Editor
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 Editor 中重新打开 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"
   

构建过程可能需要几分钟才能完成，之后您才能看到所做的更改。

您可以在此处查看所有修订版本的历史记录：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 Editor 中打开 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 Editor 中打开 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"
   

构建过程可能需要几分钟才能完成，之后您才能看到所做的更改。

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

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

此步骤假定您已在前面的步骤中添加了 .prompt 文件。

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

   cd ~/codelab-genai
   

3. 在 Cloud Shell Editor 中打开 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"
   

构建过程可能需要几分钟才能完成，之后您才能看到所做的更改。

您可以在此处查看所有修订版本的历史记录：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 应用的实用可观测性技术
• 使用 Next.js 向应用添加前端的 Codelab：自动将生成式 AI Next.js Web 应用从版本控制系统部署到 Cloud Run
• 展示如何使用函数调用的 Codelab：如何将 Gemini 函数调用与 Cloud Run 搭配使用
• 使用 AI 处理视频内容的 Codelab：如何使用 Cloud Run 作业 Video Intelligence API 逐场景处理视频