透過 Cloud Run 部署網站

1. 事前準備

執行網站並非易事，例如建立及管理虛擬機器 (VM) 執行個體、叢集、Pod 和服務等。這種做法適用於大型的多層級應用程式，但如果您只嘗試部署讓網站供使用者瀏覽，就會造成巨大負擔。

有了 Knative 的 Google Cloud 產品 Cloud Run，您就能管理及部署網站，而且無須針對 VM 或 Kubernetes 進行部署。從管理層面來看，這個做法不僅較為簡單，還能讓您在網站沒有收到要求時，將資源調度率降至零。

Cloud Run 不僅能為容器提供無伺服器開發作業，也能在您自己的 Google Kubernetes Engine (GKE) 叢集或 Cloud Run 提供的全代管平台式服務 (PaaS) 解決方案中執行。在本程式碼研究室中，您將測試第二種情境。

下圖說明部署和 Cloud Run 託管的流程。首先從 Cloud Build 建立的 Docker 映像檔開始，您可以在 Cloud Shell 中觸發這個映像檔。接著，請在 Cloud Shell 中使用指令，將該映像檔部署至 Cloud Run。

db5f05c090d5ebcb.png

必要條件

課程內容

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

建構項目

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

軟硬體需求

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

2. 環境設定

自修環境設定

如果您還沒有 Google 帳戶，請先建立帳戶。接著登入 Google Cloud 控制台，按一下「專案」>建立專案。

53dad2cefdae71da.png

faab21976aabeb4c.png

記住專案 ID，系統會自動填入專案名稱下方這個 ID。專案 ID 在所有 Google Cloud 專案中都是不重複的名稱，因此已有其他人使用螢幕截圖中的專案 ID。這個 ID 之後會稱為 PROJECT_ID。

接下來，您需要在 Cloud 控制台中啟用計費功能，才能使用 Google Cloud 資源並啟用 Cloud Run API。

啟用 Cloud Run API

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

5dbb2e6e27a55fcf.png

搜尋「Cloud Run API」然後按一下「Cloud Run API」>啟用：

f1fd486174a744cf.png

執行本程式碼研究室所需的費用不應超過數美元，但如果您決定使用更多資源，或讓資源繼續運作，費用會增加 (請參閱結尾的「清除」一節)。詳情請參閱「定價」一文。

Google Cloud 的新使用者符合免費試用$300 美元的資格。

Cloud Shell

雖然 Google Cloud 和 Cloud Run 可以在筆記型電腦上遠端運作，不過您仍須使用 Cloud Shell，這是一種在 Google Cloud 中運作的指令列環境。這個環境預先設定了您需要的所有用戶端程式庫和架構。

這種以 Debian 為基礎的虛擬機器，搭載各種您需要的開發工具。提供永久的 5 GB 主目錄，而且在 Google Cloud 中運作，大幅提高網路效能和驗證能力。換言之，本程式碼研究室只需要在 Chromebook 上運作即可。

  1. 如要透過 Cloud 控制台啟用 Cloud Shell，只要點選「啟用 Cloud Shell」 圖示 fEbHefbRynwXpq1vj2wJw6Dr17O0np8l-WOekxAZYlZQIORsWQE_xJl-cNhogjATLn-YxLVz8CgLvIW1Ncc0yXKJsfzJGMYgUeLsVB7zSwz7p6ItNgx4tXqQjag7BfWPcZN5kP-X3Q 即可 (整個佈建作業只需幾分鐘的時間，操作完畢即可)。

I5aEsuNurCxHoDFjZRZrKBdarPPKPoKuExYpdagmdaOLKe7eig3DAKJitIKyuOpuwmrMAyZhp5AXpmD_k66cBuc1aUnWlJeSfo_aTKPY9aNMurhfegg1CYaE11jdpSTYNNIYARe01A

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

連線至 Cloud Shell 後，您應會發現自己通過驗證，且專案已設為 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>
  1. 最後，進行預設可用區和專案設定。
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!

如要預覽應用程式，請按一下「網頁預覽」圖示 acc630712255c604.png，然後選取「透過以下通訊埠預覽：8080」。

5869738f0e9ec386.png

這樣會開啟新視窗，讓您查看花俏商店的實際運作情形！

9ed25c3f0cbe62fa.png

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

4. 使用 Cloud Build 建立 Docker 容器

來源檔案已準備就緒，接著要進行應用程式 Docker 化處理！

一般來說，您必須採取雙步驟，也就是建構 Docker 容器並推送至登錄檔，儲存映像檔供 GKE 提取。不過，您可以使用 Cloud Build 建構 Docker 容器，並使用單一指令將映像檔置於 Container Registry 中，讓生活更便利！如要查看建立並推送 Dockerfile 的手動程序，請參閱 Container Registry 快速入門導覽課程。

Cloud Build 會壓縮目錄中的檔案，並將檔案移至 Cloud Storage 值區。接著，建構程序會採用值區中的所有檔案，並使用 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」>記錄：在這裡，您可以查看先前所有版本的清單，但只能選擇您建立的版本。

4c753ede203255f6.png

點選「Build id」，即可查看該版本的所有詳細資料，包括記錄輸出。點選「映像檔」旁的連結，即可查看建立的容器映像檔。

6e88ed1643dfe629.png

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

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

d52d9419c5166674.png

基於測試目的，請允許未經驗證的應用程式要求。在提示訊息中輸入 y。

3a57b32f133dad61.png

驗證部署

如要確認部署作業已成功建立，請執行下列指令。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) 模型與函式即服務 (FaaS) 模型之間是很大的落差，該模型會一次處理一個要求。

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

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

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

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

7d1eed2e4728a4f2.png

按一下「Revisions」(修訂版本) 分頁標籤。畫面上應該會顯示兩個修訂版本。按一下「monolith-00002」monolith-00002並查看詳細資料。您應該會看到並行值已降為 1。

217185c0eccc87dd.png]

4ad481b8bcd0343d.png

雖然該設定已足以進行測試，但在多數實際工作環境中，您都有容器可支援多個並行要求。

現在，您可以還原原始並行，不必重新部署。您可以將並行值設為 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

驗證部署

執行下列指令，驗證部署作業更新：

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

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

451ca252acae6928.png

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 部署、擴充及更新網站。

瞭解詳情