1. 簡介
總覽
在本程式碼研究室中，將八個 JavaScript 應用程式部署至 Cloud Run：
- Angular SSR (以 Angular 為基礎)
- Nuxt.js - 以 Vue.js 為基礎
- Next.js：以 React 為基礎
- 重混作品 - 根據 React
- SvelteKit - 根據 Svelte 精心挑選
- SolidStart - 以 Solid.js 為基礎
- 天文攝影
- Qwik
課程內容
- 如何部署 Cloud Build 自動支援的 JavaScript 架構
- 如何部署需要設定的 JavaScript 架構
必要條件
- 您登入 Cloud Shell 終端機。
- 您的 Google Cloud 專案已啟用計費功能，且有權部署至 Cloud Run。
- 如果您之前已部署 Cloud Run 服務，可以確認這一點。舉例來說，您可以按照從原始碼部署 Node.js 網路服務的快速入門導覽課程，瞭解如何開始使用。
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
開始使用本程式碼研究室之前，您必須先啟用多個 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. 角度 SSR (角度)
- 前往要建立 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. 重混 (重混)
- 前往要建立 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
在新的瀏覽器分頁中開啟提供的網址，以查看部署的應用程式。
選用清除功能
- 在本機刪除重混專案
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 (絲絨)
- 前往要建立 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 (固體)
- 前往要建立 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. 恭喜！
恭喜您完成本程式碼研究室！
建議您參閱快速入門導覽課程：從 Git 存放區部署至 Cloud Run 說明文件，這樣日後建構作業每次推送至版本管控時，建構作業都能自動進行部署。
課程內容
- 如何部署 Cloud Build 自動支援的 JavaScript 架構
- Angular SSR (以 Angular 為基礎)
- Nuxt.js - 以 Vue.js 為基礎
- Next.js：以 React 為基礎
- 重混作品 - 根據 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 來查看可用專案的清單。