如何將所有 JavaScript 架構部署至 Cloud Run

1. 簡介

總覽

在本程式碼研究室中，您會將八個 JavaScript 應用程式部署至 Cloud Run：

  • Angular SSR - 以 Angular 為基礎
  • Nuxt.js - 以 Vue.js 為基礎
  • Next.js - 以 React 為基礎
  • Remix - based on React
  • SvelteKit - 以 Svelte 為基礎
  • SolidStart - 以 Solid.js 為基礎
  • 天文攝影
  • Qwik

Angular 應用程式螢幕截圖Nuxt.js 應用程式螢幕截圖Next.js 應用程式螢幕截圖重混應用程式螢幕截圖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>
    將 <PROJECT_ID> 替換為您的專案 ID。範例：
    gcloud config set project js-frameworks
    如果系統提示您授權，請點選「授權」。

3. 啟用 API

開始進行本程式碼研究室之前，請先啟用數個 API。本程式碼研究室需要使用下列 API。執行下列指令即可啟用這些 API：

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

接著，您可以設定本程式碼研究室全程都會用到的環境變數。

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. Remix (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

在新瀏覽器分頁中開啟提供的網址，即可查看已部署的應用程式。

重混應用程式螢幕截圖

選用清除作業

  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. 恭喜！

恭喜您完成本程式碼研究室！

建議您參閱「快速入門：從 Git 存放區部署至 Cloud Run」一文，瞭解如何設定，讓日後每次將程式碼推送至版本控管系統時，建構作業都能自動部署。

涵蓋內容

  • 如何部署 Cloud Build 自動支援的 JavaScript 架構
    • Angular SSR - 以 Angular 為基礎
    • Nuxt.js - 以 Vue.js 為基礎
    • Next.js - 以 React 為基礎
    • Remix - based on React
    • SvelteKit - 以 Svelte 為基礎
    • SolidStart - 以 Solid.js 為基礎
  • 如何部署需要設定的 JavaScript 架構
    • 天文攝影
    • Qwik

16. 清除所用資源

為避免產生意外費用 (例如，如果這個 Cloud Run 服務的叫用次數意外超過免費層級的每月 Cloud Run 叫用配額)，您可以刪除 Cloud Run 工作，或刪除您在步驟 1 中建立的專案。

如要刪除 Cloud Run 服務，請前往 https://console.cloud.google.com/run/ 的 Cloud Run Cloud Console，然後刪除 Cloud Run 服務。

如要刪除整個專案，請前往 https://console.cloud.google.com/cloud-resource-manager，選取您在步驟 2 中建立的專案，然後選擇「刪除」。刪除專案後，您必須在 Cloud SDK 中變更專案。如要查看所有可用專案的清單，請執行 gcloud projects list。