GSP023

總覽

本實驗室會引導您將一款 Python Flask 網頁應用程式部署至 App Engine 彈性環境。這款範例應用程式可讓使用者上傳人臉相片，進而分析相片中人物感到開心的可能性，並搭配 Google Cloud 的 Vision、Storage 和 Datastore API 運作。

關於 App Engine

Google App Engine 應用程式不僅開發與維護相當簡單，還能因應流量和資料儲存需求輕鬆擴充。使用 App Engine，您完全不需要維護伺服器，只要上傳應用程式，一切便準備就緒。

App Engine 應用程式會根據傳入流量自動調度資源。平台原生支援負載平衡、微服務、授權、SQL 與 NoSQL 資料庫、流量拆分、記錄、搜尋、版本管理、部署與復原，以及安全性掃描，並提供高度自訂空間。

App Engine 的彈性環境支援多種程式設計語言，包括 Java、Python、PHP、Node.js、Ruby 和 Go。對於 Python 等特定語言，您也可以選擇使用 App Engine 的標準環境。這兩種環境各有優點，讓使用者在規劃應用程式的運作時，保有極大的彈性空間。詳情請參閱「選擇 App Engine 環境」。

學習內容

• 如何將簡易的網頁應用程式部署至 App Engine 彈性環境
• 如何存取 Vision、Storage 和 Datastore 的 Google Cloud 用戶端程式庫
• 如何使用 Cloud Shell

事前準備

• 熟悉 Python
• 瞭解如何使用標準 Linux 文字編輯器，例如 vim、emacs 或 nano
• 備妥含有人臉的圖片

設定和需求

瞭解以下事項後，再點選「Start Lab」按鈕

請詳閱以下操作說明。實驗室活動會計時，且中途無法暫停。點選「Start Lab」後就會開始計時，顯示可使用 Google Cloud 資源的時間。

您將在真正的雲端環境完成實作實驗室活動，而不是模擬或示範環境。為此，我們會提供新的暫時憑證，供您在實驗室活動期間登入及存取 Google Cloud。

為了順利完成這個實驗室，請先確認：

• 可以使用標準的網際網路瀏覽器 (Chrome 瀏覽器為佳)。

注意事項：請使用無痕模式 (建議選項) 或私密瀏覽視窗執行此實驗室，這可以防止個人帳戶和學員帳戶之間的衝突，避免個人帳戶產生額外費用。

• 是時候完成實驗室活動了！別忘了，活動一旦開始將無法暫停。

注意事項：務必使用實驗室專用的學員帳戶。如果使用其他 Google Cloud 帳戶，可能會產生額外費用。

如何開始實驗室及登入 Google Cloud 控制台

1. 按一下「Start Lab」按鈕。如果實驗室會產生費用，請在開啟的對話方塊中選取付款方式。右側的「Lab setup and access」面板會顯示下列項目：

   • 「Open Google Cloud console」按鈕
   • 此實驗室所需的臨時憑證 (使用者名稱和密碼)
   • 完成此實驗室所需的其他資訊 (如有)

   請注意，實驗室計時器位於頁面頂端附近，會顯示剩餘時間。

2. 按一下「Open Google Cloud console」。如果使用 Chrome 瀏覽器，也可以按一下滑鼠右鍵，選取「在無痕視窗中開啟連結」。

   接著，實驗室會啟動相關資源，並開啟另一個分頁，顯示「登入」頁面。

   提示：您可以在不同的視窗並排開啟分頁。

   注意：頁面顯示「選擇帳戶」對話方塊時，請點選「使用其他帳戶」。

3. 如有必要，請將下方的 Username 貼到「登入」對話方塊。

   {{{user_0.username | "Username"}}}

   您也可以在「Lab setup and access」面板找到「Username」。

4. 點選「下一步」。

5. 複製下方的 Password，並貼到「歡迎使用」對話方塊。

   {{{user_0.password | "Password"}}}

   您也可以在「Lab setup and access」面板找到「Password」。

6. 點選「下一步」。

   重要事項：請務必使用實驗室提供的憑證，而非自己的 Google Cloud 帳戶憑證。 注意：如果使用自己的 Google Cloud 帳戶來進行這個實驗室，可能會產生額外費用。

7. 繼續點按後續頁面：

   • 接受條款及細則。
   • 由於這是臨時帳戶，請勿新增救援選項或雙重驗證機制。
   • 請勿申請免費試用。

Google Cloud 控制台稍後會在這個分頁開啟。

注意：如要使用 Google Cloud 產品和服務，請按一下「導覽選單」，或在「搜尋」欄位輸入服務或產品名稱。

啟動 Cloud Shell

Cloud Shell 是搭載多項開發工具的虛擬機器，提供永久的 5 GB 主目錄，而且在 Google Cloud 中運作。Cloud Shell 提供指令列存取權，方便您使用 Google Cloud 資源。

1. 點按 Google Cloud 控制台頂端的「啟用 Cloud Shell」圖示 。

2. 系統顯示視窗時，請按照下列步驟操作：

   • 繼續操作 Cloud Shell 視窗。
   • 授權 Cloud Shell 使用您的憑證發出 Google Cloud API 呼叫。

連線建立完成即代表已通過驗證，而且專案已設為您的 Project_ID：。輸出內容中有一行文字，宣告本工作階段的 Project_ID：

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud 是 Google Cloud 的指令列工具，已預先安裝於 Cloud Shell，並支援 Tab 鍵自動完成功能。

3. (選用) 您可以執行下列指令來列出使用中的帳戶：

gcloud auth list

4. 點按「授權」。

輸出內容：

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (選用) 您可以使用下列指令來列出專案 ID：

gcloud config list project

輸出內容：

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注意：如需 gcloud 的完整說明，請前往 Google Cloud 參閱 gcloud CLI 總覽指南。

工作 1：取得程式碼範例

1. 在 Cloud Shell 執行下列指令，複製程式碼範例：

gcloud storage cp -r gs://spls/gsp023/flex_and_vision/ .

2. 將目錄變更為 flex_and_vision：

cd flex_and_vision

工作 2：驗證 API 要求

本實驗室已自動啟用 Datastore、Storage 和 Vision API，您需要使用服務帳戶憑證，才能向這些 API 發出要求。您可以在 Cloud Shell 中使用「gcloud」，從專案產生憑證，而專案 ID 可在啟動實驗室的分頁中找到。

1. 設定專案 ID 的環境變數：

export PROJECT_ID=$(gcloud config get-value project)

2. 建立服務帳戶，以便在本機測試時存取 Google Cloud API：

gcloud iam service-accounts create qwiklab \ --display-name "My Qwiklab Service Account"

3. 向新建立的服務帳戶授予適當權限：

gcloud projects add-iam-policy-binding ${PROJECT_ID} \ --member serviceAccount:qwiklab@${PROJECT_ID}.iam.gserviceaccount.com \ --role roles/owner

4. 建立服務帳戶後，請建立服務帳戶金鑰：

gcloud iam service-accounts keys create ~/key.json \ --iam-account qwiklab@${PROJECT_ID}.iam.gserviceaccount.com

這個指令會產生服務帳戶金鑰，並儲存至主目錄中名為 key.json 的 JSON 檔案。

5. 使用該金鑰的絕對路徑，設定服務帳戶金鑰的環境變數：

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

如要進一步瞭解如何驗證 Vision API，請參閱快速入門導覽課程：Vision API 設定指南。

請點選下方的「Check my progress」，確認實驗室進度。

驗證 API 要求

工作 3：在本機測試應用程式

安裝依附元件

1. 使用 pip 從 requirements.txt 檔案安裝專案的依附元件：

pip install -r requirements.txt

requirements.txt 檔案列出了專案所需的套件依附元件，上述指令已將這些依附元件全部下載至「virtualenv」。

建立 App Engine 應用程式

1. 首先，將分配到的區域設為環境變數：

AE_REGION={{{project_0.startup_script.app_region|REGION}}}

2. 接著，使用下列指令建立 App Engine 執行個體：

gcloud app create --region=$AE_REGION

建立 Storage bucket

1. 首先，將環境變數「CLOUD_STORAGE_BUCKET」設為與「PROJECT_ID」相同的名稱 (為方便起見，通常建議 bucket 直接與「PROJECT_ID」同名)：

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}

2. 執行下列指令，建立與「PROJECT_ID」同名的 bucket：

gcloud storage buckets create gs://${PROJECT_ID}

請點選下方的「Check my progress」，確認實驗室進度。

建立 App Engine 應用程式和 Storage bucket

執行應用程式

1. 執行下列指令來啟動應用程式：

python main.py

2. 應用程式啟動後，點選 Cloud Shell 工具列中的「網頁預覽」圖示 ，並選擇「透過以下通訊埠預覽：8080」。

瀏覽器會開啟新分頁，並連線至剛剛啟動的伺服器。畫面應如下所示：

接下來就進入有趣的部分了！

3. 點選「Choose File」按鈕，從電腦中找出有人臉的圖片，然後點選「Submit」。

上傳相片後，畫面應如下所示：

注意：在 Cloud Shell 中按下 Ctrl + C 鍵，即可關閉本機網路伺服器，結束應用程式的本機測試。

請點選下方的「Check my progress」，確認實驗室進度。

執行應用程式

工作 4：探索程式碼

程式碼範例結構

程式碼範例的結構如下：

templates/ homepage.html /* HTML template that uses Jinja2 */ app.yaml /* App Engine application configuration file */ main.py /* Python Flask web application */ requirements.txt /* List of dependencies for the project */

main.py

這個 Python 檔案是 Flask 網頁應用程式。使用者可以在應用程式中提交相片 (建議使用包含人臉的相片)，相片會儲存至 Cloud Storage，並由 Cloud Vision API 的臉部偵測功能分析。每張相片的關鍵資訊都會儲存在 Google Cloud 的 NoSQL 資料庫 Datastore 中，每當使用者造訪網站，系統便會存取這些資訊。

這款應用程式使用了 Storage、Datastore 和 Vision 的 Google Cloud 用戶端程式庫，讓您能輕鬆使用偏好的程式設計語言，存取各種 Cloud API。

接著來看看程式碼的幾個重要片段。

頂端的 imports 部分是用來匯入程式碼所需的各種套件。以下說明如何匯入 Datastore、Storage 和 Vision 的 Google Cloud 用戶端程式庫：

from google.cloud import datastore from google.cloud import storage from google.cloud import vision

定義使用者造訪網站根網址時處理邏輯的程式碼

以下是使用者造訪網站根網址時，負責處理相關動作的程式碼。系統會建立 Datastore 用戶端物件，用於存取 Datastore 用戶端程式庫；接著向 Datastore 查詢 Faces 種類的實體，最後呈現 HTML 範本，並將從 Datastore 擷取的 image_entities 傳遞至範本做為變數。

@app.route('/') def homepage(): # Create a Cloud Datastore client. datastore_client = datastore.Client() # Use the Cloud Datastore client to fetch information from Datastore about # each photo. query = datastore_client.query(kind='Faces') image_entities = list(query.fetch()) # Return a Jinja2 HTML template and pass in image_entities as a parameter. return render_template('homepage.html', image_entities=image_entities)

接下來，我們來看看實體如何儲存至 Datastore。Datastore 是 Google Cloud 的 NoSQL 資料庫解決方案，資料會儲存在名為「實體」的物件中。每個實體都會獲得專屬的識別「索引鍵」，此索引鍵可使用 kind 和 key name 字串建立。kind 就像是分類用的組織容器，代表「實體」所屬的類型。舉例來說，我們可以針對相片、人員和動物，分別建立不同的 kind。

每個「實體」都能有多個由開發人員定義的「屬性」，這些屬性的值可為多種型別，包括整數、浮點數、字串、日期或二進位資料：

# Create a Cloud Datastore client. datastore_client = datastore.Client() # Fetch the current date / time. current_datetime = datetime.now() # The kind for the new entity. kind = 'Faces' # The name/ID for the new entity. name = blob.name # Create the Cloud Datastore key for the new entity. key = datastore_client.key(kind, name) # Construct the new entity using the key. Set dictionary values for entity # keys blob_name, storage_public_url, timestamp, and joy. entity = datastore.Entity(key) entity['blob_name'] = blob.name entity['image_public_url'] = blob.public_url entity['timestamp'] = current_datetime entity['joy'] = face_joy # Save the new entity to Datastore. datastore_client.put(entity)

Storage 和 Vision 用戶端程式庫的程式存取方式與 Datastore 類似。您可以使用 vim、emacs 或 nano 開啟 main.py 檔案，自行查看所有範例程式碼。

homepage.html

Flask 網頁框架採用 Jinja2 做為範本引擎，讓我們能將 main.py 中的變數和運算式傳遞至 homepage.html，並在網頁呈現時自動替換為對應值。

如要進一步瞭解 Jinja2，請參閱範本設計工具說明文件。

這個 Jinja2 HTML 範本除了提供能將相片上傳至資料庫的表單，還會顯示所有先前提交的圖片，並一併呈現其檔名、上傳日期/時間，以及 Vision API 偵測出人臉呈現喜悅表情的機率。

<h1>Google Cloud Platform - Face Detection Sample</h1> <p>This Python Flask application demonstrates App Engine Flexible, Google Cloud Storage, Datastore, and the Cloud Vision API.</p> <br> <html> <body> <form action="upload_photo" method="POST" enctype="multipart/form-data"> Upload File: <input type="file" name="file"><br> <input type="submit" name="submit" value="Submit"> </form> {% for image_entity in image_entities %} <img src="{{image_entity['image_public_url']}}" width=200 height=200> <p>{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}.</p> <p>Joy Likelihood for Face: {{image_entity['joy']}}</p> {% endfor %} </body> </html>

工作 5：將應用程式部署至 App Engine 彈性環境

App Engine 彈性環境會使用名為 app.yaml 的檔案來描述應用程式的部署設定。如果少了這個檔案，App Engine 雖然會嘗試推算設定，但仍建議您提供此檔案。

1. 接著，請使用您慣用的編輯器 (vim、nano 或 emacs) 修改 app.yaml。本例使用 nano 編輯器：

nano app.yaml

2. 開啟 app.yaml 後，請將 <your-cloud-storage-bucket> 換成您的 Cloud Storage bucket 名稱 (如果忘記這個名稱，請從實驗室詳細資料面板複製專案 ID)。

env_variables 部分設定的環境變數，會在應用程式部署後供 main.py 使用。

3. 接著，在檔案末尾加入以下內容，將應用程式設為手動調整資源配置：

manual_scaling: instances: 1

4. 最後，請確認 python_version 設為 3.12，確保 App Engine 順利部署。

檔案應如下所示：

runtime: python env: flex entrypoint: gunicorn -b :$PORT main:app runtime_config: operating_system: "ubuntu22" runtime_version: "3.12" env_variables: CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket> manual_scaling: instances: 1

以上是將 Python 3 應用程式部署至 App Engine Flex 環境的基本設定。如要進一步瞭解如何設定 App Engine，請參閱「使用 app.yaml 設定應用程式」指南。

5. 儲存檔案並退出 nano：

• 按下 Ctrl + X 鍵。
• 看到下列提示時，輸入 Y 並按下 Enter 鍵。

6. 更新 Cloud Build 逾時設定：

gcloud config set app/cloud_build_timeout 1000

7. 使用以下 gcloud 指令，將應用程式部署至 App Engine：

gcloud app deploy

如果系統提示「Do you want to continue (Y/n)」，請輸入 Y 並按下 Enter 鍵。

您可以在 Cloud Shell 即時查看應用程式的建構進度，這個過程最多需要 10 分鐘。App Engine 彈性環境會在背景自動佈建 Compute Engine 虛擬機器，然後安裝並啟動應用程式。

8. 部署完成後，請在網路瀏覽器中輸入下列網址開啟應用程式：

https://<PROJECT_ID>.appspot.com 注意：如果忘記 PROJECT_ID，請在 Cloud Shell 中執行 gcloud config list project。

請點選下方的「Check my progress」，確認實驗室進度。

部署應用程式

恭喜！

恭喜！在本實驗室，您已成功學會如何編寫 Python 網頁應用程式，並部署至 App Engine 彈性環境！

後續步驟/瞭解詳情

• 在 Google Cloud 中使用 Python
• App Engine 彈性環境的 Python 說明文件
• Datastore、Storage 和 Vision 的 Python 用戶端程式庫說明文件
• 進一步瞭解用戶端程式庫
• 更多 Python 程式碼範例
• 進一步瞭解 Flask

Google Cloud 教育訓練與認證

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

使用手冊上次更新日期：2026 年 5 月 20 日

實驗室上次測試日期：2026 年 2 月 24 日

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