在現代的微服務架構中，API Gateway 絕對是保護後端服務和提供統一入口的關鍵角色。
這個 Lab 結合了 Google Cloud 的 AI 助手 Gemini 與 API Gateway 服務，讓開發者能更有效率地建置安全的 API 代理。
在 Cymbal Superstore 這個電商應用場景中，我們學會如何將 Cloud Function 包裝在 API Gateway 後面，既保護了後端服務，又提供統一的 API 管理入口。
主要特色
➊ Gemini Code Assist 自動生成 OpenAPI 規範，節省開發時間
➋ API Gateway 作為安全代理，保護 Cloud Functions 不直接暴露
➌ 完整的微服務架構實作，從後端到前端的整合
➍ 學習使用 gcloud 指令進行 API Gateway 的完整生命週期管理
Lab 實作
➊ 調查程式碼並部署 Cloud Function：使用 Gemini 解釋現有程式碼，然後部署 HTTP 觸發的 Cloud Function
➋ 建立中介 API：設定環境變數並讓 Gemini 協助建立 OpenAPI 規範檔案
➌ 建立 API Gateway 服務：啟用服務、建立 API、配置和 Gateway 部署
➍ 更新前端網站：修改環境配置並重新部署前端到 Cloud Storage
一樣附上指令整理和實作影片～
後續會繼續分享參加計劃的心得！
𝕂𝕖𝕖𝕡 𝕝𝕖𝕒𝕣𝕟𝕚𝕟𝕘. 𝕂𝕖𝕖𝕡 𝕙𝕒𝕔𝕜𝕚𝕟𝕘!
實作影片
指令整理
環境初始化
此部分設定 GCP 專案的基礎環境變數。這些變數在後續指令中被引用，確保所有操作都在正確的專案、區域、實例上執行。API Gateway 和 Cloud Functions 都需要這些變數來確保資源部署在正確的位置。
export PROJECT_ID=$(gcloud config get-value project)
export REGION=Lab Region # API Gateway 和 Cloud Functions 的部署區域
export ZONE=Lab Zone # 主要用於其他 GCP 服務的可用區設定
API Gateway 服務啟用與配置
這個概念聚焦於 API Gateway 的核心架構。API Gateway 作為微服務的統一入口，需要先啟用服務並設定基本配置。這裡的 API 建立和配置建立是分離的設計，讓同一個 API 可以有多個配置版本，實現無縫部署和滾動更新。
# 啟用 API Gateway 服務 - 這是所有操作的基礎
gcloud services enable apigateway.googleapis.com
# 建立 API 資源 - 這是邏輯上的 API 定義容器
gcloud api-gateway apis create $API_ID
# 建立 API 配置 - 將 OpenAPI 規範綁定到 API，定義具體的端點和後端
gcloud api-gateway api-configs create $CONFIG_ID \
--api=$API_ID --openapi-spec=$OPENAPI_SPEC
常見坑點：OpenAPI 規範中的 x-google-backend 必須包含完整的 Cloud Function URL，否則會出現 "backend with no address" 錯誤
概念連結：這個配置會在後續的 Gateway 建立中使用，實現從邏輯 API 到實際可訪問端點的轉換
Cloud Functions 部署與整合
Cloud Functions 作為後端服務的核心，需要與 API Gateway 無縫整合。這裡的部署包含了 HTTP 觸發器設定，讓 Function 能被 API Gateway 調用。Node.js 20 運行時確保了現代 JavaScript 特性的支援。
# 部署 Cloud Function - 設定 HTTP 觸發器和公開訪問
gcloud functions deploy newproducts --runtime nodejs20 \
--trigger-http --allow-unauthenticated --region $REGION
# 建立 Gateway - 將配置化的 API 部署為可訪問的端點
gcloud api-gateway gateways create $GATEWAY_ID \
--api=$API_ID --api-config=$CONFIG_ID \
--location=$REGION --project=$PROJECT_ID
常見坑點：Function 部署可能因權限問題失敗，需要重試；Gateway 建立時確保區域設定與其他資源一致
概念連結：Function 的 HTTP 端點會成為 API Gateway 配置中的 x-google-backend address，實現請求的代理轉發
前端整合與驗證
完成後端 API 架構後，需要將前端應用與新的 Gateway 端點整合。這涉及環境變數更新、重新建置和部署到 Cloud Storage。Load Balancer 的 IP 位址提供了前端應用的公共訪問入口。
# 前端建置和部署 - 將 React 應用編譯並上傳到 GCS
cd ~/cymbal-superstore/frontend
npm install && npm run build
gcloud storage cp -r build/* gs://${PROJECT_ID}-cymbal-frontend \
--cache-control=no-cache,no-store,max-age=0
# 驗證 Gateway 狀態 - 確保部署成功並獲取訪問端點
gcloud api-gateway gateways describe $GATEWAY_ID \
--location=$REGION --project=$PROJECT_ID
常見坑點：前端環境檔案的 URL 更新必須排除路徑部分（如 /newproducts），只保留主機名稱；建置過程需確保依賴正確安裝
概念連結：Gateway 的 defaultHostname 會在前端配置中使用，實現從前端到 API Gateway 再到 Cloud Function 的完整請求鏈路