📦 Unit 03 - Serverless 雲端應用開發

🔬 實作：第一個 HTTP Function

選擇運行環境：Python 3.11

貼上以下程式碼：

import functions_framework

@functions_framework.http
def hello_http(request):
    """HTTP 觸發的 Cloud Function"""
    
    # 取得請求參數
    name = request.args.get('name', '訪客')
    
    # 回傳 JSON 格式
    return {
        'message': f'你好，{name}！',
        'status': 'success',
        'source': 'Cloud Functions'
    }

部署完成後，點擊函式名稱 → 複製「觸發網址」

在瀏覽器測試：

https://YOUR-REGION-YOUR-PROJECT.cloudfunctions.net/hello-world-http?name=Frank

# 回應
{
  "message": "你好，Frank！",
  "status": "success",
  "source": "Cloud Functions"
}

🔬 實作：自動產生縮圖

新增函式，設定如下：

設定項目	值
觸發類型	Cloud Storage
事件類型	finalize/create（檔案上傳完成）
Bucket	選擇你的照片 Bucket

程式碼範例（需安裝 Pillow 套件）：

import functions_framework
from google.cloud import storage
from PIL import Image
import io

@functions_framework.cloud_event
def generate_thumbnail(cloud_event):
    """當圖片上傳時自動產生縮圖"""
    
    data = cloud_event.data
    bucket_name = data["bucket"]
    file_name = data["name"]
    
    # 忽略縮圖資料夾（避免無限遞迴）
    if file_name.startswith("thumbnails/"):
        return
    
    # 下載原圖
    storage_client = storage.Client()
    bucket = storage_client.bucket(bucket_name)
    blob = bucket.blob(file_name)
    image_data = blob.download_as_bytes()
    
    # 產生縮圖（300x300）
    img = Image.open(io.BytesIO(image_data))
    img.thumbnail((300, 300))
    
    # 儲存縮圖
    thumb_bytes = io.BytesIO()
    img.save(thumb_bytes, format=img.format)
    thumb_bytes.seek(0)
    
    thumb_blob = bucket.blob(f"thumbnails/{file_name}")
    thumb_blob.upload_from_file(thumb_bytes, content_type=blob.content_type)
    
    print(f"✅ 縮圖已生成：thumbnails/{file_name}")

在 requirements.txt 新增依賴：

functions-framework==3.*
google-cloud-storage==2.10.0
Pillow==10.0.0

🔬 實作：建立照片管理 API

步驟 1：準備專案結構

photo-api/
├── main.py
├── requirements.txt
└── Dockerfile

步驟 2：撰寫 Flask 應用（main.py）

from flask import Flask, jsonify, request
from flask_cors import CORS
from google.cloud import storage
import os

app = Flask(__name__)
CORS(app)

BUCKET_NAME = os.environ.get('BUCKET_NAME', 'your-bucket-name')

@app.route('/')
def home():
    return jsonify({
        'service': 'Photo API',
        'version': '1.0',
        'endpoints': ['/photos', '/upload-url']
    })

@app.route('/photos', methods=['GET'])
def list_photos():
    """列出所有照片"""
    storage_client = storage.Client()
    bucket = storage_client.bucket(BUCKET_NAME)
    blobs = bucket.list_blobs(prefix='photos/')
    
    photos = []
    for blob in blobs:
        if blob.name != 'photos/':  # 忽略資料夾本身
            photos.append({
                'name': blob.name,
                'url': blob.public_url,
                'size': blob.size,
                'updated': blob.updated.isoformat()
            })
    
    return jsonify({'photos': photos, 'count': len(photos)})

@app.route('/upload-url', methods=['POST'])
def generate_upload_url():
    """產生簽署上傳網址（Signed URL）"""
    data = request.json
    filename = data.get('filename')
    
    storage_client = storage.Client()
    bucket = storage_client.bucket(BUCKET_NAME)
    blob = bucket.blob(f'photos/{filename}')
    
    url = blob.generate_signed_url(
        version="v4",
        expiration=300,  # 5 分鐘有效
        method="PUT",
        content_type=data.get('content_type', 'image/jpeg')
    )
    
    return jsonify({'upload_url': url})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=int(os.environ.get('PORT', 8080)))

步驟 3：依賴套件（requirements.txt）

Flask==3.0.0
flask-cors==4.0.0
google-cloud-storage==2.10.0
gunicorn==21.2.0

步驟 4：容器設定（Dockerfile）

FROM python:3.11-slim

WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY main.py .

CMD exec gunicorn --bind :$PORT --workers 1 --threads 8 main:app

步驟 5：部署到 Cloud Run

# 啟用 Cloud Run API
gcloud services enable run.googleapis.com

# 使用 Cloud Build 自動建置並部署
gcloud run deploy photo-api \
  --source . \
  --region us-central1 \
  --platform managed \
  --allow-unauthenticated \
  --set-env-vars BUCKET_NAME=my-photos-bucket

# 部署完成會顯示服務網址
Service URL: https://photo-api-xxx-uc.a.run.app

# 列出照片
curl https://photo-api-xxx-uc.a.run.app/photos

# 取得上傳網址
curl -X POST https://photo-api-xxx-uc.a.run.app/upload-url \
  -H "Content-Type: application/json" \
  -d '{"filename": "sunset.jpg", "content_type": "image/jpeg"}'

🔬 實作：前端整合範例

HTML + JavaScript 呼叫 Cloud Run API：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>照片牆</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
    .photo-card { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    .photo-card img { width: 100%; height: 200px; object-fit: cover; }
  </style>
</head>
<body>
  <h1>📸 我的照片牆</h1>
  
  <!-- 上傳區域 -->
  <div>
    <input type="file" id="fileInput" accept="image/*">
    <button onclick="uploadPhoto()">上傳照片</button>
  </div>

  <!-- 照片展示 -->
  <div id="photoGrid" class="photo-grid"></div>

  <script>
    const API_URL = 'https://photo-api-xxx-uc.a.run.app';

    // 載入所有照片
    async function loadPhotos() {
      const response = await fetch(`${API_URL}/photos`);
      const data = await response.json();
      
      const grid = document.getElementById('photoGrid');
      grid.innerHTML = '';
      
      data.photos.forEach(photo => {
        const card = document.createElement('div');
        card.className = 'photo-card';
        card.innerHTML = `
          <img src="${photo.url}" alt="${photo.name}">
          <p>${photo.name}</p>
        `;
        grid.appendChild(card);
      });
    }

    // 上傳照片
    async function uploadPhoto() {
      const fileInput = document.getElementById('fileInput');
      const file = fileInput.files[0];
      
      if (!file) {
        alert('請選擇檔案');
        return;
      }

      // 1. 取得簽署上傳網址
      const response = await fetch(`${API_URL}/upload-url`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          filename: file.name,
          content_type: file.type
        })
      });
      
      const { upload_url } = await response.json();

      // 2. 直接上傳到 Cloud Storage
      await fetch(upload_url, {
        method: 'PUT',
        headers: { 'Content-Type': file.type },
        body: file
      });

      alert('上傳成功！');
      loadPhotos();  // 重新載入
    }

    // 頁面載入時顯示照片
    loadPhotos();
  </script>
</body>
</html>

🔬 實作：設定成本預算警示

在 GCP Console → 「帳單」→ 「預算與快訊」

# 設定預算
預算名稱：Serverless 月預算
預算金額：$10 USD / 月
警示門檻：50%, 90%, 100%

# 通知方式
Email: your-email@example.com
Pub/Sub 主題：（選用，可串接自動化流程）

# 當達到 100% 時可自動停用服務
設定 Cloud Function 檢查預算並停用資源