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 控制台

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 檔案。

系統也會顯示下列內容：

輸出內容：

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

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

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

建立存放區與初始網站

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

1. 在 Linux VM 安裝 Git。

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

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

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

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

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

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

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

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

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

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

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

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

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

網站應如下所示：

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

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

將網站部署至 Firebase

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

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

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 部署網站：

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

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

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

進行初始修訂

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

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

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

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

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

設定建構

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

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

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

輸出內容：

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 二進位檔皆建立並安裝於臨時目錄，以防意外部署至網站本身。

建立 Cloud Build 觸發條件

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

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

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

Cloud Build 服務帳戶

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

測試管道

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

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

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

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

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

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

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

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

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

恭喜！

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

Google Cloud 教育訓練與認證

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

使用手冊上次更新日期：2024 年 9 月 25 日

實驗室上次測試日期：2024 年 9 月 25 日

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