正在加载…
未找到任何结果。
访问 700 多个实验和课程

使用 Compute Engine 在 Google Cloud 託管網頁應用程式

实验 1 小时 30 分钟 universal_currency_alt 1 积分 show_chart 入门级
info 此实验可能会提供 AI 工具来支持您学习。
访问 700 多个实验和课程

GSP662

Google Cloud 自學實驗室標誌

總覽

在 Google Cloud 部署網站的方式有很多種，且特色、功能及控管能力各不相同。Compute Engine 可深入控管用於執行網站的基礎架構，但與 Google Kubernetes Engines (GKE)、App Engine 和其他解決方案相比，需要較多的營運管理。透過 Compute Engine，即可精細控管基礎架構的內容，包括虛擬機器及負載平衡器等。

在本實驗室中，您將部署範例應用程式「Fancy Store」電子商務網站，瞭解如何使用 Compute Engine 輕鬆部署網站及調度資源。

課程內容

在本實驗室中，您將瞭解如何執行下列工作：

完成本實驗室後，您就能透過代管執行個體群組中的執行個體，為網站提供自動修復、負載平衡、自動調度資源及滾動式更新等功能。

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

  • 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。
注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。
  • 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。
注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始研究室及登入 Google Cloud 控制台

  1. 點選「Start Lab」按鈕。如果實驗室會產生費用，畫面上會出現選擇付款方式的對話方塊。左側的「Lab Details」窗格會顯示下列項目：

    • 「Open Google Cloud console」按鈕
    • 剩餘時間
    • 必須在這個研究室中使用的臨時憑證
    • 完成這個實驗室所需的其他資訊 (如有)

  2. 點選「Open Google Cloud console」；如果使用 Chrome 瀏覽器，也能按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

    接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

    提示：您可以在不同的視窗中並排開啟分頁。

    注意：如果頁面中顯示「選擇帳戶」對話方塊，請點選「使用其他帳戶」。

  3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

    {{{user_0.username | "Username"}}}

    您也可以在「Lab Details」窗格找到 Username。

  4. 點選「下一步」。

  5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

    {{{user_0.password | "Password"}}}

    您也可以在「Lab Details」窗格找到 Password。

  6. 點選「下一步」。

    重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

  7. 按過後續的所有頁面：

    • 接受條款及細則。
    • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
    • 請勿申請免費試用。

Google Cloud 控制台稍後會在這個分頁開啟。

注意：如要使用 Google Cloud 產品和服務，請點選「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。「導覽選單」圖示和搜尋欄位

啟動 Cloud Shell

Cloud Shell 是搭載多項開發工具的虛擬機器，提供永久的 5 GB 主目錄，而且在 Google Cloud 中運作。Cloud Shell 提供指令列存取權，方便您使用 Google Cloud 資源。

  1. 點按 Google Cloud 控制台頂端的「啟用 Cloud Shell」圖示 「啟動 Cloud Shell」圖示。

  2. 系統顯示視窗時，請按照下列步驟操作：

    • 繼續操作 Cloud Shell 視窗。
    • 授權 Cloud Shell 使用您的憑證發出 Google Cloud API 呼叫。

連線建立完成即代表已通過驗證，而且專案已設為您的 Project_ID：。輸出內容中有一行文字，宣告本工作階段的 Project_ID：

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud 是 Google Cloud 的指令列工具，已預先安裝於 Cloud Shell，並支援 Tab 鍵自動完成功能。

  1. (選用) 您可以執行下列指令來列出使用中的帳戶：
gcloud auth list
  1. 點按「授權」。

輸出內容：

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`
  1. (選用) 您可以使用下列指令來列出專案 ID：
gcloud config list project

輸出內容：

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注意：如需 gcloud 的完整說明，請前往 Google Cloud 參閱 gcloud CLI 總覽指南。

設定區域和可用區

某些 Compute Engine 資源位於區域和可用區。「區域」是您可以執行資源的特定地理位置，每個區域中會有一或多個「可用區」。

請在 Cloud Shell 執行下列 gcloud 指令，設定實驗室的預設區域和可用區：

gcloud config set compute/zone "{{{project_0.default_zone|ZONE}}}" export ZONE=$(gcloud config get compute/zone) gcloud config set compute/region "{{{project_0.default_region|REGION}}}" export REGION=$(gcloud config get compute/region)

工作 1：啟用 Compute Engine API

gcloud services enable compute.googleapis.com

工作 2：建立 Cloud Storage bucket

您將使用 Cloud Storage bucket 來儲存建構的程式碼及開機指令碼。

  • 在 Cloud Shell 中執行下列指令，建立新的 Cloud Storage bucket：
gsutil mb gs://fancy-store-{{{project_0.project_id | Project ID}}}

點選「Check my progress」，確認目標已達成。建立 Cloud Storage bucket

工作 3：複製來源存放區

本實驗室將使用 monolith-to-microservices 存放區的現有 Fancy Store 電子商務網站，做為網站基礎。

在這項工作中，您將複製原始碼，以便專心將應用程式部署至 Compute Engine。在本實驗室後續部分，您將稍微修改程式碼，看看在 Compute Engine 更新內容有多簡單。

  1. 執行下列指令複製原始碼，並前往 monolith-to-microservices 目錄：
git clone https://github.com/googlecodelabs/monolith-to-microservices.git cd ~/monolith-to-microservices
  1. 執行程式碼的初始版本，讓應用程式可在本機執行：
./setup.sh

這項指令碼可能需要幾分鐘才能執行完畢。

  1. 完成後，以下列指令確認 Cloud Shell 執行相容的 nodeJS 版本：
nvm install --lts
  1. 接著執行下列指令，切換至 microservices 目錄，然後啟動網路伺服器：
cd microservices npm start

您應該會收到下列輸出內容：

輸出內容：

Products microservice listening on port 8082! Frontend microservice listening on port 8080! Orders microservice listening on port 8081!
  1. 點選「網頁預覽」圖示，接著選取「透過以下通訊埠預覽：8080」。

「網頁預覽」圖示和醒目顯示的「透過以下通訊埠預覽：8080」選項

系統會開啟新視窗，顯示 Fancy Store 的前端。

注意：您應該可以透過「預覽」選項查看前端，但「Products」和「Orders」功能無法使用，因為這些服務尚未公開。
  1. 看完網站後請關閉視窗，接著在終端機視窗按下 CTRL+C 鍵，停止網路伺服器程序。

在 Cloud Shell IDE 啟用 Gemini Code Assist

您可以在 Cloud Shell 等整合式開發環境 (IDE) 中使用 Gemini Code Assist，取得程式碼相關指引或解決程式碼問題。Gemini Code Assist 必須先啟用，才能開始使用。

  1. 在 Cloud Shell 執行下列指令，啟用 Gemini for Google Cloud API：
gcloud services enable cloudaicompanion.googleapis.com
  1. 點按 Cloud Shell 工具列中的「開啟編輯器」。
注意：如要開啟 Cloud Shell 編輯器，請點選 Cloud Shell 工具列中的「開啟編輯器」。如要在 Cloud Shell 與程式碼編輯器之間切換，請視需要點選「開啟編輯器」或「開啟終端機」。

  1. 在左側窗格中，點按「設定」圖示，然後在「設定」檢視畫面中搜尋「Gemini Code Assist」。

  2. 找到「Geminicodeassist: Enable」，確認已勾選核取方塊，然後關閉「設定」。

  3. 點選畫面底部狀態列中的「Cloud Code - No Project」。

  4. 依指示授權外掛程式。如果系統未自動選取專案，請點按「選取 Google Cloud 專案」，然後選擇 。

  5. 確認狀態列的 Cloud Code 狀態訊息中已顯示 Google Cloud 專案 ()。

工作 4：建立 Compute Engine 執行個體

該開始部署一些 Compute Engine 執行個體了！

在後續章節中，您將執行下列操作：

  1. 建立開機指令碼以設定執行個體。
  2. 複製原始碼並上傳至 Cloud Storage。
  3. 部署用於託管後端微服務的 Compute Engine 執行個體。
  4. 重新設定前端程式碼，以使用後端微服務執行個體。
  5. 部署用於託管前端微服務的 Compute Engine 執行個體。
  6. 設定網路來允許通訊。

建立開機指令碼

開機指令碼會在每次啟動時，指示執行個體應採取何種行動，以便自動設定執行個體。

  1. 在 Cloud Shell 終端機執行下列指令，建立 startup-script.sh 檔案：
touch ~/monolith-to-microservices/startup-script.sh
  1. 按一下 Cloud Shell 工具列的「開啟編輯器」，打開程式碼編輯器。

「開啟編輯器」按鈕

  1. 前往 monolith-to-microservices 資料夾。

  2. 將下列程式碼加入 startup-script.sh 檔案。之後請修改部分程式碼：

#!/bin/bash # Install logging monitor. The monitor will automatically pick up logs sent to # syslog. curl -s "https://storage.googleapis.com/signals-agents/logging/google-fluentd-install.sh" | bash service google-fluentd restart & # Install dependencies from apt apt-get update apt-get install -yq ca-certificates git build-essential supervisor psmisc # Install nodejs mkdir /opt/nodejs curl https://nodejs.org/dist/v16.14.0/node-v16.14.0-linux-x64.tar.gz | tar xvzf - -C /opt/nodejs --strip-components=1 ln -s /opt/nodejs/bin/node /usr/bin/node ln -s /opt/nodejs/bin/npm /usr/bin/npm # Get the application source code from the Google Cloud Storage bucket. mkdir /fancy-store gsutil -m cp -r gs://fancy-store-[DEVSHELL_PROJECT_ID]/monolith-to-microservices/microservices/* /fancy-store/ # Install app dependencies. cd /fancy-store/ npm install # Create a nodeapp user. The application will run as this user. useradd -m -d /home/nodeapp nodeapp chown -R nodeapp:nodeapp /opt/app # Configure supervisor to run the node app. cat >/etc/supervisor/conf.d/node-app.conf << EOF [program:nodeapp] directory=/fancy-store command=npm start autostart=true autorestart=true user=nodeapp environment=HOME="/home/nodeapp",USER="nodeapp",NODE_ENV="production" stdout_logfile=syslog stderr_logfile=syslog EOF supervisorctl reread supervisorctl update
  1. 如要更新 startup-script.sh 檔案，請點選「Gemini Code Assist: Smart Actions」Gemini Code Assist：智慧動作 圖示，將下列內容貼到提示詞，找出並取代 [DEVSHELL_PROJECT_ID] 的文字。
As an application developer at Cymbal AI, update the "startup-script.sh" file. Replace [DEVSHELL_PROJECT_ID] with the project ID: {{{project_0.project_id | Project ID}}}.
  1. 按下 Enter 鍵更新檔案。在「Gemini Diff」檢視畫面出現提示時，點選「接受」。

此時 startup-script.sh 中的程式碼應類似下列內容：

gs://fancy-store-{{{project_0.project_id | Project ID}}}/monolith-to-microservices/microservices/* /fancy-store/

  1. 點選「儲存」或按下 CTRL+S 鍵儲存 startup-script.sh 檔案，但先不要關閉檔案。

  2. 查看 Cloud Shell 程式碼編輯器的右下方，確認「行尾序列」已設為「LF」而非「CRLF」。

「行尾序列」

  • 如果設為 CRLF，請點選「CRLF」，然後在下拉式選單中選取「LF」。
  • 如果已設為「LF」，則不必做任何更動。

使用 Gemini Code Assist 瞭解開機指令碼檔案

為協助您提高工作效率，同時減少切換情境的次數，Gemini Code Assist 直接在程式碼編輯器中提供 AI 輔助智慧動作。舉例來說，您可以使用「Explain this」功能，讓 Gemini Code Assist 提供特定檔案、程式碼區塊或函式的詳細資訊。

在本節中，您會提示 Gemini Code Assist 提供開機指令碼的相關資訊，給不熟悉這項指令碼的新團隊成員。

  1. 開啟 startup-script.sh 檔案後，點選工具列上的「Gemini Code Assist: Smart Actions」Gemini Code Assist：智慧動作 圖示，然後選取「Explain this」。

  2. Gemini Code Assist 會開啟對話窗格，並預先填入提示詞 Explain this。在 Code Assist 對話的內嵌文字方塊中，將預先填入的提示詞改成下列內容，然後點選「Send」：

You are an Application developer at Cymbal AI. A new team member is unfamiliar with this startup script. Explain this "startup-script.sh" file in detail, breaking down its key components used in the code. Do not suggest any improvements or changes to the file.

startup-script.sh 檔案中程式碼的說明會顯示在 Gemini Code Assist 對話視窗。

  1. 關閉 startup-script.sh 檔案。

回到 Cloud Shell 終端機，然後執行下列指令，將 startup-script.sh 檔案複製到 bucket：

gsutil cp ~/monolith-to-microservices/startup-script.sh gs://fancy-store-{{{project_0.project_id | Project ID}}}

該檔案目前可透過下列網址取得：https://storage.googleapis.com/[BUCKET_NAME]/startup-script.sh。

[BUCKET_NAME] 代表 Cloud Storage bucket 的名稱。根據預設，只有取得授權的使用者和服務帳戶才可查看，且無法透過網路瀏覽器存取。Compute Engine 執行個體會自動透過服務帳戶存取這個名稱。

開機指令碼會執行下列工作：

  • 安裝 Logging 代理程式。代理程式會自動收集系統記錄檔資料。
  • 安裝 Node.js 和 Supervisor；Supervisor 會以 Daemon 形式執行應用程式。
  • 從 Cloud Storage bucket 複製應用程式的原始碼，並安裝依附元件。
  • 設定 Supervisor 執行應用程式。如果應用程式非正常結束，或由管理員或程序終止，Supervisor 會重新啟動應用程式。Supervisor 也會傳送應用程式的 stdout 和 stderr 至系統記錄檔，再由 Logging 代理程式收集這些資料。

將程式碼複製到 Cloud Storage bucket

執行個體啟動後，會從 Cloud Storage bucket 提取程式碼，因此您可以在程式碼的 .env 檔案中儲存一些設定變數。

注意：您也可以編寫程式碼，從其他位置提取環境變數。本實驗室使用這種簡單方式處理設定，只是為了方便示範。在正式環境中，環境變數比較可能儲存在程式碼以外的地方。
  • 執行下列指令，將複製的程式碼複製到 bucket：
cd ~ rm -rf monolith-to-microservices/*/node_modules gsutil -m cp -r monolith-to-microservices gs://fancy-store-{{{project_0.project_id | Project ID}}}/ 注意：為加速複製，系統會刪除 node_modules 依附元件目錄。當執行個體啟動，系統會在執行個體上重新建立這些目錄。

點選「Check my progress」，確認目標已達成。將開機指令碼和程式碼複製到 Cloud Storage bucket

部署後端執行個體

首先要部署後端執行個體，其中包含「Orders」和「Products」微服務。

注意：在正式環境中，建議將每個微服務部署到不同的執行個體和執行個體群組，讓微服務可以獨立調度資源。此處兩個後端微服務 (Orders 和 Products) 安排在相同執行個體和執行個體群組，純粹為了示範目的。
  • 執行下列指令，建立已設為使用開機指令碼的 e2-standard-2 執行個體。系統會將其標為 backend 執行個體，因此您之後可以為這個執行體體套用特定防火牆規則：
gcloud compute instances create backend \ --zone={{{project_0.default_zone | zone}}} \ --machine-type=e2-standard-2 \ --tags=backend \ --metadata=startup-script-url=https://storage.googleapis.com/fancy-store-{{{project_0.project_id | Project ID}}}/startup-script.sh

設定與後端的連線

部署應用程式前端之前，您需要先更新設定，指向您剛才部署的後端。

  1. 使用下列指令擷取後端的外部 IP 位址，在 EXTERNAL_IP 欄位下，查看後端執行個體的外部 IP：
gcloud compute instances list

輸出內容範例：

NAME: backend ZONE: {{{project_0.default_zone | zone}}} MACHINE_TYPE: e2-standard-2 PREEMPTIBLE: INTERNAL_IP: 10.142.0.2 EXTERNAL_IP: 35.237.245.193 STATUS: RUNNING

  1. 複製後端的外部 IP。

  2. 在 Cloud Shell 檔案總管中，依序前往 monolith-to-microservices > react-app。

  3. 在程式碼編輯器中，依序選取「查看」>「切換隱藏的檔案」，以便查看 .env 檔案。

在下一個步驟中，您要編輯 .env 檔案，指向後端的外部 IP。[BACKEND_ADDRESS] 代表剛才執行 gcloud 指令取得的後端執行個體外部 IP 位址。

  1. 在 .env 檔案中，將 localhost 換成您的 [BACKEND_ADDRESS]：
REACT_APP_ORDERS_URL=http://[BACKEND_ADDRESS]:8081/api/orders REACT_APP_PRODUCTS_URL=http://[BACKEND_ADDRESS]:8082/api/products

  1. 儲存檔案。

  2. 在 Cloud Shell 執行下列指令，重新建構 react-app 以更新前端程式碼：

cd ~/monolith-to-microservices/react-app npm install && npm run-script build
  1. 接著執行下列指令，將應用程式程式碼複製到 Cloud Storage bucket：
cd ~ rm -rf monolith-to-microservices/*/node_modules gsutil -m cp -r monolith-to-microservices gs://fancy-store-{{{project_0.project_id | Project ID}}}/

部署前端執行個體

程式碼設定完畢後，即可部署前端執行個體。

  • 執行下列指令，透過與先前類似的指令來部署 frontend 執行個體。基於防火牆用途，此執行個體會標記為 frontend：
gcloud compute instances create frontend \ --zone={{{project_0.default_zone | zone}}} \ --machine-type=e2-standard-2 \ --tags=frontend \ --metadata=startup-script-url=https://storage.googleapis.com/fancy-store-{{{project_0.project_id | Project ID}}}/startup-script.sh 注意：為簡化作業，前端和後端執行個體都使用相同的部署指令和開機指令碼，因為程式碼預設會啟動所有微服務。因此在本例中，所有微服務皆會在前端及後端執行。在正式環境中，您只須在每個元件上執行需要的微服務。

設定網路

  1. 執行下列指令，建立防火牆規則，允許前端存取通訊埠 8080，而允許後端存取 8081 至 8082 通訊埠。這些防火牆指令會使用為應用程式建立執行個體時所指派的標記：
gcloud compute firewall-rules create fw-fe \ --allow tcp:8080 \ --target-tags=frontend gcloud compute firewall-rules create fw-be \ --allow tcp:8081-8082 \ --target-tags=backend

現在網站應該可以完全正常運作。

  1. 為存取 frontend 的外部 IP，您需要知道 IP 位址。請執行下列指令，找出 frontend 執行個體的 EXTERNAL_IP：
gcloud compute instances list

輸出內容範例：

NAME: backend ZONE: us-central1-f MACHINE_TYPE: e2-standard-2 PREEMPTIBLE: INTERNAL_IP: 10.128.0.2 EXTERNAL_IP: 34.27.178.79 STATUS: RUNNING NAME: frontend ZONE: us-central1-f MACHINE_TYPE: e2-standard-2 PREEMPTIBLE: INTERNAL_IP: 10.128.0.3 EXTERNAL_IP: 34.172.241.242 STATUS: RUNNING

執行個體會在幾分鐘內啟動及設定完成。

  1. 請等待 3 分鐘，接著開啟新的瀏覽器分頁並前往 http://[FRONTEND_ADDRESS]:8080 以存取網站。[FRONTEND_ADDRESS] 是先前取得的前端 EXTERNAL_IP。

  2. 試著前往「Products」和「Orders」頁面，現在網頁應該會正常運作。

Fancy Store 的「Products」分頁。產品圖片以圖塊顯示。

點選「Check my progress」，確認目標已達成。部署執行個體及設定網路

工作 5：建立代管執行個體群組

為允許應用程式調度資源，需建立代管執行個體群組，其使用 frontend 和 backend 執行個體做為執行個體範本。

代管執行個體群組 (MIG) 包含相同的執行個體，可做為單一可用區中的單一實體來管理。這類群組會主動讓執行個體保持可用狀態 (即處於「執行中」狀態)，以維持應用程式的高可用性。您將為前端和後端執行個體使用代管執行個體群組，以便提供自動修復、負載平衡、自動調度資源和滾動式更新功能。

根據來源執行個體建立執行個體範本

建立代管執行個體群組前，必須先建立執行個體範本，用來做為群組的基礎。建立新 VM 執行個體時，執行個體範本可定義要使用的機型、開機磁碟映像檔或容器映像檔、網路，以及其他執行個體屬性。您可以利用執行個體範本建立代管執行個體群組中的執行個體，甚至建立個別的執行個體。

如要建立執行個體範本，請使用您先前建立的現有執行個體。

  1. 首先，執行下列指令停止兩個執行個體：
gcloud compute instances stop frontend --zone={{{project_0.default_zone | zone}}} gcloud compute instances stop backend --zone={{{project_0.default_zone | zone}}}
  1. 接著，使用下列指令，根據各個來源執行個體建立執行個體範本：
gcloud compute instance-templates create fancy-fe \ --source-instance-zone={{{project_0.default_zone | zone}}} \ --source-instance=frontend gcloud compute instance-templates create fancy-be \ --source-instance-zone={{{project_0.default_zone | zone}}} \ --source-instance=backend
  1. 執行下列指令，確認執行個體範本已建立完畢：
gcloud compute instance-templates list

輸出內容範例：

NAME: fancy-be MACHINE_TYPE: e2-standard-2 PREEMPTIBLE: CREATION_TIMESTAMP: 2023-07-25T14:52:21.933-07:00 NAME: fancy-fe MACHINE_TYPE: e2-standard-2 PREEMPTIBLE: CREATION_TIMESTAMP: 2023-07-25T14:52:15.442-07:00
  1. 建立執行個體範本後，執行下列指令來刪除 backend VM，以節省資源空間：
gcloud compute instances delete backend --zone={{{project_0.default_zone | zone}}}
  1. 在系統提示時輸入 y。

一般來說，您也可以刪除 frontend VM，但在本實驗室中，您要用它來更新執行個體範本。

建立代管執行個體群組

  1. 接著執行下列指令，建立兩個代管執行個體群組，分別用於前端和後端：
gcloud compute instance-groups managed create fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --base-instance-name fancy-fe \ --size 2 \ --template fancy-fe gcloud compute instance-groups managed create fancy-be-mig \ --zone={{{project_0.default_zone | zone}}} \ --base-instance-name fancy-be \ --size 2 \ --template fancy-be

這些代管執行個體群組會使用執行個體範本，並設定為每個群組有兩個要啟動的執行個體。這些執行個體的名稱會依據指定的 base-instance-name 自動產生，再附加隨機字元。

  1. 執行下列指令，確保應用程式的 frontend 微服務在通訊埠 8080 上執行，backend 微服務則分別使用通訊埠 8081 (orders) 和 8082 (products)：
gcloud compute instance-groups set-named-ports fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --named-ports frontend:8080 gcloud compute instance-groups set-named-ports fancy-be-mig \ --zone={{{project_0.default_zone | zone}}} \ --named-ports orders:8081,products:8082

這些是非標準通訊埠，因此請指定已命名通訊埠來識別。已命名通訊埠是以鍵/值組成的中繼資料，表示服務名稱及其執行的通訊埠。已命名通訊埠可以指派給執行個體群組，代表群組中的所有執行個體皆可提供該服務。HTTP 負載平衡服務會使用這項資訊，我們將在後續章節設定。

設定自動修復功能

如要提高應用程式可用性並驗證回應能力，您可以為代管執行個體群組設定自動修復政策。

自動修復政策會利用以應用程式為基礎的健康狀態檢查機制，確認應用程式的回應符合預期。根據預設，系統只會確認執行個體是否為「執行中」狀態，相比之下，檢查應用程式是否有回應的做法更為精確。

注意：負載平衡和自動修復會採用不同的健康狀態檢查。負載平衡的健康狀態檢查應該要更嚴格，因為這些檢查將決定執行個體能否接收使用者流量。若能快速掌握無回應的執行個體，就能在必要時重新導向流量。執行自動修復的健康狀態檢查時，Compute Engine 會主動替換故障的執行個體，因此這類檢查應比負載平衡的健康狀態檢查更為保守。
  1. 執行下列指令來建立健康狀態檢查，在 frontend 和 backend 連續三次傳回「健康狀態不良」時，自動修復該執行個體：
gcloud compute health-checks create http fancy-fe-hc \ --port 8080 \ --check-interval 30s \ --healthy-threshold 1 \ --timeout 10s \ --unhealthy-threshold 3 gcloud compute health-checks create http fancy-be-hc \ --port 8081 \ --request-path=/api/orders \ --check-interval 30s \ --healthy-threshold 1 \ --timeout 10s \ --unhealthy-threshold 3
  1. 執行下列指令，建立防火牆規則，允許健康狀態檢查探測器連線至通訊埠 8080 至 8081 上的微服務：
gcloud compute firewall-rules create allow-health-check \ --allow tcp:8080-8081 \ --source-ranges 130.211.0.0/22,35.191.0.0/16 \ --network default
  1. 執行下列指令，將健康狀態檢查套用至個別服務：
gcloud compute instance-groups managed update fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --health-check fancy-fe-hc \ --initial-delay 300 gcloud compute instance-groups managed update fancy-be-mig \ --zone={{{project_0.default_zone | zone}}} \ --health-check fancy-be-hc \ --initial-delay 300 注意：自動修復功能可能需要 15 分鐘，才會開始監控群組中的執行個體。
  1. 請先繼續完成實驗室的活動，給自動修復功能一些時間監控群組中的執行個體。您將在本實驗室最後模擬故障情形，測試自動修復功能。

點選「Check my progress」，確認目標已達成。建立代管執行個體群組

工作 6：建立負載平衡器

為配合代管執行個體群組，請使用 HTTP(S) 負載平衡器將流量導向前端和後端微服務，透過路徑規則的對應設定，將流量傳送到適當的後端服務，同時為所有服務公開單一負載平衡 IP。

如要進一步瞭解 Google Cloud 的負載平衡選項，請參閱負載平衡總覽。

建立 HTTP(S) 負載平衡器

Google Cloud 提供多種類型的負載平衡器。在本實驗室中，您將使用 HTTP(S) 負載平衡器來處理流量。HTTP 負載平衡器的結構如下：

  • 轉送規則將傳入要求導向至目標 HTTP Proxy。
  • 目標 HTTP Proxy 會根據網址對應檢查每個要求，以決定適合要求的後端服務。
  • 後端服務會根據已連接後端的服務規模、可用區和執行個體健康狀態，將每個要求導向合適的後端。系統會使用 HTTP 健康狀態檢查，驗證每個後端執行個體的健康狀態。如果將後端服務設定為使用 HTTPS 或 HTTP/2 健康狀態檢查，則要求會在傳送到後端執行個體的過程中加密。
  • 負載平衡器和執行個體之間的工作階段可以使用 HTTP、HTTPS 或 HTTP/2 通訊協定。如果您使用 HTTPS 或 HTTP/2，後端服務中的每個執行個體都必須具備 SSL 憑證。
注意：基於示範目的，為避免 SSL 憑證過於複雜，請使用 HTTP 而非 HTTPS。在正式環境中，則應盡可能使用 HTTPS 加密。
  1. 執行下列指令建立健康狀態檢查，判定哪個執行個體可為各服務提供流量：
gcloud compute http-health-checks create fancy-fe-frontend-hc \ --request-path / \ --port 8080 gcloud compute http-health-checks create fancy-be-orders-hc \ --request-path /api/orders \ --port 8081 gcloud compute http-health-checks create fancy-be-products-hc \ --request-path /api/products \ --port 8082 注意：這些健康狀態檢查僅適用於負載平衡器，只會處理負載平衡器的直接流量，不會導致代管執行個體群組重新建立執行個體。
  1. 執行下列指令，建立後端服務做為負載平衡流量的目標。後端服務會使用您建立的健康狀態檢查和已命名通訊埠：
gcloud compute backend-services create fancy-fe-frontend \ --http-health-checks fancy-fe-frontend-hc \ --port-name frontend \ --global gcloud compute backend-services create fancy-be-orders \ --http-health-checks fancy-be-orders-hc \ --port-name orders \ --global gcloud compute backend-services create fancy-be-products \ --http-health-checks fancy-be-products-hc \ --port-name products \ --global
  1. 執行下列指令，新增負載平衡器的後端服務：
gcloud compute backend-services add-backend fancy-fe-frontend \ --instance-group-zone={{{project_0.default_zone | zone}}} \ --instance-group fancy-fe-mig \ --global gcloud compute backend-services add-backend fancy-be-orders \ --instance-group-zone={{{project_0.default_zone | zone}}} \ --instance-group fancy-be-mig \ --global gcloud compute backend-services add-backend fancy-be-products \ --instance-group-zone={{{project_0.default_zone | zone}}} \ --instance-group fancy-be-mig \ --global
  1. 執行下列指令來建立網址對應，定義哪些網址應導向哪些後端服務：
gcloud compute url-maps create fancy-map \ --default-service fancy-fe-frontend
  1. 執行下列指令，建立路徑比對器，允許 /api/orders 和 /api/products 路徑轉送至各自的服務：
gcloud compute url-maps add-path-matcher fancy-map \ --default-service fancy-fe-frontend \ --path-matcher-name orders \ --path-rules "/api/orders=fancy-be-orders,/api/products=fancy-be-products"
  1. 執行下列指令，建立要與網址對應繫結的 Proxy：
gcloud compute target-http-proxies create fancy-proxy \ --url-map fancy-map
  1. 執行下列指令，建立全域轉送規則，將公開 IP 位址及通訊埠與 Proxy 繫結：
gcloud compute forwarding-rules create fancy-http-rule \ --global \ --target-http-proxy fancy-proxy \ --ports 80

點選「Check my progress」，確認目標已達成。建立 HTTP(S) 負載平衡器

更新設定

現在您有新的靜態 IP 位址，請更新 frontend 的程式碼，指向這個新位址，不要使用先前指向 backend 執行個體的臨時 IP 位址。

  1. 在 Cloud Shell 中執行下列指令，切換到儲存 .env 檔案的 react-app 資料夾，該檔案內含相關設定：
cd ~/monolith-to-microservices/react-app/
  1. 執行下列指令，找出負載平衡器的 IP 位址：
gcloud compute forwarding-rules list --global

輸出內容範例：

NAME: fancy-http-rule REGION: IP_ADDRESS: 34.111.203.235 IP_PROTOCOL: TCP TARGET: fancy-proxy
  1. 返回 Cloud Shell 編輯器，再次編輯 .env 檔案，指向負載平衡器的公開 IP。[LB_IP] 代表之前取得的後端執行個體外部 IP 位址。
REACT_APP_ORDERS_URL=http://[LB_IP]/api/orders REACT_APP_PRODUCTS_URL=http://[LB_IP]/api/products 注意：新位址會移除通訊埠，因為負載平衡器已完成設定，可以為您處理這個轉送要求。

  1. 儲存檔案。

  2. 執行下列指令，重新建構 react-app 以更新前端程式碼：

cd ~/monolith-to-microservices/react-app npm install && npm run-script build
  1. 執行下列指令，將應用程式程式碼複製到 bucket：
cd ~ rm -rf monolith-to-microservices/*/node_modules gsutil -m cp -r monolith-to-microservices gs://fancy-store-{{{project_0.project_id | Project ID}}}/

更新前端執行個體

現在有了新程式碼及設定，您要使用代管執行個體群組中的前端執行個體提取新程式碼。

  • 執行個體會在啟動時提取程式碼，因此請執行滾動式重新啟動指令：
gcloud compute instance-groups managed rolling-action replace fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --max-unavailable 100% 注意：在這個滾動式取代作業的示例中，您要透過 --max-unavailable 參數，明確指出所有機器可立即取代。如果沒有這項參數，指令會保留一個執行個體，同時重新啟動其他執行個體以確保可用性。為方便測試，請指定所有執行個體皆可立即取代，以加快處理程序。

點選「Check my progress」，確認目標已達成。更新前端執行個體

測試網站

  1. 執行 rolling-action replace 指令後請等待 3 分鐘，讓系統有時間處理執行個體，接著檢查代管執行個體群組的狀態。執行下列指令，確認服務顯示的狀態為「健康狀態良好」：
watch -n 2 gcloud compute backend-services get-health fancy-fe-frontend --global
  1. 等待 2 項服務的狀態顯示為「健康狀態良好」。

輸出內容範例：

backend: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instanceGroups/fancy-fe-mig status: healthStatus: - healthState: HEALTHY instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-x151 ipAddress: 10.128.0.7 port: 8080 - healthState: HEALTHY instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-cgrt ipAddress: 10.128.0.11 port: 8080 kind: compute#backendServiceGroupHealth 注意：如果其中一個執行個體發生問題，且狀態顯示「健康狀態不良」，系統應會自動修復，請等待執行個體修復完畢。

稍候片刻，如果沒有執行個體顯示「健康狀態良好」狀態，表示前端執行個體的設定有誤，因此無法在通訊埠　8080 上存取執行個體。請直接存取通訊埠 8080 上的執行個體來測試。
  1. 待兩個執行個體在清單中皆顯示為「健康狀態良好」後，按下 CTRL+C 鍵，結束 watch 指令。
注意：應用程式將可透過 http://[LB_IP] 存取，[LB_IP] 是系統為負載平衡器指定的 IP_ADDRESS，您可使用下列指令找出該位址：

gcloud compute forwarding-rules list --global

您之後會在本實驗室中檢查應用程式。

工作 7：調度 Compute Engine 的資源

目前您已建立兩個代管執行個體群組，且每個群組皆含有兩個執行個體。這項設定可以正常運作，但無論負載狀況如何，都不會變動。接下來，您要根據使用率建立自動調度資源政策，讓每個代管執行個體群組自動調整資源配置。

根據使用率自動調整資源配置

  • 如要建立自動調度資源政策，請執行下列指令：
gcloud compute instance-groups managed set-autoscaling \ fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --max-num-replicas 2 \ --target-load-balancing-utilization 0.60 gcloud compute instance-groups managed set-autoscaling \ fancy-be-mig \ --zone={{{project_0.default_zone | zone}}} \ --max-num-replicas 2 \ --target-load-balancing-utilization 0.60

這些指令會在代管執行個體群組建立自動配置器。這項工具會在使用率高於 60% 時，自動新增執行個體，如果負載平衡器的使用率低於 60%，則會移除執行個體。

啟用內容傳遞網路

內容傳遞網路服務也有助於資源調度，啟用後即可為前端提供快取。

  • 在前端服務執行下列指令：
gcloud compute backend-services update fancy-fe-frontend \ --enable-cdn --global

當使用者向 HTTP(S) 負載平衡器要求內容，系統會將要求傳送到 Google Front End (GFE)。GFE 首先會在 Cloud CDN 快取中尋找使用者要求的回應。如果 GFE 找到快取的回應，就會將其傳送給使用者。這種情況稱為「快取命中」。

假如 GFE 找不到要求的快取回應，會向後端直接提出要求。如果此要求的回應可快取，GFE 會將回應儲存在 Cloud CDN 快取中，以便將快取用於後續要求。

點選「Check my progress」，確認目標已達成。調度 Compute Engine 的資源

工作 8：更新網站

更新執行個體範本

現有的執行個體範本無法編輯，不過，由於您的執行個體為無狀態，且已透過開機指令碼完成所有設定，若您想要變更範本設定，只需要變更執行個體範本即可。在這項工作中，您要稍做調整，改用較大的機型，然後將這項變更推送出去。

請按照下列步驟操作，完成下列動作：

  • 更新 frontend 執行個體，做為執行個體範本的基礎。更新期間，請將檔案儲存在更新後的執行個體範本映像檔，接著更新執行個體範本、推出新的範本，然後確認該檔案位於代管執行個體群組的執行個體中。

  • 修改執行個體範本的機型，將 e2-standard-2 改為 e2-small。

  1. 執行下列指令，修改前端執行個體的機型：
gcloud compute instances set-machine-type frontend \ --zone={{{project_0.default_zone | zone}}} \ --machine-type e2-small
  1. 執行下列指令，建立新的執行個體範本：
gcloud compute instance-templates create fancy-fe-new \ --region=$REGION \ --source-instance=frontend \ --source-instance-zone={{{project_0.default_zone | zone}}}
  1. 使用下列指令，將更新後的執行個體範本推出至代管執行個體群組：
gcloud compute instance-groups managed rolling-action start-update fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --version template=fancy-fe-new
  1. 等待 3 分鐘，接著執行下列指令，監控更新內容的狀態。
watch -n 2 gcloud compute instance-groups managed list-instances fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}}

這項程序需要幾分鐘才能完成。

請先確認至少有 1 個執行個體有下列情況，再繼續操作：

  • 狀態：執行中
  • 動作：設為無
  • INSTANCE_TEMPLATE：新的範本名稱 (fancy-fe-new)

  1. 複製其中一個列出的機器名稱，下一個指令會用到。

  2. 按下 CTRL+C 鍵，退出 watch 程序。

  3. 執行下列指令，查看虛擬機器是否使用新的機型 (e2-small)，指令中的 [VM_NAME] 是新建立的執行個體：

gcloud compute instances describe [VM_NAME] --zone={{{project_0.default_zone | zone}}} | grep machineType

預期的輸出內容範例如下：

machineType: https://www.googleapis.com/compute/v1/projects/project-name/zones/us-central1-f/machineTypes/e2-small

變更網站內容

情境：您的行銷團隊要求調整網站首頁內容，加入更多公司簡介與銷售產品等資訊。

在本節中，您要在首頁加入一些文字，滿足行銷團隊的要求！看來有某位開發人員已做了變更，檔案名稱為 index.js.new。您可以直接將這個檔案複製到 index.js，網站應該就會反映新內容。請按照後續說明進行適當更動。

  1. 執行下列指令，將更新後的檔案複製為正確檔名：
cd ~/monolith-to-microservices/react-app/src/pages/Home mv index.js.new index.js
  1. 顯示檔案內容來確認變更：
cat ~/monolith-to-microservices/react-app/src/pages/Home/index.js

完成的程式碼應如下所示：

輸出內容：

/* Copyright 2019 Google LLC Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ import React from "react"; import { Box, Paper, Typography } from "@mui/material"; export default function Home() { return ( <Box sx={{ flexGrow: 1 }}> <Paper elevation={3} sx={{ width: "800px", margin: "0 auto", padding: (theme) => theme.spacing(3, 2), }} > <Typography variant="h5">Welcome to the Fancy Store!</Typography> <br /> <Typography variant="body1"> Take a look at our wide variety of products. </Typography> </Paper> </Box> ); }

您已更新 React 元件，但需要建構 React 應用程式以產生靜態檔案。

  1. 執行下列指令即可建構 React 應用程式，並將其複製到單體公開目錄：
cd ~/monolith-to-microservices/react-app npm install && npm run-script build
  1. 接著執行下列指令，將程式碼重新推送至 bucket：
cd ~ rm -rf monolith-to-microservices/*/node_modules gsutil -m cp -r monolith-to-microservices gs://fancy-store-{{{project_0.project_id | Project ID}}}/

透過滾動式取代作業推送變更

  1. 接著執行下列指令，強制更換所有執行個體，以便提取更新內容：
gcloud compute instance-groups managed rolling-action replace fancy-fe-mig \ --zone={{{project_0.default_zone | zone}}} \ --max-unavailable=100%

注意：在這個滾動式取代作業的示例中，您要透過 --max-unavailable 參數，明確指出所有機器可立即取代。如果沒有這項參數，指令會保留一個執行個體，並取代其他所有執行個體。為方便測試，您要指出所有執行個體皆可立即取代，以加快處理程序。在正式環境中，預留緩衝時間可讓網站在更新時繼續提供服務。

點選「Check my progress」，確認目標已達成。更新網站

  1. 執行 rolling-action replace 指令後請等待 3 分鐘，讓系統有時間處理執行個體，接著檢查代管執行個體群組的狀態。執行下列指令，確認服務顯示的狀態為「健康狀態良好」：
watch -n 2 gcloud compute backend-services get-health fancy-fe-frontend --global
  1. 稍候片刻，等待系統顯示兩項服務，且服務狀態為「健康狀態良好」。

輸出內容範例：

backend: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instanceGroups/fancy-fe-mig status: healthStatus: - healthState: HEALTHY instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-x151 ipAddress: 10.128.0.7 port: 8080 - healthState: HEALTHY instance: https://www.googleapis.com/compute/v1/projects/my-gce-codelab/zones/us-central1-a/instances/fancy-fe-cgrt ipAddress: 10.128.0.11 port: 8080 kind: compute#backendServiceGroupHealth

  1. 若項目顯示在清單中，且狀態為「健康狀態良好」，請按下 CTRL+C 鍵，離開 watch 指令。

  2. 透過 http://[LB_IP] 瀏覽網站，[LB_IP] 是系統為負載平衡器指定的 IP_ADDRESS，您可使用下列指令找出該位址：

gcloud compute forwarding-rules list --global

現在您應該可以看到網站變更後的內容。

模擬故障情形

為確認健康狀態檢查正常運作，您決定登入執行個體並停止服務。

  1. 如要找出執行個體名稱，請執行下列指令：
gcloud compute instance-groups list-instances fancy-fe-mig --zone={{{project_0.default_zone | zone}}}
  1. 複製執行個體名稱，接著執行下列指令，透過安全殼層連線至執行個體，INSTANCE_NAME 代表清單中一個執行個體：
gcloud compute ssh [INSTANCE_NAME] --zone={{{project_0.default_zone | zone}}}

  1. 輸入「y」來確認操作，然後按下 Enter 鍵兩次避免使用密碼。

  2. 在執行個體中執行下列指令，使用 supervisorctl 停止應用程式：

sudo supervisorctl stop nodeapp; sudo killall node
  1. 執行下列指令，退出執行個體：
exit
  1. 監控修復作業：
watch -n 2 gcloud compute operations list \ --filter='operationType~compute.instances.repair.*'

這個程序需要幾分鐘才能完成。

以下示範輸出內容。

輸出內容：

NAME: repair-1755080598062-63c3c8b99843b-eed8dabc-f1833ea3 TYPE: compute.instances.repair.recreateInstance TARGET: us-east4-c/instances/fancy-fe-tn40 HTTP_STATUS: 200 STATUS: DONE TIMESTAMP: 2025-08-13T03:23:18.062-07:00

代管執行個體群組已重新建立並修復執行個體。

  1. 您也可以透過控制台監控執行個體，方法是依序點選「導覽選單」>「Compute Engine」>「VM 執行個體」。

恭喜！

您已成功在 Compute Engine 部署、調度資源及更新網站。現在您已具備使用 Compute Engine、代管執行個體群組、負載平衡器和健康狀態檢查的經驗！

後續步驟/瞭解詳情

Google Cloud 教育訓練與認證

協助您瞭解如何充分運用 Google Cloud 的技術。我們的課程會介紹專業技能和最佳做法，讓您可以快速掌握要領並持續進修。我們提供從基本到進階等級的訓練課程，並有隨選、線上和虛擬課程等選項，方便您抽空參加。認證可協助您驗證及證明自己在 Google Cloud 技術方面的技能和專業知識。

使用手冊上次更新日期：2025 年 8 月 25 日

實驗室上次測試日期：2025 年 8 月 25 日

Copyright 2025 Google LLC 保留所有權利。Google 和 Google 標誌是 Google LLC 的商標，其他公司和產品名稱則有可能是其關聯公司的商標。

准备工作

  1. 实验会创建一个 Google Cloud 项目和一些资源，供您使用限定的一段时间
  2. 实验有时间限制，并且没有暂停功能。如果您中途结束实验，则必须重新开始。
  3. 在屏幕左上角，点击开始实验即可开始

使用无痕浏览模式

  1. 复制系统为实验提供的用户名和密码
  2. 在无痕浏览模式下，点击打开控制台

登录控制台

  1. 使用您的实验凭证登录。使用其他凭证可能会导致错误或产生费用。
  2. 接受条款，并跳过恢复资源页面
  3. 除非您已完成此实验或想要重新开始，否则请勿点击结束实验，因为点击后系统会清除您的工作并移除该项目

此内容目前不可用

一旦可用，我们会通过电子邮件告知您

太好了！

一旦可用，我们会通过电子邮件告知您

一次一个实验

确认结束所有现有实验并开始此实验

使用无痕浏览模式运行实验

请使用无痕模式或无痕式浏览器窗口运行此实验。这可以避免您的个人账号与学生账号之间发生冲突，这种冲突可能导致您的个人账号产生额外费用。