使用 Node.js Admin SDK 将全栈 Next.js 应用部署到 Cloud Run with Firestore
关于此 Codelab
subject上次更新时间：4月 1, 2025
2. 前提条件
- 如果您还没有 Google 账号，则必须先创建一个 Google 账号。
- 请使用个人账号，而不是工作账号或学校账号。工作账号和学校账号可能会受到限制，导致您无法启用本实验所需的 API。
3. 项目设置
- 登录 Google Cloud 控制台。
- 在 Cloud 控制台中启用结算功能。
- 完成本实验所需的 Cloud 资源费用应低于 1 美元。
- 您可以按照本实验最后的步骤删除资源，以免产生更多费用。
- 新用户符合参与 300 美元免费试用计划的条件。
- 创建新项目或选择重复使用现有项目。
4. 打开 Cloud Shell Editor
- 前往 Cloud Shell Editor
- 如果终端未显示在屏幕底部，请打开它：
- 点击汉堡式菜单
- 点击终端
- 点击 New Terminal
- 点击汉堡式菜单
- 在终端中，使用以下命令设置项目：
- 格式：
gcloud config set project [PROJECT_ID] - 示例：
gcloud config set project lab-project-id-example - 如果您不记得项目 ID，请执行以下操作：
- 您可以使用以下命令列出所有项目 ID：
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- 您可以使用以下命令列出所有项目 ID：
- 格式：
- 如果系统提示您进行授权，请点击授权继续。
- 您应会看到以下消息：
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
如果系统提示您进行授权，请点击授权继续。
此命令可能需要几分钟才能完成，但最终应该会显示类似以下内容的成功消息：
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. 创建 Firestore 数据库
- 运行
gcloud firestore databases create命令以创建 Firestore 数据库gcloud firestore databases create --location=nam5
7. 准备申请
准备一个响应 HTTP 请求的 Next.js 应用。
- 要创建名为
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 - 转到
task-app目录：cd task-app
- 安装
firebase-admin以与 Firestore 数据库进行交互。npm install firebase-admin
- 在 Cloud Shell Editor 中打开
actions.ts文件：cloudshell edit app/actions.tsactions.ts文件。
- 复制以下代码并将其粘贴到打开的
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;
}
- 在 Cloud Shell Editor 中打开
page.tsx文件：cloudshell edit app/page.tsxpage.tsx文件。 - 删除
page.tsx文件的现有内容。 - 复制以下代码并将其粘贴到打开的
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
- 运行以下命令将应用部署到 Cloud Run：
gcloud run deploy helloworld \
--region=us-central1 \
--source=. - 如果系统提示，请按
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 磁盘中删除不必要的资源。您可以：
- 删除 Codelab 项目目录：
rm -rf ~/task-app - 警告！下一步操作无法撤消！如果您想删除 Cloud Shell 中的所有内容以释放空间，可以删除整个主目录。请务必将您要保留的所有内容保存到其他位置。
sudo rm -rf $HOME