總覽

在本實驗室，您將建立 Cloud Storage bucket，並在其中放置圖片。接著您將設定在 Compute Engine 執行的應用程式，讓應用程式使用 Cloud SQL 代管的資料庫。在本實驗室，您會使用 PHP 來設定網路伺服器，PHP 是主流網誌軟體的基礎網路開發環境。在實驗室以外，這些套件會以類似技術來設定。

您也會設定網路伺服器，來參照 Cloud Storage bucket 中的圖片。

目標

在本實驗室，您將瞭解如何執行下列工作：

• 建立 Cloud Storage bucket，並將圖片放入其中。
• 建立 Cloud SQL 執行個體並設定。
• 從網路伺服器連線到 Cloud SQL 執行個體。
• 在網頁上使用 Cloud Storage bucket 中的圖片。

工作 1：登入 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 產品和服務的選單，請點選左上角的「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

工作 2：部署網路伺服器 VM 執行個體

在這項工作中，您將使用 Compute Engine 佈建虛擬機器 (VM) 執行個體，並透過開機指令碼，設定網路伺服器 (Apache) 和初始設定所需的指令碼。接著，請記下網路 ID。

1. 在 Google Cloud 控制台的「導覽選單」圖示 中，依序點按「Compute Engine」>「VM 執行個體」。

2. 點選「建立執行個體」。

3. 「名稱」請輸入 bloghost。

4. 在「區域」部分，選取「」。

5. 在「可用區」部分，選取「」。

6. 在「機型」部分，選取「e2-standard-2」。

7. 在左側窗格點選「OS 和儲存空間」。如果顯示的「映像檔」不是「Debian GNU/Linux 12 (bookworm)」，請點選「變更」並選取「Debian GNU/Linux 12 (bookworm)」版本。

8. 點選「網路」。

9. 在「防火牆」部分，點選「允許 HTTP 流量」。

10. 在左側窗格點選「進階」。

11. 在「自動化」部分，複製及貼上下列指令碼做為「開機指令碼」的值：

apt-get install apache2 php php-mysql -y service apache2 restart 注意：請務必將這個指令碼輸入至「開機指令碼」欄位，如果不小心輸入到其他欄位，VM 執行個體啟動時就不會執行這個指令碼。

12. 保留其餘設定的預設值，然後按一下「建立」。

注意：執行個體可能需要約兩分鐘才會啟動並全面運作。

13. 在「VM 執行個體」頁面，將 bloghost VM 執行個體的內外部 IP 位址，複製到文字編輯器，方便後續步驟使用。

按一下「Check my progress」，確認目標已達成。 部署網路伺服器 VM 執行個體

工作 3：使用 gcloud 儲存空間指令列建立 Cloud Storage bucket

在這項工作中，您將使用 gcloud 儲存空間指令列工具，建立全域唯一的 Cloud Storage bucket、設定位置、將公開圖片上傳至 bucket，並將該特定物件設為可公開讀取。

所有 Cloud Storage bucket 名稱在全域範圍內都不可重複。如要確保 bucket 名稱不同，可依照下列操作說明，將 bucket 名稱設為 Google Cloud 專案 ID，此 ID 也是全域不重複的名稱。

Cloud Storage bucket 可與單一區域或多區域位置建立關聯，例如 US、EU 或 ASIA。在本活動中，您會把 bucket 與最靠近實驗室或講師指派區域和可用區的多區域建立關聯。

1. 在「Google Cloud 控制台」右上角的工具列，點按「啟用 Cloud Shell」圖示 。如果出現對話方塊，請點按「繼續」。

2. 為了方便起見，請將所選位置輸入環境變數 LOCATION 之中。請輸入下列其中一個指令：

export LOCATION=US

或

export LOCATION=EU

或

export LOCATION=ASIA

3. 在 Cloud Shell 中，環境變數 DEVSHELL_PROJECT_ID 包含專案 ID。請輸入下列指令，建立名稱與專案 ID 相同的 bucket：

gcloud storage buckets create -l $LOCATION gs://$DEVSHELL_PROJECT_ID

如果出現提示訊息，請點按「授權」繼續操作。

4. 從可公開存取的 Cloud Storage 位置擷取橫幅圖片：

gcloud storage cp gs://cloud-training/gcpfci/my-excellent-blog.png my-excellent-blog.png

5. 將橫幅圖片複製到新建立的 Cloud Storage bucket：

gcloud storage cp my-excellent-blog.png gs://$DEVSHELL_PROJECT_ID/my-excellent-blog.png

6. 為剛建立的物件修改存取控管清單，允許所有使用者讀取：

gsutil acl ch -u allUsers:R gs://$DEVSHELL_PROJECT_ID/my-excellent-blog.png

按一下「Check my progress」，確認目標已達成。 使用 gcloud 儲存空間指令列建立 Cloud Storage bucket

工作 4：建立 Cloud SQL 執行個體

在這項工作中，您將使用 Cloud SQL，建立及設定代管的 MySQL 資料庫執行個體、設定特定使用者帳戶，以及授權未來網路伺服器的外部 IP 位址，以建立網路連線。

1. 前往 Google Cloud 控制台，依序點按「導覽選單」圖示 >「Cloud SQL」。

2. 點選「建立執行個體」。

3. 在「Choose a database engine」部分，點選「Choose MySQL」。

4. 在「選擇 Cloud SQL 版本」部分，點選「Enterprise」，然後在「版本預設設定」下拉式選單中選取「沙箱」。

5. 在「執行個體 ID」部分，輸入 blog-db，「密碼」則輸入 Passw0rd1!。

6. 在「區域」部分，選取「」。

7. 「可用區可用性」請選取「單一可用區」。

8. 展開「指定可用區」，然後在「主要可用區」選取「」。

注意：這和啟動 bloghost 執行個體的區域和可用區相同。當用戶端和資料庫距離相近，才能達到最佳效能。

9. 在「自訂執行個體」部分，展開「顯示設定選項」。

10. 展開「安全性」，然後點選「允許未加密的網路流量 (不建議)」。

注意：本實驗室未使用 SSL，因此請務必設定上述選項。

11. 點選「建立執行個體」。

注意：請等待執行個體完成部署，這可能需要幾分鐘。

設定使用者和連線

1. 從「連線至這個執行個體」下的 SQL 執行個體詳細資料頁面，將 SQL 執行個體的「公開 IP 位址」複製到文字編輯器，方便在後續步驟中使用。

2. 在左側窗格，依序點選「使用者」和「新增使用者帳戶」。

3. 「使用者名稱」請輸入 blogdbuser。

4. 「密碼」請輸入 Passw0rd1!。

5. 點按「新增」，將使用者帳戶加入資料庫。

注意：請等待使用者建立完成。

6. 在左側窗格，依序點選「連線」和「網路」分頁標籤。

7. 點選「新增網路」。

注意：如果出現「私人 IP」和「公開 IP」連線選項，請選擇本實驗室所需的「公開 IP」。 注意：如果使用者帳戶尚未建立完成，「新增網路」按鈕可能會無法使用。

8. 在「名稱」欄位輸入 web front end。

9. 在「網路」欄位輸入 bloghost VM 執行個體的外部 IP 位址，並在後方加上 /32。

結果應類似於下方示例：

35.192.208.2/32 注意：務必使用 VM 執行個體的外部 IP 位址，並於後方加上 /32。請勿使用 VM 執行個體的內部 IP 位址，也不要使用這裡顯示的範例 IP 位址。

10. 按一下「完成」，以完成設定授權網路。

11. 按一下「儲存」，以儲存設定變更內容。

注意：如果出現「正在處理另一項作業」等訊息，請等待幾分鐘，看見 blog-db 出現綠色勾號後再儲存設定。

按一下「Check my progress」，確認目標已達成。 建立 Cloud SQL 執行個體

工作 5：在 Compute Engine 執行個體設定應用程式以使用 Cloud SQL

在這項工作中，您將修改 PHP 應用程式程式碼 (index.php)，加入資料庫的 IP 位址和憑證，安全地將 VM 執行個體上，執行的 Apache 網頁伺服器連線至 Cloud SQL 資料庫，建立有效資料庫連線。

1. 在「導覽選單」 上，依序點選「Compute Engine」>「VM 執行個體」。

2. 在 VM 執行個體清單上，按一下 VM 執行個體 bloghost 該列的「SSH」。如果出現提示訊息，請點按「授權」。

3. 在 bloghost 的 SSH 工作階段，將工作目錄變更為網路伺服器的文件根目錄：

cd /var/www/html

4. 使用 nano 文字編輯器來編輯 index.php 檔案：

sudo nano index.php

5. 複製下列內容並貼到檔案：

<html> <head><title>Welcome to my excellent blog</title></head> <body> <h1>Welcome to my excellent blog</h1> <?php $dbserver = "CLOUDSQLIP"; $dbuser = "blogdbuser"; $dbpassword = "DBPASSWORD"; // In a production blog, we would not store the MySQL // password in the document root. Instead, we would store // it in a Secret Manger. For more information see // https://cloud.google.com/sql/docs/postgres/use-secret-manager try { $conn = new PDO("mysql:host=$dbserver;dbname=mysql", $dbuser, $dbpassword); // set the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); echo "Connected successfully"; } catch(PDOException $e) { echo "Database connection failed:: " . $e->getMessage(); } ?> </body></html> 注意：在後續步驟中，您會在這個檔案插入 Cloud SQL 執行個體的 IP 位址和資料庫密碼，但現在請不要修改這個檔案。

6. 依序按下 Ctrl+O 和 Enter 鍵，儲存編輯過的檔案。

7. 按下 Ctrl+X 鍵，退出 nano 文字編輯器。

8. 重新啟動網路伺服器：

sudo service apache2 restart

9. 開啟新的網路瀏覽器分頁，在網址列貼上 bloghost VM 執行個體的外部 IP 位址，並在 IP 位址後方加上 /index.php。網址應類似於以下示例：

35.192.208.2/index.php 注意：務必使用 VM 執行個體的外部 IP 位址，並在後方加上 /index.php。請勿使用 VM 執行個體的內部 IP 位址，也不要用這裡顯示的範例 IP 位址。 注意：如果出現 IP 位址不支援安全連線的訊息，請點選「Continue to site」。

載入頁面時，您會看到頁面內容包含下列文字開頭的錯誤訊息：

Database connection failed: ... 注意：因為您尚未設定 PHP 和 Cloud SQL 執行個體之間的連線，才會出現這個訊息。

10. 返回 bloghost 的 SSH 工作階段，再次使用 nano 文字編輯器來編輯 index.php。確認您目前位於 /var/www/html 目錄。

sudo nano index.php

11. 在 nano 文字編輯器，將 CLOUDSQLIP 換成您先前記下的 Cloud SQL 執行個體 (blog-db) 公開 IP 位址，並保留值的引號。

12. 在 nano 文字編輯器，將 DBPASSWORD 替換成您在上述步驟定義的 Cloud SQL 資料庫密碼，也就是 Passw0rd1!，並保留值的引號。

13. 依序按下 Ctrl+O 和 Enter 鍵，儲存編輯過的檔案。

14. 按下 Ctrl+X 鍵，退出 nano 文字編輯器。

15. 重新啟動網路伺服器：

sudo service apache2 restart

16. 返回用來開啟 bloghost VM 執行個體外部 IP 位址的網路瀏覽器分頁。載入頁面時，會出現下列訊息：

Connected successfully 注意：在實際的網誌中，訪客不會看到資料庫連線狀態，只有系統管理員能管理資料庫連線。

工作 6：在 Compute Engine 執行個體中設定應用程式，以使用 Cloud Storage 物件

在這項工作中，您將編輯 Compute Engine 執行個體上的 index.php 檔案，加入正確的圖片來源網址，將儲存在 Cloud Storage bucket 的公開圖片，整合至網頁應用程式。

1. 前往 Google Cloud 控制台，依序點選「Cloud Storage」>「bucket」。

2. 點選以您 Google Cloud 專案命名的 bucket。

3. 此 bucket 中有一個叫做 my-excellent-blog.png 的物件。請在這個物件的「公開存取權」欄，複製「連結」圖示後方的網址。若出現「Public link」，則網址可能在字詞後方。

注意：如果沒有看到「連結」圖示或「Public link」一詞，請嘗試重新整理瀏覽器。如果仍然沒有看到「連結」圖示，請返回 Cloud Shell，確認您已成功透過 gsutil acl ch 指令，變更物件的存取控管清單。

4. 返回 bloghost VM 執行個體的 SSH 工作階段。

5. 輸入下列指令，將工作目錄變更為網路伺服器的文件根目錄：

cd /var/www/html

6. 使用 nano 文字編輯器來編輯 index.php：

sudo nano index.php

7. 使用方向鍵，將游標移到含有 h1 元素那一行的程式碼。按下 Enter 鍵來開啟新的空白行，並將先前複製的網址貼入該行。

8. 在網址前方貼上以下 HTML 標記：

<img src='

9. 在網址尾端放置一個右單引號和右尖括號：

'>

結果應類似於以下示例：

<img src='https://storage.googleapis.com/qwiklabs-gcp-0005e186fa559a09/my-excellent-blog.png'>

這些步驟的作用是將 <img src='...'> 行放在 <h1>...</h1> 行前方。

注意：請勿複製這裡顯示的網址。請在您的 Cloud Platform 專案中，複製 Cloud 儲存空間瀏覽器顯示的網址。

10. 依序按下 Ctrl+O 和 Enter 鍵，儲存編輯過的檔案。

11. 按下 Ctrl+X 鍵，退出 nano 文字編輯器。

12. 重新啟動網路伺服器：

sudo service apache2 restart

13. 返回用來開啟 bloghost VM 執行個體外部 IP 位址的網路瀏覽器分頁。載入頁面時，現在的內容會包含橫幅圖片。

恭喜！

在本實驗室，您設定了 Cloud SQL 執行個體，並連線到 Compute Engine 執行個體上的應用程式。此外，您也使用了 Cloud Storage bucket。

關閉研究室

如果您已完成研究室，請按一下「End Lab」(關閉研究室)。Google Cloud Skills Boost 會移除您使用的資源，並清除所用帳戶。

您可以針對研究室的使用體驗評分。請選取合適的星級評等並提供意見，然後按一下「Submit」(提交)。

星級評等代表您的滿意程度：

• 1 星 = 非常不滿意
• 2 星 = 不滿意
• 3 星 = 普通
• 4 星 = 滿意
• 5 星 = 非常滿意

如果不想提供意見回饋，您可以直接關閉對話方塊。

如有任何想法、建議或指教，請透過「Support」(支援) 分頁提交。

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

其他資源

請參閱 Google Cloud Platform 的 Cloud SQL 說明文件。

請參閱 Google Cloud Platform 的 Cloud Storage 說明文件。