使用 Node.js Admin SDK 将全栈 Next.js 应用部署到 Cloud Run with Firestore

1. 概览

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

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

  • 创建 Firestore 数据库
  • 将连接到 Firestore 数据库的应用部署到 Cloud Run

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

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

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

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

6. 创建 Firestore 数据库

  1. 运行 gcloud firestore databases create 命令以创建 Firestore 数据库
    gcloud firestore databases create --location=nam5

7. 准备申请材料

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

  1. 要创建名为 task-app 的新 Next.js 项目，请使用以下命令：
    npx --yes create-next-app@15.2.4 task-app \
  --ts \
  --eslint \
  --tailwind \
  --no-src-dir \
  --turbopack \
  --app \
  --no-import-alias
  2. 转到 task-app 目录：
    cd task-app
  1. 安装 firebase-admin 以与 Firestore 数据库进行交互。
    npm install firebase-admin
  1. 在 Cloud Shell Editor 中打开 actions.ts 文件：
    cloudshell edit app/actions.ts
    现在，屏幕顶部应该会显示一个空文件。您可以在此处修改此 actions.ts 文件。显示该代码位于屏幕顶部
  2. 复制以下代码并将其粘贴到打开的 actions.ts 文件中：
    'use server'
import { initializeApp, applicationDefault, getApps } from 'firebase-admin/app';
import { getFirestore } from 'firebase-admin/firestore';
const credential = applicationDefault();

// Only initialize app if it does not already exist
if (getApps().length === 0) {
  initializeApp({ credential });
}

const db = getFirestore();
const tasksRef = db.collection('tasks');

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

// CREATE
export async function addNewTaskToDatabase(newTask: string) {
  await tasksRef.doc().create({
    title: newTask,
    status: 'IN_PROGRESS',
    createdAt: Date.now(),
  });
  return;
}

// READ
export async function getTasksFromDatabase() {
  const snapshot = await tasksRef.orderBy('createdAt', 'desc').limit(100).get();
  const tasks = await snapshot.docs.map(doc => ({
    id: doc.id,
    title: doc.data().title,
    status: doc.data().status,
    createdAt: doc.data().createdAt,
  }));
  return tasks;
}

// UPDATE
export async function updateTaskInDatabase(task: Task) {
  await tasksRef.doc(task.id).set(task);
  return;
}

// DELETE
export async function deleteTaskFromDatabase(taskId: string) {
  await tasksRef.doc(taskId).delete();
  return;
}
  1. 在 Cloud Shell Editor 中打开 page.tsx 文件：
    cloudshell edit app/page.tsx
    现在，屏幕顶部应该会显示一个现有文件。您可以在此处修改此 page.tsx 文件。显示该代码位于屏幕顶部
  2. 删除 page.tsx 文件的现有内容。
  3. 复制以下代码并将其粘贴到打开的 page.tsx 文件中：
    'use client'
import React, { useEffect, useState } from "react";
import { addNewTaskToDatabase, getTasksFromDatabase, deleteTaskFromDatabase, updateTaskInDatabase } from "./actions";

type Task = {
  id: string;
  title: string;
  status: 'IN_PROGRESS' | 'COMPLETE';
  createdAt: number;
};

export default function Home() {
  const [newTaskTitle, setNewTaskTitle] = useState('');
  const [tasks, setTasks] = useState<Task[]>([]);

  async function getTasks() {
    const updatedListOfTasks = await getTasksFromDatabase();
    setTasks(updatedListOfTasks);
  }

  useEffect(() => {
    getTasks();
  }, []);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    await addNewTaskToDatabase(newTaskTitle);
    await getTasks();
    setNewTaskTitle('');
  };

  async function updateTask(task: Task, newTaskValues: Partial<Task>) {
    await updateTaskInDatabase({ ...task, ...newTaskValues });
    await getTasks();
  }

  async function deleteTask(taskId: string) {
    await deleteTaskFromDatabase(taskId);
    await getTasks();
  }

  return (
    <main className="p-4">
      <h2 className="text-2xl font-bold mb-4">To Do List</h2>
      <div className="flex mb-4">
        <form onSubmit={handleSubmit} className="flex mb-8">
          <input
            type="text"
            placeholder="New Task Title"
            value={newTaskTitle}
            onChange={(e) => setNewTaskTitle(e.target.value)}
            className="flex-grow border border-gray-400 rounded px-3 py-2 mr-2 bg-inherit"
          />
          <button
            type="submit"
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded text-nowrap"
          >
            Add New Task
          </button>
        </form>
      </div>
      <table className="w-full">
        <tbody>
          {tasks.map(function (task) {
            const isComplete = task.status === 'COMPLETE';
            return (
              <tr key={task.id} className="border-b border-gray-200">
                <td className="py-2 px-4">
                  <input
                    type="checkbox"
                    checked={isComplete}
                    onChange={() => updateTask(task, { status: isComplete ? 'IN_PROGRESS' : 'COMPLETE' })}
                    className="transition-transform duration-300 ease-in-out transform scale-100 checked:scale-125 checked:bg-green-500"
                  />
                </td>
                <td className="py-2 px-4">
                  <span
                    className={`transition-all duration-300 ease-in-out ${isComplete ? 'line-through text-gray-400 opacity-50' : 'opacity-100'}`}
                  >
                    {task.title}
                  </span>
                </td>
                <td className="py-2 px-4">
                  <button
                    onClick={() => deleteTask(task.id)}
                    className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded float-right"
                  >
                    Delete
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </main>
  );
}

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

8. 将应用部署到 Cloud Run

  1. 运行以下命令将应用部署到 Cloud Run：
    gcloud run deploy helloworld \
  --region=us-central1 \
  --source=.
  2. 如果系统提示，请按 Y 和 Enter 确认您要继续：
    Do you want to continue (Y/n)? Y

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

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

9. 恭喜

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

  • 创建 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

不断改进