透過 Cloud Run 部署網站

1. 事前準備

經營網站需要建立及管理虛擬機器 (VM) 執行個體、叢集、Pod、服務等，作業可能頗具難度。大型多層式應用程式可以採用這樣的做法，但如果只是想部署網站並讓使用者看到，將會造成龐大的負擔。

Cloud Run 是 Google Cloud 實作的 Knative，可讓您管理及部署網站，不必擔心 VM 或 Kubernetes 部署項目會造成負擔。從管理層面來看，這個做法不僅較為簡單，還能讓您在網站沒有收到要求時，將資源調度率降至零。

在本程式碼研究室中，您會先從透過 Cloud Build 建立的 Docker 映像檔開始 (在 Cloud Shell 中觸發)，然後在 Cloud Shell 中使用指令，將該映像檔部署至 Cloud Run。

必要條件

對 Docker 有基本瞭解 (請參閱 Docker 網站的「開始使用」部分)。

課程內容

如何使用 Cloud Build 建構 Docker 映像檔，並上傳至 gcr.io
如何將 Docker 映像檔部署至 Cloud Run
如何管理 Cloud Run 部署作業
如何為 Cloud Run 上的應用程式設定端點

建構項目

在 Docker 容器中執行的靜態網站
這個容器的版本，位於 Container Registry 中
靜態網站的 Cloud Run 部署作業

軟硬體需求

具備管理員存取權的 Google 帳戶，可建立專案，或具備專案擁有者角色的專案

2. 環境設定

自修實驗室環境設定

如果沒有 Google 帳戶，請先建立帳戶。接著，登入 Google Cloud 控制台，然後依序點選「專案」 >「建立專案」。

記下專案 ID，系統會在專案名稱下方自動填入這組 ID。專案 ID 在所有 Google Cloud 專案中都是不重複的名稱，因此螢幕截圖中的名稱已遭占用，無法使用。稍後會稱為 PROJECT_ID。

接著，您需要在 Cloud 控制台中啟用帳單，才能使用 Google Cloud 資源並啟用 Cloud Run API。

啟用 Cloud Run API

依序點選「導覽選單」圖示 ☰ >「API 和服務」>「資訊主頁」>「啟用 API 和服務」。。

搜尋「Cloud Run API」，然後依序點按「Cloud Run API」>「啟用」。

完成這項程式碼研究室的費用不應超過數美元，但如果您決定使用更多資源，或是將資源繼續執行 (請參閱結尾的「清理」)，則可能會增加費用。詳情請參閱「定價」。

Google Cloud 新使用者享有價值 $300 美元的免費試用期。

Cloud Shell

雖然可以透過筆電遠端操作 Google Cloud 和 Cloud Run，但您會使用 Cloud Shell，這是 Google Cloud 中執行的指令列環境。環境已預先設定所有必要的用戶端程式庫和架構。

這部以 Debian 為基礎的虛擬機器，搭載各種您需要的開發工具，並提供永久的 5GB 主目錄，而且可在 Google Cloud 運作，大幅提升網路效能並強化驗證功能。也就是說，您只需要瀏覽器 (Chromebook 也可以) 就能完成本程式碼研究室。

如要從 Cloud 控制台啟用 Cloud Shell，只要按一下「啟用 Cloud Shell」即可 (佈建並連線至環境的作業需要一些時間才能完成)。

I5aEsuNurCxHoDFjZRZrKBdarPPKPoKuExYpdagmdaOLKe7eig3DAKJitIKyuOpuwmrMAyZhp5AXpmD_k66cBuc1aUnWlJeSfo_aTKPY9aNMurhfegg1CYaE11jdpSTYNNIYARe01A

Screen Shot 2017-06-14 at 10.13.43 PM.png

連至 Cloud Shell 後，您應該會看到驗證已完成，專案也已設為獲派的專案 ID PROJECT_ID。

gcloud auth list

指令輸出

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)

gcloud config list project

指令輸出

[core]
project = <PROJECT_ID>

如果專案未設定，請發出下列指令：

gcloud config set project <PROJECT_ID>

在尋找「PROJECT_ID」嗎？請檢查您在設定步驟中使用的 ID，或在 Cloud 控制台資訊主頁中尋找：

R7chO4PKQfLC3bvFBNZJALLTUiCgyLEq_67ECX7ohs_0ZnSjC7GxDNxWrJJUaoM53LnqABYamrBJhCuXF-J9XBzuUgaz7VvaxNrkP2TAn93Drxccyj2-5zz4AxL-G3hzxZ4PsM5HHQ

Cloud Shell 也會預設設定部分環境變數，這些變數在您執行後續指令時可能很有用。

echo $GOOGLE_CLOUD_PROJECT

指令輸出

<PROJECT_ID>

最後，設定預設可用區和專案。

gcloud config set compute/zone us-central1-f

你可以選擇各種不同區域。詳情請參閱「地區和區域」。

3. 複製來源存放區

由於您要部署現有網站，因此只需從存放區複製來源，即可專心建立 Docker 映像檔並部署至 Cloud Run。

執行下列指令，將存放區複製到 Cloud Shell 執行個體，並切換至適當的目錄。您也需要安裝 Node.js 依附元件，以便在部署前測試應用程式。

cd ~
git clone https://github.com/googlecodelabs/monolith-to-microservices.git
cd ~/monolith-to-microservices
./setup.sh

這會複製存放區、變更目錄，並安裝在本機執行應用程式所需的依附元件。指令碼可能需要幾分鐘才能執行完畢。

請進行盡職調查並測試應用程式。執行下列指令啟動網路伺服器：

cd ~/monolith-to-microservices/monolith
npm start

輸出內容：

Monolith listening on port 8080!

點選「Web Preview」(網頁預覽) ，然後選取「Preview on port 8080」(透過以下通訊埠預覽：8080)，即可預覽應用程式。

系統會開啟新視窗，顯示 Fancy Store 的實際運作情形！

查看網站後，即可關閉這個視窗。如要停止網路伺服器程序，請在終端機視窗中按下 CONTROL+C 鍵 (Macintosh 上的 Command+C 鍵)。

4. 使用 Cloud Build 建立 Docker 容器

準備好原始碼檔案後，就可以開始將應用程式 Docker 化了！

一般來說，您必須採取兩個步驟：建構 Docker 容器，然後將容器推送至存放區，以便儲存映像檔供 GKE 提取。不過，只要一個指令，Cloud Build 就能建構 Docker 容器，並將映像檔放入 Container Registry，讓您輕鬆完成這項工作！如要查看手動建立 Dockerfile 並推送的程序，請參閱 Container Registry 快速入門導覽課程。

Cloud Build 會壓縮目錄中的檔案，並移至 Cloud Storage bucket。接著，建構程序會從 bucket 擷取所有檔案，並使用同個目錄中的 Dockerfile 執行 Docker 建構程序。您在 Docker 映像檔中指定了 --tag 旗標，並將主機設為 gcr.io，產生的 Docker 映像檔會推送至 Container Registry。

首先，請確認已啟用 Cloud Build API。執行下列指令即可啟用：

gcloud services enable cloudbuild.googleapis.com

啟用 API 後，請在 Cloud Shell 執行下列指令來啟動建構程序：

gcloud builds submit --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 .

這個程序需要幾分鐘，完成後終端機中會顯示類似以下的輸出內容：

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ID                                    CREATE_TIME                DURATION  SOURCE                                                                                  IMAGES                              STATUS
1ae295d9-63cb-482c-959b-bc52e9644d53  2019-08-29T01:56:35+00:00  33S       gs://<PROJECT_ID>_cloudbuild/source/1567043793.94-abfd382011724422bf49af1558b894aa.tgz  gcr.io/<PROJECT_ID>/monolith:1.0.0  SUCCESS

如要查看建構記錄或即時監看程序，請前往 Cloud 控制台，然後依序點選「導覽選單」圖示 ☰ >「Cloud Build」 >「記錄」。您會看到先前建立的所有版本，但應該只有您建立的版本。

點選「建構 ID」，即可查看該建構作業的所有詳細資料，包括記錄輸出內容。點選「映像檔」旁的連結，即可查看建立的容器映像檔。

5. 將容器部署至 Cloud Run

您已將網站容器化，並推送至 Container Registry，現在該部署至 Cloud Run 了！

部署至 Cloud Run 的方法有兩種：

Cloud Run (全代管) 是 PaaS 模型，可管理整個容器生命週期。您將在本程式碼研究室中使用這種做法。
Cloud Run for Anthos 是 Cloud Run 加上額外的控制層，可讓您從 GKE 攜帶自己的叢集和 Pod。詳情請參閱「在 Google Cloud 中設定 Cloud Run for Anthos」。

指令列範例會使用您先前設定的環境變數，在 Cloud Shell 中執行。

指令列

執行下列指令來部署您的應用程式：

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed

系統會要求您指定要放送廣告的區域。選取離您最近的區域，然後接受預設建議的服務名稱 (單體)。

為進行測試，請允許未經驗證的要求傳送至應用程式。在提示中輸入 y。

驗證部署

執行下列指令，確認部署項目已順利建立。Pod status可能需要幾分鐘才會變成 Running：

gcloud run services list

選取「[1] Cloud Run (全代管)」。

輸出內容：

SERVICE   REGION    URL  LAST DEPLOYED BY          LAST DEPLOYED AT
✔  monolith  us-east1 <your url>  <your email>  2019-09-16T21:07:38.267Z

輸出內容會顯示幾項資訊：您會看到部署項目、部署者 (您的電子郵件地址) 和可用來存取應用程式的網址。看來一切都順利建立完成！

在網路瀏覽器中開啟服務清單中提供的網址，您應該會看到與本機預覽相同的網站。

6. 建立並行處理量較低的修訂版本

現在請再次部署應用程式，但這次要調整其中一個參數。

根據預設，Cloud Run 應用程式的並行值為 80，也就是每個容器執行個體一次最多可處理 80 個要求。這與函式即服務 (FaaS) 模型大相逕庭，後者是單一執行個體一次處理一個要求。

以並行值 1 重新部署相同的容器映像檔 (僅供測試)，並查看會發生什麼情況。

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed --concurrency 1

請按照第一次的方式回答後續問題。指令執行成功後，請前往 Cloud 控制台查看結果。

在 Cloud Run 資訊主頁中，按一下「monolith」服務即可查看詳細資料。

按一下「Revisions」(修訂版本) 分頁標籤。您應該會看到兩個修訂版本。點選「monolith-00002」monolith-00002，查看詳細資料。您會看到並行值已降至 1。

]

雖然這個設定檔足以進行測試，但在大多數正式環境中，您會使用可支援多個並行要求的容器。

現在，請還原原始並行設定，不必重新部署。您可以將並行值設為預設的 80 或 0，這樣就會移除所有並行限制，並設為預設上限 (撰寫本文時剛好是 80)。

在 Cloud Shell 中執行下列指令，更新目前的修訂版本：

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed --concurrency 80

請注意，系統已建立另一個修訂版本，流量也已重新導向，而且並行值回到 80。

7. 變更網站內容

行銷團隊要求您變更公司網站的首頁。希望包含更多公司簡介與銷售產品等資訊。在本節中，您要在首頁加入一些文字，滿足行銷團隊的要求！

看來有某位開發人員已做了變更，檔案名稱為 index.js.new。您只要將該檔案複製到 index.js，網站應該就會反映新內容。按照操作說明進行適當更動。

執行下列指令，將更新後的檔案複製為正確檔名，並顯示檔案內容來確認變更：

cd ~/monolith-to-microservices/react-app/src/pages/Home
mv index.js.new index.js
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 { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    width: "800px",
    margin: "0 auto",
    padding: theme.spacing(3, 2)
  }
}));
export default function Home() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Typography variant="h5">
          Fancy Fashion &amp; Style Online
        </Typography>
        <br />
        <Typography variant="body1">
          Tired of mainstream fashion ideas, popular trends and societal norms?
          This line of lifestyle products will help you catch up with the Fancy trend and express your personal style.
          Start shopping Fancy items now!
        </Typography>
      </Paper>
    </div>
  );
}

您已更新 React 元件，但還得建構 React 應用程式，才能產生靜態檔案。執行下列指令即可建構 React 應用程式，並將其複製到單體公開目錄：

cd ~/monolith-to-microservices/react-app
npm run build:monolith

程式碼更新完畢後，您需要重建 Docker 容器，並發布至 Container Registry。您可以使用與先前相同的指令，但這次要更新版本標籤！

執行下列指令，使用更新後的映像檔版本 2.0.0 觸發新的 Cloud Build：

cd ~/monolith-to-microservices/monolith

#Feel free to test your application
npm start

gcloud builds submit --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 .

在下一節中，您將使用該映像檔在不停機的情況下更新應用程式。

8. 更新網站，完全不必停機

變更完成，行銷團隊對您更新的內容非常滿意！現在是更新網站的好時機，而且不會影響使用者體驗。

Cloud Run 會將每次部署視為新的修訂版本，並先將該版本上線，再將流量重新導向至該版本。

請按照下一組操作說明更新網站。

指令列

您可以在指令列中執行下列指令，重新部署服務，將映像檔更新為新版本：

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 --platform managed

驗證部署

執行下列指令，驗證 Deployment 更新：

gcloud run services describe monolith --platform managed

輸出如下所示：

apiVersion: serving.knative.dev/v1alpha1
kind: Service
metadata:
  annotations:
    client.knative.dev/user-image: gcr.io/my-cloudrun-codelab/monolith:2.0.0
...

您會看到服務現在使用最新版本的映像檔，並部署在新的修訂版本中。

如要確認變更，請再次前往 Cloud Run 服務的外部網址，並注意應用程式標題已更新。

執行下列指令，列出服務並查看 IP 位址 (如果您忘記的話)：

gcloud run services list

現在，您的網站應該會顯示您新增至首頁元件的文字！

9. 清理

刪除 Container Registry 映像檔

# Delete the container image for version 1.0.0 of our monolith
gcloud container images delete gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --quiet

# Delete the container image for version 2.0.0 of our monolith
gcloud container images delete gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 --quiet

從 Cloud Storage 刪除 Cloud Build 構件

# The following command will take all source archives from all builds and delete them from cloud storage

# Run this command to print all sources:
# gcloud builds list | awk 'NR > 1 {print $4}' 

gcloud builds list | awk 'NR > 1 {print $4}' | while read line; do gsutil rm $line; done

刪除 Cloud Run 服務

gcloud run services delete monolith --platform managed

10. 恭喜

您已透過 Cloud Run 部署、調度資源及更新網站。

透過 Cloud Run 部署網站

1. 事前準備

必要條件

課程內容

建構項目

軟硬體需求

2. 環境設定

自修實驗室環境設定

啟用 Cloud Run API

Cloud Shell

指令輸出

指令輸出

指令輸出

3. 複製來源存放區

4. 使用 Cloud Build 建立 Docker 容器

5. 將容器部署至 Cloud Run

指令列

驗證部署

6. 建立並行處理量較低的修訂版本

7. 變更網站內容

8. 更新網站，完全不必停機

指令列

驗證部署

9. 清理

刪除 Container Registry 映像檔

從 Cloud Storage 刪除 Cloud Build 構件

刪除 Cloud Run 服務

10. 恭喜

瞭解詳情