Flask + Vue + Docker Starter

一個最小化的 Flask 後端 + Vue 3 (Vite) 前端專案，支援 Docker 開發環境與 Firebase/Cloud Run 部署。

📁 專案結構

flask-vue-hello-world/
├─ docker-compose.yml
├─ firebase.json
├─ .firebaserc
├─ backend/
│  ├─ Dockerfile
│  ├─ requirements.txt
│  └─ app.py
└─ frontend/
   ├─ Dockerfile
   ├─ package.json
   ├─ vite.config.js
   ├─ index.html
   └─ src/
      ├─ main.js
      └─ App.vue

🚀 本地開發

使用 Docker Compose（推薦）

# 啟動開發環境（支援熱更新）
docker compose up --build

# 前端：http://localhost:5173
# 後端：http://localhost:5000

手動啟動

後端：

cd backend
pip install -r requirements.txt
python app.py

前端：

cd frontend
npm install
npm run dev

📦 生產環境（Docker）

# 停止開發容器
docker compose down

# 啟動生產版本
docker compose up -d backend
docker compose up --build -d frontend-prod

# 前端：http://localhost:8080
# 後端：http://localhost:5000

☁️ 部署到 Firebase + Cloud Run

前置準備

1. 安裝必要工具：

npm i -g firebase-tools
# 並確保已安裝 gcloud CLI

2. 登入與設定：

gcloud auth login
firebase login
gcloud config set project YOUR_PROJECT_ID

3. 修改 .firebaserc 中的 YOUR_PROJECT_ID 為你的 GCP 專案 ID

部署後端到 Cloud Run

cd backend

# 建立容器映像
gcloud builds submit --tag gcr.io/YOUR_PROJECT_ID/flask-backend

# 部署到 Cloud Run
gcloud run deploy flask-backend \
  --image gcr.io/YOUR_PROJECT_ID/flask-backend \
  --platform managed \
  --region asia-east1 \
  --allow-unauthenticated \
  --port 5000

測試後端：

curl https://YOUR-CLOUD-RUN-URL/api/health
# 應回傳: {"status":"ok"}

部署前端到 Firebase Hosting

# 回到專案根目錄
cd ..

# 建置前端
cd frontend
npm ci
npm run build

# 部署到 Firebase
cd ..
firebase deploy --only hosting

完成後會得到 Firebase Hosting 網址（如 https://your-site.web.app）

🔧 設定說明

firebase.json

rewrites 部分將 /api/** 請求轉發到 Cloud Run 的 Flask 後端，實現同網域部署（無需處理 CORS）：

{
  "source": "/api/**",
  "run": {
    "serviceId": "flask-backend",
    "region": "asia-east1"
  }
}

環境變數

• 開發環境： VITE_API_BASE=http://localhost:5000
• 生產環境： 使用 Firebase Hosting 的反向代理，前端直接呼叫 /api

✅ 驗收清單

• docker compose up --build 啟動成功
• 瀏覽器開啟 http://localhost:5173
• 點擊「Call /api/hello」按鈕，顯示 {"message":"Hello from Flask! 🎉"}
• Backend health 顯示 ok
• Cloud Run 部署成功並可訪問 /api/health
• Firebase Hosting 部署成功並可正常呼叫 API

🛠 常見問題

想使用 Gunicorn（生產環境推薦）

修改 backend/Dockerfile：

FROM python:3.12-slim
WORKDIR /app
ENV PYTHONDONTWRITEBYTECODE=1 PYTHONUNBUFFERED=1 PIP_NO_CACHE_DIR=1
COPY requirements.txt .
RUN pip install --upgrade pip && pip install -r requirements.txt gunicorn
COPY app.py .
CMD exec gunicorn app:app --bind 0.0.0.0:${PORT} --workers 2 --threads 4 --timeout 120

自訂網域

在 Firebase Console → Hosting 中綁定你的網域並完成 DNS 驗證。

自動化部署

可使用 firebase init hosting:github 設定 GitHub Actions，自動部署前端。

📝 授權

MIT