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

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在 Cloud Shell Editor 中打开新终端
  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}'
      在 Cloud Shell Editor 终端中设置项目 ID
  4. 如果系统提示您进行授权，请点击授权继续。点击以授权 Cloud Shell
  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

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

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

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