GSP747

總覽

在本研究室中，您將建立管道來部署網站，運用 Hugo 這項靜態網站製作工具。您會將網站內容儲存至 Cloud Source Repositories，並透過 Firebase 部署網站，接著使用 Cloud Build 建立管道，自動部署提交至存放區的新內容。

目標

本研究室的學習內容包括：

• 概略瞭解靜態網站
• 使用 Hugo 架設網站
• 將網站內容儲存至 Cloud Source Repositories
• 使用 Firebase 部署網站
• 使用 Cloud Build 建立建構管道，將部署作業自動化

先備知識

本文的操作說明能引導您完成這個研究室。在實際運用相關服務時，也能參考這些說明。以下是其他實用的研究室：

• Cloud Source Repositories：Qwik Start
• 使用 Cloud Run 建構可建立 PDF 檔案的無伺服器應用程式
• Firebase 網頁版

靜態網站的優點

Hugo 等靜態網站建構工具不需要網路伺服器即可產生網站，因而受到歡迎。靜態網站平台沒有伺服器作業系統或軟體，不需要花心思維護，但使用時有多個作業考量。例如，您可能會想管理公告版本、在內容傳遞網路 (CDN) 上託管網站，以及佈建 SSL 憑證。

您可以使用 Google Cloud 的持續整合/持續部署管道來滿足上述需求。管道建立完成後，就能將整個部署程序自動化，讓開發人員迅速實現創新。在本研究室中，您將學習如何建構管道來實現這類自動化作業。

設定和需求

點選「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 產品和服務的選單，請點選左上角的「導覽選單」。

流程總覽

以下是您會建構的項目：

您的目標是修訂程式碼，讓程式碼觸發管道來部署網站。整個過程分為兩個部分：首先，您會在本機手動建構網站並部署至 Firebase，藉此瞭解整個程序。第二，您會使用 Cloud Build 建構管道，將程序自動化。

工作 1：手動部署

首先在 Linux 執行個體手動建構網站，學習端對端程序。您也會運用 Linux 執行個體，執行一些單次任務來啟動 Firebase。

連至 Linux 執行個體

1. 依序選取「導覽選單」>「Compute Engine」>「VM 執行個體」，您會看到一個已建立完成的執行個體。
2. 如下圖所示，該執行個體的最後一欄會顯示外部 IP 位址和「SSH」按鈕。如果資訊面板擋到內容，可以關閉面板。

3. 請記住外部 IP 位址，稍後會用到。
4. 點選「SSH」，畫面會顯示殼層提示視窗。

在本機安裝 Hugo

現在要將 Hugo 安裝至 Linux 執行個體，以在本機測試網站，接著透過 Firebase 部署網站。為了方便操作，系統提供殼層指令碼。

1. 在 Linux 執行個體殼層，查看 installhugo.sh 檔案。

cat /tmp/installhugo.sh

系統也會顯示下列內容：

輸出內容：

#!/bin/bash # Copyright 2020 Google Inc. All rights reserved. # # 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 # # http://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. _HUGO_VERSION=0.96.0 echo Downloading Hugo version $_HUGO_VERSION... wget \ --quiet \ -O hugo.tar.gz \ https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz echo Extracting Hugo files into /tmp... mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz echo The Hugo binary is now at /tmp/hugo.

2. 請留意下列部分：使用 wget 指令下載 Hugo，以及使用 tar 指令解開 Hugo 封存檔。稍後在本研究室建立管道時，您會看到類似的指令。

3. 輸入下列指令來執行指令碼並安裝 Hugo：

cd ~ /tmp/installhugo.sh

系統會顯示下列訊息，表示 Hugo 已安裝至 /tmp 目錄。現在可以開始建立網站基礎架構。

建立存放區與初始網站

現在要建立存放網站的 Cloud 原始碼存放區，接著將存放區複製到 Linux 執行個體。複製存放區會在殼層建立該存放區的鏡像，這樣就能在殼層導入網站，然後將變更提交至檔案系統。稍後您會在本研究室設定管道，回應存放區的修訂內容。

1. 在 Linux VM 安裝 Git。

在 Linux 執行個體殼層，輸入下列指令：

sudo apt-get update sudo apt-get install git

如果系統顯示提示，請一律回答 Yes。

2. 建立及複製程式碼存放區。在 Linux 執行個體殼層，輸入下列指令：

cd ~ gcloud source repos create my_hugo_site gcloud source repos clone my_hugo_site

系統會顯示下列訊息，確認已建立並複製存放區。您可以忽略「存放區會產生費用」和「存放區是空的」這兩則警告訊息。

點選「Check my progress」，確認目標已達成。 已建立原始碼存放區

3. 現在可以開始建立網站架構。在 Linux 殼層輸入下列指令：

cd ~ /tmp/hugo new site my_hugo_site --force

正常情況下，hugo 指令會建立目錄，--force 選項會在現有的存放區目錄中建立網站，讓您將剛才複製的 Git 相關資訊保存在目錄中。系統會顯示下列訊息，表示已建立網站。

4. 現在要安裝 Ananke 主題，設定網站的版面配置。在 Linux 執行個體殼層，輸入下列指令：

cd ~/my_hugo_site git clone \ https://github.com/budparr/gohugo-theme-ananke.git \ themes/ananke echo 'theme = "ananke"' >> config.toml

系統會顯示下列訊息，表示已複製主題。

5. 將 Git 檔案從主題目錄中移除：

sudo rm -r themes/ananke/.git sudo rm themes/ananke/.gitignore 注意：移除 Git 檔案後，Cloud 原始碼存放區才會管理主題版本。

6. 建立完網站架構後，就能預覽網站。輸入下列指令，在 TCP 通訊埠 8080 開啟網站：

cd ~/my_hugo_site /tmp/hugo server -D --bind 0.0.0.0 --port 8080

如下圖所示，Hugo 會建構並提供網站，讓使用者在 TCP 通訊埠 8080 存取網站。伺服器會持續執行，直到您按下 CTRL + C 來停止作業。

7. 開啟瀏覽器分頁，前往通訊埠 8080 的外部 IP 位址。使用下列網址，將 [EXTERNAL IP] 換成執行個體的外部 IP 位址：

http://[EXTERNAL IP]:8080

網站應如下所示：

點選「Check my progress」，確認目標已達成。 可在通訊埠 8080 存取網站

8. 返回 Linux 殼層，按下 CTRL + C 來停止 Hugo 伺服器。

將 Firebase 新增至專案

在實際看過網站畫面後，接著要將網站部署至 Firebase。首先在現有專案中啟用 Firebase。

1. 在目前的瀏覽器開啟新分頁，前往 Google Cloud 控制台並開啟 Firebase，即可前往 Firebase 控制台。

2. 接著點選「新增專案」。

您需要為專案選擇名稱。

3. 如下圖所示，點選名稱欄位，選取開頭為「qwiklabs-gcp-...」的現有 Google Cloud 專案：

4. 勾選「我接受《Firebase 條款》」和「本人確認僅將 Firebase 用於與本人的交易、商業、專業技術或專業領域相關的用途」，接著點選「繼續」。
5. 您可能需要確認 Firebase 計費方案。本研究室已包含 Firebase 費用。如果系統顯示提示，請點選「確認方案」。
6. 將 Firebase 新增至專案時，您需要確認部分條件，接著點選「繼續」。
7. 您需要為這個 Firebase 專案確認是否使用 Google Analytics。此為研究室環境，因此請將 Google Analytics 切換為停用，接著點選「新增 Firebase」。將 Firebase 新增至專案約需一分鐘。
8. 如果系統在新增 Firebase 後顯示提示，請點選「繼續」。

將網站部署至 Firebase

1. 在 Linux 執行個體殼層，安裝 Firebase CLI：

curl -sL https://firebase.tools | bash

2. 現在需要將 Firebase 初始化。在殼層輸入下列指令：

cd ~/my_hugo_site firebase init

3. 使用方向鍵和空白鍵選取「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」，接著按下 Enter 鍵。系統詢問專案選項時，請選取「Use an existing project」，接著使用方向鍵、空白鍵和 Enter 鍵選取研究室說明頁面的專案 ID。在公開目錄部分，選取預設值「public」。在設為單頁應用程式形式部分，選取預設值「N」。在透過 GitHub 設定自動建構及部署部分，選取「N」。

如果系統詢問是否覆寫任何現有檔案，選取「Y」。

4. 現在可以開始部署應用程式。在 Linux 執行個體殼層輸入下列指令，使用 Hugo 重新建構網站並透過 Firebase 部署網站：

/tmp/hugo && firebase deploy

5. 應用程式部署完成後，就會收到託管網址。點選網址即會顯示相同網站，不過該網站是由 Firebase CDN (內容傳遞網路) 提供。如果收到一般的「welcome」訊息，請等待幾分鐘讓 CDN 初始化，並重新整理瀏覽器視窗。請儲存這個託管網址，稍後會用到。

現在您已在本機完成所有部署作業，接著要使用 Cloud Build 將整個程序自動化。

工作 2：將部署作業自動化

進行初始修訂

建構管道的目標，是能在變更存放區時觸發建構作業。第一步是對存放區進行初始修訂，確認日後能變更存放區。

1. 在 Linux 殼層輸入下列指令，設定 Git 指令全域參數。請務必加入引號：

git config --global user.name "hugo" git config --global user.email "hugo@blogger.com"

2. 在 Linux 殼層輸入下列指令，建立 .gitignore 檔案，以從存放區排除特定目錄：

cd ~/my_hugo_site echo "resources" >> .gitignore

3. 輸入下列指令，對存放區進行初始修訂：

git add . git commit -m "Add app to Cloud Source Repositories" git push -u origin master

現在已將網站的初始版本提交 (上傳) 至 Google Cloud。

設定建構

Cloud Build 使用存放區根目錄中名為 cloudbuild.yaml 的檔案來執行建構，檔案格式為 YAML。空格與縮排相當重要，因此系統已在 Linux 執行個體設定好格式。

1. 在 Linux 殼層輸入下列指令，請留意 cp 指令結尾的句號 (.)：

cd ~/my_hugo_site cp /tmp/cloudbuild.yaml .

2. 執行下列指令來查看 cloudbuild.yaml 檔案。程式碼行數較多，因此系統會包裝部分程式碼。

cat cloudbuild.yaml

輸出內容：

# Copyright 2020 Google Inc. All rights reserved. # # 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 # # http://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. steps: - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' # 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. steps: - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/wget' args: - '--quiet' - '-O' - 'hugo.tar.gz' - 'https://github.com/gohugoio/hugo/releases/download/v${_HUGO_VERSION}/hugo_extended_${_HUGO_VERSION}_Linux-64bit.tar.gz' waitFor: ['-'] - name: 'ubuntu:18.04' args: - 'bash' - '-c' - | mv hugo.tar.gz /tmp tar -C /tmp -xzf /tmp/hugo.tar.gz mv firebase /tmp chmod 755 /tmp/firebase /tmp/hugo /tmp/firebase deploy --project ${PROJECT_ID} --non-interactive --only hosting -m "Build ${BUILD_ID}" substitutions: _HUGO_VERSION: 0.96.0

3. 以下是對 cloudbuild.yaml 檔案的觀察：

• 這個檔案有三個已命名步驟，每個步驟都由容器映像檔執行。前兩個步驟採用 Google 支援的建構工具，使用 wget 下載 Hugo 和 Firebase 工具。這兩個步驟會同時執行。使用 wget 建構工具比手動安裝 wget 快。
• 第三個步驟會使用標準 Ubuntu 容器安裝 Hugo 和 Firebase，接著建構並部署網站。為每項部署作業安裝 Hugo 和 Firebase，就能隨時變更 Hugo 版本，並使用最新版 Firebase。
• tar 和 wget 指令與先前 installhugo.sh 指令碼中的指令雷同。
• 這個檔案也使用自訂替代變數 (_HUGO_VERSION) 和 Google 提供的替代變數 (PROJECT_ID)，讓這個範本在不同環境都能使用。
• Hugo 和 Firebase 二進位檔皆建立並安裝於臨時目錄，以防意外部署至網站本身。

建立 Cloud Build 觸發條件

現在要建立觸發條件，回應存放區 master 分支版本的修訂內容。

1. 在指令列輸入下列指令：

gcloud alpha builds triggers import --source=/tmp/trigger.yaml

2. 觸發條件的設定包含下列詳細資料：

欄位	值
名稱	commit-to-master-branch
說明	Push to master
事件	推送至分支版本
存放區	my_hugo_site
分支版本 (規則運算式)	^master$ (請務必取消勾選「反轉規則運算式」)
版本設定	Cloud Build 設定檔 (YAML 或 JSON)
Cloud Build 設定檔位置	/ cloudbuild.yaml

Cloud Build 服務帳戶

Cloud Build 服務帳戶必須具備權限，才能使用 Firebase 部署網站。

Cloud Build	角色	說明
[PROJECT_NUMBER@cloudbuild.gserviceaccount.com	roles/firebasehosting.admin	具備託管資源的完整讀取/寫入權限

測試管道

現在已建立管道，可以修訂並提交程式碼，查看變更內容是否套用至網站。

1. 在 Linux 殼層輸入下列指令，前往存放區目錄：

cd ~/my_hugo_site

2. 編輯 config.toml 檔案並更改標題：

Blogging with Hugo and Cloud Build

3. 在 Linux 殼層輸入下列指令，將變更提交至存放區，並觸發 Cloud Build 管道：

git add . git commit -m "I updated the site title" git push -u origin master

4. 查看建構作業記錄，瞭解建構狀態：

gcloud builds list

5. 查看目前建構作業的記錄檔：

gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD))

6. 取得已執行建構作業的網址：

gcloud builds log $(gcloud builds list --format='value(ID)' --filter=$(git rev-parse HEAD)) | grep "Hosting URL"

7. 前往託管網址即可查看結果。 您也能前往 Firebase 控制台，在專案中尋找網域名稱。

注意： CDN 會在幾分鐘內完成更新，並顯示更新後的網站資訊。 注意：網站具備 SSL 憑證，並透過 https 通訊協定 (超文本傳輸安全通訊協定) 提供存取。

點選「Check my progress」，確認目標已達成。 已成功啟用 Cloud Build

恭喜！

您已學到 Cloud Build 如何自動化調度管理管道，快速將 Hugo 網站部署至 Firebase (提供 CDN 與 SSL 憑證)。Cloud Build 可讓您視需求調整程序。部署所需時間減少後，您就能迅速創新並輕鬆測試網站修訂版本。詳情請參閱 Cloud Build 和 Firebase 說明文件。

Google Cloud 教育訓練與認證

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

使用手冊上次更新日期：2024 年 1 月 30 日

研究室上次測驗日期：2023 年 12 月 11 日

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