1. 简介
概览
在本 Codelab 中，您将把八个 JavaScript 应用部署到 Cloud Run：
- Angular SSR - 基于 Angular
- Nuxt.js - 基于 Vue.js
- Next.js - 基于 React
- Remix - 基于 React
- SvelteKit - 基于 Svelte
- SolidStart - 基于 Solid.js
- 天文
- Qwik
学习内容
- 如何自动部署 Cloud Build 支持的 JavaScript 框架
- 如何部署需要配置的 JavaScript 框架
前提条件
- 您已登录 Cloud Shell 终端。
- 您拥有一个启用了结算功能的 Google Cloud 项目，并且有权部署到 Cloud Run
- 如果您之前部署过 Cloud Run 服务，则可以确认这一点。例如，您可以按照从源代码部署 Node.js Web 服务快速入门中的步骤开始操作。
2. 激活 Cloud Shell
- 前往 Cloud Shell 终端：https://shell.cloud.google.com/?show=terminal。如果您是第一次启动 Cloud Shell，系统会显示一个介绍其功能的过渡页面。如果您看到了过渡页面，请点击继续。预配和连接到 Cloud Shell 只需花几分钟时间。
- 在 Cloud Shell 中运行以下命令，以设置您的
gcloud项目：gcloud config set project <PROJECT_ID>
gcloud config set project js-frameworks
3. 启用 API
在开始使用此 Codelab 之前，您需要启用多个 API。此 Codelab 需要使用以下 API。您可以运行以下命令来启用这些 API：
gcloud services enable \
cloudbuild.googleapis.com \
artifactregistry.googleapis.com \
run.googleapis.com
然后，您可以设置将在本 Codelab 中全程使用的环境变量。
4. 配置默认区域
您可以为每个部署单独设置区域。此命令会将默认地区设置为 us-central1，这样您就不必为每个命令都设置地区。
gcloud config set run/region us-central1
5. 配置 Git
某些库默认情况下会使用 git 进行版本控制。如果您已在自己的机器上配置 git（例如，您是在本地运行此实验），则无需执行这些步骤。
git config --global user.email "you@example.com" git config --global user.name "Your Name" git config --global init.defaultBranch main
6. Angular SSR (Angular)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建使用服务器端渲染 (SSR) 的 Angular 应用
npx @angular/cli new angular-app --ssr
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd angular-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://angular-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Angular 项目
cd .. rm -rf angular-app - 删除 Angular Cloud Run 服务
gcloud run services delete angular-appEnter键继续。
7. Nuxt.js (Vue.js)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 Nuxt.js 应用
npx nuxi init nuxt-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd nuxt-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://nuxt-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Nuxt.js 项目
cd .. rm -rf nuxt-app - 删除 Nuxt.js Cloud Run 服务
gcloud run services delete nuxt-appEnter键继续。
8. Next.js (React)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 Next.js 应用
npx create-next-app next-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd next-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://next-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Next.js 项目
cd .. rm -rf next-app - 删除 Next.js Cloud Run 服务
gcloud run services delete next-appEnter键继续。
9. Remix (React)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 Remix 应用
npx create-remix remix-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd remix-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://remix-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Remix 项目
cd .. rm -rf remix-app - 删除 Remix Cloud Run 服务
gcloud run services delete remix-appEnter键继续。
10. Cloud Shell 清理
如果您未使用 Cloud Shell 或仅部署单个应用，则此步骤为可选步骤
Cloud Shell 提供了一个永久性的 5 GB 主目录，并且在 Google Cloud 中运行。
如需使用 Cloud Shell 部署所有八个框架，您需要为剩余的应用腾出空间。
移除 Cloud Shell 中的项目不会删除您已部署的 Cloud Run 服务。
如需清除您已创建的应用，请运行以下命令：
cd ~ rm -rf angular-app/ rm -rf nuxt-app/ rm -rf next-app/ rm -rf remix-app/
11. SvelteKit (Svelte)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 SvelteKit 应用
npx create-svelte svelte-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd svelte-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://svelte-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 SvelteKit 项目
cd .. rm -rf svelte-app - 删除 SvelteKit Cloud Run 服务
gcloud run services delete svelte-appEnter键继续。
12. SolidStart (Solid)
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 SolidStart 应用
npx create-solid solid-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd solid-app
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://solid-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 SolidStart 项目
cd .. rm -rf solid-app - 删除 SolidStart Cloud Run 服务
gcloud run services delete solid-appEnter键继续。
13. Astro
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 Astro 应用
npx create-astro astro-app
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd astro-app
- 添加适用于 Node.js 的 Astro 适配器
npx astro add node
- 更新了
package.json中的start脚本npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://astro-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Astro 项目
cd .. rm -rf astro-app - 删除 Astro Cloud Run 服务
gcloud run services delete astro-appEnter键继续。
14. Qwik
- 前往您要创建 Angular 应用的目录
cd ~
- 创建 Qwik 应用
npx create-qwik
Enter键接受默认设置。 - 进入您创建的新项目文件夹
cd qwik-app
- 为 Cloud Run 添加 Qwik 适配器
npm run qwik add cloud-run
- 部署应用
gcloud run deploy --allow-unauthenticated
Enter键接受默认设置。
访问您的应用
部署需要几分钟时间。完成后，Cloud Run 将返回一个网址，例如：
https://qwik-app-xxxxxxxxxx-uc.a.run.app
在新浏览器标签页中打开提供的网址，以查看已部署的应用。
可选的清理
- 在本地删除 Qwik 项目
cd .. rm -rf qwik-app - 删除 Qwik Cloud Run 服务
gcloud run services delete qwik-appEnter键继续。
15. 恭喜！
恭喜您完成此 Codelab！
我们建议您查看快速入门：从 Git 代码库部署到 Cloud Run 这篇文档，以便您日后每次将代码推送到版本控制系统时，都能自动部署构建。
我们的学习内容
- 如何自动部署 Cloud Build 支持的 JavaScript 框架
- Angular SSR - 基于 Angular
- Nuxt.js - 基于 Vue.js
- Next.js - 基于 React
- Remix - 基于 React
- SvelteKit - 基于 Svelte
- SolidStart - 基于 Solid.js
- 如何部署需要配置的 JavaScript 框架
- 天文
- Qwik
16. 清理
为避免意外产生费用（例如，如果此 Cloud Run 服务被意外调用的次数超过了免费层级中每月 Cloud Run 调用次数的分配额度），您可以删除 Cloud Run 作业，也可以删除您在第 1 步中创建的项目。
如需删除 Cloud Run 服务，请前往 Cloud Run Cloud 控制台 (https://console.cloud.google.com/run/)，然后删除 Cloud Run 服务。
如果您选择删除整个项目，可以前往 https://console.cloud.google.com/cloud-resource-manager，选择您在第 2 步中创建的项目，然后选择“删除”。如果您删除项目，则需要在 Cloud SDK 中更改项目。您可以运行 gcloud projects list 查看所有可用项目的列表。