如何将所有 JavaScript 框架部署到 Cloud Run

1. 简介

概览

在此 Codelab 中，请将 8 个 JavaScript 应用部署到 Cloud Run：

  • Angular SSR - 基于 Angular
  • Nuxt.js - 基于 Vue.js
  • Next.js - 基于 React
  • Remix - 基于 React
  • SvelteKit - 基于 Svelte
  • SolidStart - 基于 Solid.js
  • Astro
  • Qwik

Angular 应用屏幕截图Nuxt.js 应用屏幕截图Next.js 应用屏幕截图Remix 应用屏幕截图SvelteKit 应用屏幕截图SolidStart 应用屏幕截图Astro 应用屏幕截图Qwik 应用屏幕截图

学习内容

  • 如何部署 Cloud Build 自动支持的 JavaScript 框架
  • 如何部署需要配置的 JavaScript 框架

前提条件

2. 激活 Cloud Shell

  1. 导航到 Cloud Shell 终端：https://shell.cloud.google.com/?show=terminal如果这是您第一次启动 Cloud Shell，系统会显示一个中间屏幕，说明它是什么。如果您看到中间屏幕，请点击继续。预配和连接到 Cloud Shell 应该只需要片刻时间。
  2. 在 Cloud Shell 中运行以下命令以设置 gcloud 项目：
    gcloud config set project <PROJECT_ID>
    将 &lt;PROJECT_ID&gt; 替换为您的项目 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)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建使用服务器端渲染 (SSR) 的 Angular 应用
    npx @angular/cli new angular-app --ssr
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd angular-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://angular-app-xxxxxxxxxx-uc.a.run.app

Angular 应用屏幕截图

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

可选清理

  1. 在本地删除 Angular 项目
    cd ..
rm -rf angular-app
  2. 删除 Angular Cloud Run 服务
    gcloud run services delete angular-app
    当系统提示您是否要继续时，按 Enter 键以继续。

7. Nuxt.js (Vue.js)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 Nuxt.js 应用
    npx nuxi init nuxt-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd nuxt-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

Nuxt.js 应用屏幕截图

可选清理

  1. 在本地删除 Nuxt.js 项目
    cd ..
rm -rf nuxt-app
  2. 删除 Nuxt.js Cloud Run 服务
    gcloud run services delete nuxt-app
    当系统提示您是否要继续时，按 Enter 键以继续。

8. Next.js (React)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 Next.js 应用
    npx create-next-app next-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd next-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://next-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

Next.js 应用屏幕截图

可选清理

  1. 在本地删除 Next.js 项目
    cd ..
rm -rf next-app
  2. 删除 Next.js Cloud Run 服务
    gcloud run services delete next-app
    当系统提示您是否要继续时，按 Enter 键以继续。

9. 混剪 (React)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 Remix 应用
    npx create-remix remix-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd remix-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://remix-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

Remix 应用屏幕截图

可选清理

  1. 在本地删除 Remix 项目
    cd ..
rm -rf remix-app
  2. 删除 Remix Cloud Run 服务
    gcloud run services delete remix-app
    当系统提示您是否要继续时，按 Enter 键以继续。

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)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 SvelteKit 应用
    npx create-svelte svelte-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd svelte-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://svelte-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

SvelteKit 应用屏幕截图

可选清理

  1. 在本地删除 SvelteKit 项目
    cd ..
rm -rf svelte-app
  2. 删除 SvelteKit Cloud Run 服务
    gcloud run services delete svelte-app
    当系统提示您是否要继续时，按 Enter 键以继续。

12. SolidStart (Solid)

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 SolidStart 应用
    npx create-solid solid-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd solid-app
  4. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://solid-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

SolidStart 应用屏幕截图

可选清理

  1. 在本地删除 SolidStart 项目
    cd ..
rm -rf solid-app
  2. 删除 SolidStart Cloud Run 服务
    gcloud run services delete solid-app
    当系统提示您是否要继续时，按 Enter 键以继续。

13. Astro

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 Astro 应用
    npx create-astro astro-app
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd astro-app
  4. 添加适用于 Node.js 的 Astro 适配器
    npx astro add node
  5. 更新 package.json 中的 start 脚本
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://astro-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

Astro 应用屏幕截图

可选清理

  1. 在本地删除 Astro 项目
    cd ..
rm -rf astro-app
  2. 删除 Astro Cloud Run 服务
    gcloud run services delete astro-app
    当系统提示您是否要继续时，按 Enter 键以继续。

14. Qwik

  1. 导航到要在其中创建 Angular 应用的目录
    cd ~
  2. 创建 Qwik 应用
    npx create-qwik
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。
  3. 进入您创建的新项目文件夹
    cd qwik-app
  4. 添加适用于 Cloud Run 的 Qwik 适配器
    npm run qwik add cloud-run
  5. 部署应用
    gcloud run deploy --allow-unauthenticated
    当系统提示您输入偏好设置时，请按 Enter 键接受默认设置。

访问您的应用

部署需要几分钟时间。完成后，Cloud Run 将返回如下网址：

https://qwik-app-xxxxxxxxxx-uc.a.run.app

在新的浏览器标签页中打开提供的网址，查看已部署的应用。

Qwik 应用屏幕截图

可选清理

  1. 在本地删除 Qwik 项目
    cd ..
rm -rf qwik-app
  2. 删除 Qwik Cloud Run 服务
    gcloud run services delete qwik-app
    当系统提示您是否要继续时，按 Enter 键以继续。

15. 恭喜！

恭喜您完成此 Codelab！

建议您查看有关快速入门：从 Git 代码库部署到 Cloud Run 的文档，以便您将来的 build 可以在每次推送到版本控制时自动部署。

我们的学习内容

  • 如何部署 Cloud Build 自动支持的 JavaScript 框架
    • Angular SSR - 基于 Angular
    • Nuxt.js - 基于 Vue.js
    • Next.js - 基于 React
    • Remix - 基于 React
    • SvelteKit - 基于 Svelte
    • SolidStart - 基于 Solid.js
  • 如何部署需要配置的 JavaScript 框架
    • Astro
    • Qwik

16. 清理

为避免产生意外费用（例如，如果此 Cloud Run 服务的调用次数超出免费层级中的每月 Cloud Run 调用次数），您可以删除 Cloud Run 作业或删除您在第 1 步中创建的项目。

如需删除 Cloud Run 服务，请前往 https://console.cloud.google.com/run/ 前往 Cloud Run Cloud 控制台，然后删除 Cloud Run 服务。

如果您选择删除整个项目，可以前往 https://console.cloud.google.com/cloud-resource-manager，选择您在第 2 步中创建的项目，然后选择“删除”。如果删除项目，则需要在 Cloud SDK 中更改项目。您可以通过运行 gcloud projects list 来查看所有可用项目的列表。