使用 Cloud SQL Node.js 连接器将全栈 Angular 应用部署到 Cloud Run 和 Cloud SQL for PostgreSQL

使用 Cloud SQL Node.js 连接器将全栈 Angular 应用部署到 Cloud Run 和 Cloud SQL for PostgreSQL

关于此 Codelab

上次更新时间：3月 28, 2025

Luke Schlangen 编写

1. 概览

Cloud Run 是一个全代管式平台，可让您直接在 Google 可伸缩的基础架构之上运行代码。此 Codelab 将演示如何使用 Cloud SQL Node.js 连接器将 Cloud Run 上的 Angular 应用连接到 Cloud SQL for PostgreSQL 数据库。

在本实验中，您将学习如何完成以下操作：

• 创建 Cloud SQL for PostgreSQL 实例
• 将应用部署到 Cloud Run，以连接到 Cloud SQL 数据库

2. 前提条件

1. 如果您还没有 Google 账号，则必须先创建一个 Google 账号。
   • 请使用个人账号，而不是工作账号或学校账号。工作账号和学校账号可能会受到限制，导致您无法启用本实验所需的 API。

3. 项目设置

1. 登录 Google Cloud 控制台。
2. 在 Cloud 控制台中启用结算功能。
   • 完成本实验所需的 Cloud 资源费用应低于 1 美元。
   • 您可以按照本实验最后的步骤删除资源，以免产生更多费用。
   • 新用户符合参与 300 美元免费试用计划的条件。
3. 创建新项目或选择重复使用现有项目。

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 \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com

如果系统提示您进行授权，请点击授权继续。

此命令可能需要几分钟才能完成，但最终应该会显示类似以下内容的成功消息：

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

6. 设置服务账号

创建并配置供 Cloud Run 使用的 Google Cloud 服务账号，使其具有正确的权限来连接到 Cloud SQL。

1. 按照以下方式运行 gcloud iam service-accounts create 命令来创建新的服务账号：

   gcloud iam service-accounts create quickstart-service-account \
     --display-name="Quickstart Service Account"
   

2. 按如下所示运行 gcloud projects add-iam-policy-binding 命令，将 Cloud SQL Client 角色添加到您刚刚创建的 Google Cloud 服务账号。

   gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \
     --member="serviceAccount:quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --role="roles/cloudsql.client"
   

3. 按如下所示运行 gcloud projects add-iam-policy-binding 命令，将 Cloud SQL 实例用户角色添加到您刚刚创建的 Google Cloud 服务账号。

   gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \
     --member="serviceAccount:quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --role="roles/cloudsql.instanceUser"
   

4. 按如下所示运行 gcloud projects add-iam-policy-binding 命令，将 Log Writer 角色添加到您刚刚创建的 Google Cloud 服务账号。

   gcloud projects add-iam-policy-binding ${GOOGLE_CLOUD_PROJECT} \
     --member="serviceAccount:quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
     --role="roles/logging.logWriter"
   

7. 创建 Cloud SQL 数据库

1. 运行 gcloud sql instances create 命令以创建 Cloud SQL 实例

   gcloud sql instances create quickstart-instance \
       --database-version=POSTGRES_14 \
       --cpu=4 \
       --memory=16GB \
       --region=us-central1 \
       --database-flags=cloudsql.iam_authentication=on
   

此命令可能需要几分钟才能完成。

1. 运行 gcloud sql databases create 命令以在 quickstart-instance 中创建 Cloud SQL 数据库。

   gcloud sql databases create quickstart_db \
       --instance=quickstart-instance
   

2. 为您之前创建的服务账号创建 PostgreSQL 数据库用户，以便访问数据库。

   gcloud sql users create quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam \
       --instance=quickstart-instance \
       --type=cloud_iam_service_account
   

8. 准备申请

准备一个响应 HTTP 请求的 Next.js 应用。

1. 要创建名为 task-app 的新 Next.js 项目，请使用以下命令：

   npx --yes @angular/cli@19.2.5 new task-app \
       --minimal \
       --inline-template \
       --inline-style \
       --ssr \
       --server-routing \
       --defaults
   

2. 转到 task-app 目录：

   cd task-app
   

1. 安装 pg 和 Cloud SQL Node.js 连接器库，以与 PostgreSQL 数据库进行交互。

   npm install pg @google-cloud/cloud-sql-connector google-auth-library
   

2. 将 @types/pg 安装为开发依赖项，以使用 TypeScript Next.js 应用。

   npm install --save-dev @types/pg
   

1. 在 Cloud Shell Editor 中打开 server.ts 文件：

   cloudshell edit src/server.ts
   

   现在，屏幕顶部应该会显示一个文件。您可以在此处修改此 server.ts 文件。
2. 删除 server.ts 文件的现有内容。
3. 复制以下代码并将其粘贴到打开的 server.ts 文件中：

   import {
     AngularNodeAppEngine,
     createNodeRequestHandler,
     isMainModule,
     writeResponseToNodeResponse,
   } from '@angular/ssr/node';
   import express from 'express';
   import { dirname, resolve } from 'node:path';
   import { fileURLToPath } from 'node:url';
   import pg from 'pg';
   import { AuthTypes, Connector } from '@google-cloud/cloud-sql-connector';
   import { GoogleAuth } from 'google-auth-library';
   const auth = new GoogleAuth();
   
   const { Pool } = pg;
   
   type Task = {
     id: string;
     title: string;
     status: 'IN_PROGRESS' | 'COMPLETE';
     createdAt: number;
   };
   
   const projectId = await auth.getProjectId();
   
   const connector = new Connector();
   const clientOpts = await connector.getOptions({
     instanceConnectionName: `${projectId}:us-central1:quickstart-instance`,
     authType: AuthTypes.IAM,
   });
   
   const pool = new Pool({
     ...clientOpts,
     user: `quickstart-service-account@${projectId}.iam`,
     database: 'quickstart_db',
   });
   
   const tableCreationIfDoesNotExist = async () => {
     await pool.query(`CREATE TABLE IF NOT EXISTS tasks (
         id SERIAL NOT NULL,
         created_at timestamp NOT NULL,
         status VARCHAR(255) NOT NULL default 'IN_PROGRESS',
         title VARCHAR(1024) NOT NULL,
         PRIMARY KEY (id)
       );`);
   }
   
   const serverDistFolder = dirname(fileURLToPath(import.meta.url));
   const browserDistFolder = resolve(serverDistFolder, '../browser');
   
   const app = express();
   const angularApp = new AngularNodeAppEngine();
   
   app.use(express.json());
   
   app.get('/api/tasks', async (req, res) => {
     await tableCreationIfDoesNotExist();
     const { rows } = await pool.query(`SELECT id, created_at, status, title FROM tasks ORDER BY created_at DESC LIMIT 100`);
     res.send(rows);
   });
   
   app.post('/api/tasks', async (req, res) => {
     const newTaskTitle = req.body.title;
     if (!newTaskTitle) {
       res.status(400).send("Title is required");
       return;
     }
     await tableCreationIfDoesNotExist();
     await pool.query(`INSERT INTO tasks(created_at, status, title) VALUES(NOW(), 'IN_PROGRESS', $1)`, [newTaskTitle]);
     res.sendStatus(200);
   });
   
   app.put('/api/tasks', async (req, res) => {
     const task: Task = req.body;
     if (!task || !task.id || !task.title || !task.status) {
       res.status(400).send("Invalid task data");
       return;
     }
     await tableCreationIfDoesNotExist();
     await pool.query(
       `UPDATE tasks SET status = $1, title = $2 WHERE id = $3`,
       [task.status, task.title, task.id]
     );
     res.sendStatus(200);
   });
   
   app.delete('/api/tasks', async (req, res) => {
     const task: Task = req.body;
     if (!task || !task.id) {
       res.status(400).send("Task ID is required");
       return;
     }
     await tableCreationIfDoesNotExist();
     await pool.query(`DELETE FROM tasks WHERE id = $1`, [task.id]);
     res.sendStatus(200);
   });
   
   /**
   * Serve static files from /browser
   */
   app.use(
     express.static(browserDistFolder, {
       maxAge: '1y',
       index: false,
       redirect: false,
     }),
   );
   
   /**
   * Handle all other requests by rendering the Angular application.
   */
   app.use('/**', (req, res, next) => {
     angularApp
       .handle(req)
       .then((response) =>
         response ? writeResponseToNodeResponse(response, res) : next(),
       )
       .catch(next);
   });
   
   /**
   * Start the server if this module is the main entry point.
   * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
   */
   if (isMainModule(import.meta.url)) {
     const port = process.env['PORT'] || 4000;
     app.listen(port, () => {
       console.log(`Node Express server listening on http://localhost:${port}`);
     });
   }
   
   /**
   * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
   */
   export const reqHandler = createNodeRequestHandler(app);
   

1. 在 Cloud Shell Editor 中打开 app.component.ts 文件：

   cloudshell edit src/app/app.component.ts
   

   现在，屏幕顶部应该会显示一个现有文件。您可以在此处修改此 app.component.ts 文件。
2. 删除 app.component.ts 文件的现有内容。
3. 复制以下代码并将其粘贴到打开的 app.component.ts 文件中：

   import { afterNextRender, Component, signal } from '@angular/core';
   import { FormsModule } from '@angular/forms';
   
   type Task = {
     id: string;
     title: string;
     status: 'IN_PROGRESS' | 'COMPLETE';
     createdAt: number;
   };
   
   @Component({
     selector: 'app-root',
     standalone: true,
     imports: [FormsModule],
     template: `
       <section>
         <input
           type="text"
           placeholder="New Task Title"
           [(ngModel)]="newTaskTitle"
           class="text-black border-2 p-2 m-2 rounded"
         />
         <button (click)="addTask()">Add new task</button>
         <table>
           <tbody>
             @for (task of tasks(); track task) {
               @let isComplete = task.status === 'COMPLETE';
               <tr>
                 <td>
                   <input
                     (click)="updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })"
                     type="checkbox"
                     [checked]="isComplete"
                   />
                 </td>
                 <td>{{ task.title }}</td>
                 <td>{{ task.status }}</td>
                 <td>
                   <button (click)="deleteTask(task)">Delete</button>
                 </td>
               </tr>
             }
           </tbody>
         </table>
       </section>
     `,
     styles: '',
   })
   export class AppComponent {
     newTaskTitle = '';
     tasks = signal<Task[]>([]);
   
     constructor() {
       afterNextRender({
         earlyRead: () => this.getTasks()
       });
     }
   
     async getTasks() {
       const response = await fetch(`/api/tasks`);
       const tasks = await response.json();
       this.tasks.set(tasks);
     }
   
     async addTask() {
       await fetch(`/api/tasks`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           title: this.newTaskTitle,
           status: 'IN_PROGRESS',
           createdAt: Date.now(),
         }),
       });
       this.newTaskTitle = '';
       await this.getTasks();
     }
   
     async updateTask(task: Task, newTaskValues: Partial<Task>) {
       await fetch(`/api/tasks`, {
         method: 'PUT',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ ...task, ...newTaskValues }),
       });
       await this.getTasks();
     }
   
     async deleteTask(task: any) {
       await fetch('/api/tasks', {
         method: 'DELETE',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify(task),
       });
       await this.getTasks();
     }
   }
   

应用现已准备就绪，可以部署。

9. 将应用部署到 Cloud Run

1. 运行以下命令将应用部署到 Cloud Run：

   gcloud run deploy to-do-tracker \
       --region=us-central1 \
       --source=. \
       --service-account="quickstart-service-account@${GOOGLE_CLOUD_PROJECT}.iam.gserviceaccount.com" \
       --allow-unauthenticated
   

2. 如果系统提示，请按 Y 和 Enter 确认您要继续：

   Do you want to continue (Y/n)? Y
   

几分钟后，应用应会提供一个网址供您访问。

前往该网址，查看应用的实际运行情况。每次访问该网址或刷新页面时，您都会看到 Tasks 应用。

10. 恭喜

在本实验中，您学习了如何执行以下操作：

• 创建 Cloud SQL for PostgreSQL 实例
• 将应用部署到 Cloud Run，以连接到 Cloud SQL 数据库

清理

Cloud SQL 不提供免费层级，如果您继续使用，我们会向您收费。您可以删除 Cloud 项目，以免产生额外费用。

虽然 Cloud Run 不会对未在使用中的服务计费，但您可能仍然需要为将容器映像存储在 Artifact Registry 中而产生的相关费用付费。删除 Cloud 项目后，系统即会停止对该项目中使用的所有资源计费。

如有需要，请删除项目：

gcloud projects delete $GOOGLE_CLOUD_PROJECT

您可能还希望从 Cloud Shell 磁盘中删除不必要的资源。您可以：

1. 删除 Codelab 项目目录：

   rm -rf ~/task-app
   

2. 警告！下一步操作无法撤消！如果您想删除 Cloud Shell 中的所有内容以释放空间，可以删除整个主目录。请务必将您要保留的所有内容保存到其他位置。

   sudo rm -rf $HOME