GSP747

總覽

本實驗室將帶您建立 pipeline，部署以 Hugo 靜態網站製作工具架設的網站。方法是在 GitHub 存放區儲存網站內容，透過 Firebase 部署網站，接著使用 Cloud Build 建立 pipeline，自動部署提交至存放區的新內容。

目標

本實驗室將帶您執行下列工作：

• 概略瞭解靜態網站
• 使用 Hugo 架設網站
• 在 GitHub 存放區儲存網站內容
• 透過 Firebase 部署網站
• 使用 Cloud Build 建立建構 pipeline，自動部署新內容

事前準備

本實驗室會用到個人 GitHub 帳戶。如有需要，請前往 GitHub.com 註冊。

您可以先透過實作課程熟悉接下來會用到的服務，以便順利上手。以下實驗室或許會有幫助：

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

靜態網站的優點

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

您可以使用 Google Cloud 的持續整合/持續部署管道來滿足上述需求。建立部署 pipeline 後，就能自動執行整個部署程序，讓開發人員加速創新。在本實驗室，您將瞭解如何建構 pipeline 來打造這類自動化程序。

設定和需求

瞭解以下事項後，再點選「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 產品和服務，請點選「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

流程總覽

以下是您將建構的項目：

目標是提交程式碼來觸發 pipeline，執行網站部署程序。過程分為兩部分：首先，請在本機建構網站，並手動部署至 Firebase。接著，透過 Cloud Build 建立 pipleline，以便自動執行程序。

工作 1：手動部署

請先在 Linux 執行個體手動建構網站，熟悉端對端程序。然後用 Linux 執行個體來執行一些單次工作，以便啟動及執行 Firebase。

連結 Linux 執行個體

1. 依序選取「導覽選單」圖示 >「Compute Engine」>「VM 執行個體」，請注意，執行個體已預先建立完成。

如下圖所示，執行個體列的最右邊會顯示外部 IP 位址和「SSH」按鈕。如果資訊面板擋到內容，可以關閉面板。

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

安裝 Hugo

現在要於 Linux 執行個體安裝 Hugo，以便在本機測試網站，再透過 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.

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

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

cd ~ /tmp/installhugo.sh

執行完成後，畫面會顯示下列訊息，指出 Hugo 已安裝至 /tmp 目錄。

現在可以開始建立網站基礎架構。

建立存放區和初始網站

建立用於儲存網站的 GitHub 存放區，然後將存放區複製到 Linux 執行個體。

複製存放區會在殼層建立該存放區的副本，方便您透過殼層導入網站，並將修訂版本提交至檔案系統。您稍後會在本實驗室設定 pipeline，用於回應這些提交至存放區的修訂版本。

1. 在 Linux VM 安裝 git 和 GitHub CLI，設定專案 ID、專案編號和區域，並分別儲存為 PROJECT_ID、PROJECT_NUMBER 和 REGION 變數。

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

export PROJECT_ID=$(gcloud config get-value project) export PROJECT_NUMBER=$(gcloud projects describe $PROJECT_ID --format="value(projectNumber)") export REGION=$(gcloud compute project-info describe \ --format="value(commonInstanceMetadata.items[google-compute-default-region])") sudo apt-get update sudo apt-get install git sudo apt-get install gh

如果畫面出現提示，請一律回答 Yes。

2. 執行下列指令，設定 Git 和 GitHub：

curl -sS https://webi.sh/gh | sh gh auth login gh api user -q ".login" GITHUB_USERNAME=$(gh api user -q ".login") git config --global user.name "${GITHUB_USERNAME}" git config --global user.email "${USER_EMAIL}" echo ${GITHUB_USERNAME} echo ${USER_EMAIL}

3. 輸入下列指令，建立及複製程式碼存放區：

cd ~ gh repo create my_hugo_site --private gh repo clone my_hugo_site

輸出內容會顯示下列訊息，確認存放區已建立並複製完成，如下圖所示。請忽略「存放區會產生費用」和「存放區是空的」這兩種警告訊息。

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

現在可以開始建立網站架構。

4. 在 Linux 殼層輸入下列指令：

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

正常情況下，hugo 指令會建立目錄，--force 選項會在現有的存放區目錄建立網站，讓您儲存剛才複製的 Git 相關資訊。

完成後，畫面會顯示訊息，指出網站已建立完成。

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

cd ~/my_hugo_site git clone \ https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng echo 'theme = "hello-friend-ng"' >> config.toml

完成後，畫面會顯示訊息，指出主題已複製完成。

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

sudo rm -r themes/hello-friend-ng/.git sudo rm themes/hello-friend-ng/.gitignore 注意：必須先移除 Git 檔案，GitHub 存放區才會將主題檔案新增至版本管控選項。

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」，確認目標已達成。 在 TCP 通訊埠 8080 開啟網站

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

將網站部署至 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 (內容傳遞網路) 提供的相同網站。

如果顯示一般歡迎訊息，請等待幾分鐘讓 CDN 初始化，再重新整理瀏覽器視窗。請記下這個託管網址，稍後會用到。

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

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

進行初始修訂

建構 pipeline，就能在存放區變動時觸發建構作業。首先，請將最初修訂版本提交至存放區，確認以後能順利操作。

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 GitHub Repository" 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/curl' 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/curl' args: - '--quiet' - '-O' - 'firebase' - 'https://firebase.tools/bin/linux/latest' - name: 'gcr.io/cloud-builders/curl' 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:20.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 options: defaultLogsBucketBehavior: REGIONAL_USER_OWNED_BUCKET

3. 您會發現 cloudbuild.yaml 檔案的情況如下：

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

連線至 GitHub 存放區並建立 Cloud Build 存放區

1. 在 Linux 執行個體，發起與 GitHub 存放區的連線。

gcloud builds connections create github cloud-build-connection --project=$PROJECT_ID --region=$REGION gcloud builds connections describe cloud-build-connection --region=$REGION

2. 找出 actionUri：

   etag: yKV297keFBHzs1UcgMsbYJlEYvYdIkfFLJMYZfOADu8 githubConfig: {} installationState: actionUri: https://accounts.google.com/AccountChooser?continue=https%3A%2F%2Fconsole.cloud.google.com%2Fm%2Fgcb%2Fgithub%2Flocations%2Fus-east4%2Foauth_v2%3Fconnection_name%3Dprojects%252F921646058273%252Flocations%252Fus-east4%252Fconnections%252Fcloud-build-connection message: Please log in to https://github.com using a robot account and then follow this link to authorize Cloud Build to access that account. After authorization, your GitHub authorization token will be stored in Cloud Secret Manager. stage: PENDING_USER_OAUTH name: projects/qwiklabs-gcp-00-40e7d6bb49bb/locations/us-east4/connections/cloud-build-connection reconciling: false updateTime: '2024-12-12T08:52:48.505263316Z'

3. 在新的瀏覽器分頁開啟 actionUri。

4. 點選「Continue」。

在您的帳戶或組織中安裝 Cloud Build GitHub App。使用 GitHub 帳戶允許安裝。

4. 選取「Repository access」下方的「Only select repositories」。點選「Select repositories」，然後選取所需的存放區 。

5. 點選「Save」。

6. 建立 Cloud Build 存放區：

gcloud builds repositories create {{{project_0.startup_script.build_repository_name | "filled in at lab start"}}} \ --remote-uri="https://github.com/${GITHUB_USERNAME}/{{{project_0.startup_script.github_repository_name | "filled in at lab start"}}}.git" \ --connection="cloud-build-connection" --region=$REGION

點選「Check my progress」，確認目標已達成。 連線至 GitHub 存放區並建立 Cloud Build 存放區

建立 Cloud Build 觸發條件

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

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

gcloud builds triggers create github --name="commit-to-master-branch1" \ --repository=projects/$PROJECT_ID/locations/$REGION/connections/cloud-build-connection/repositories/hugo-website-build-repository \ --build-config='cloudbuild.yaml' \ --service-account=projects/$PROJECT_ID/serviceAccounts/$PROJECT_NUMBER-compute@developer.gserviceaccount.com \ --region=$REGION \ --branch-pattern='^master$'

點選「Check my progress」，確認目標已達成。 建立 Cloud Build 觸發條件

Cloud Build 服務帳戶

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

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

測試 pipeline

pipeline 現已建立完成，您可以修訂並提交程式碼，確認變動是否套用至網站。

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

cd ~/my_hugo_site

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

Blogging with Hugo and Cloud Build

3. 輸入下列指令，將變更內容提交至存放區，並觸發 Cloud Build pipeline：

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

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

gcloud builds list --region=$REGION

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

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

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

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

7. 前往託管網址即可查看結果。

您也能前往 Firebase 控制台，尋找專案中的網域名稱。

注意： CDN 可能需要幾分鐘才會更新並顯示最新的網站資訊。 注意：網站具備 SSL 憑證，必須透過 https (超文本傳輸安全通訊協定) 才能存取。

點選「Check my progress」，確認目標已達成。 測試 pipeline

恭喜！

您已學會如何運用 Cloud Build 自動調度並管理 pipeline，快速將 Hugo 網站部署至 Firebase (提供 CDN 與 SSL 憑證)。Cloud Build 可讓您依需求打造程序。縮短部署時間，便能加速創新，輕鬆測試網站的修訂版本。詳情請參閱 Cloud Build 和 Firebase 說明文件。

Google Cloud 教育訓練與認證

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

使用手冊上次更新日期：2024 年 2 月 11 日

實驗室上次測試日期：2024 年 2 月 10 日

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