如何在Google Cloud部署Flask后端与React前端？

1. Cloud Build + Cloud Run 能否结合docker-compose部署？ #

Cloud Run本身是单容器无服务器服务，不直接支持docker-compose的多容器部署。不过可以用Cloud Build作为构建工具，先通过docker-compose辅助构建前后端镜像，再分别推送到Artifact Registry，最后部署到两个独立的Cloud Run实例——本质还是拆分服务，没法直接用docker-compose完成完整部署流程。

2. 部署两个独立Cloud Run实例（推荐方案） #

这是最贴合Google Cloud Serverless架构的方式，自动扩缩容、按需付费，运维成本极低，适合新手快速上线。

前端（React）部署步骤 #

• 先在本地构建生产环境包：

  npm run build
  

• 编写Dockerfile（用Nginx托管静态文件）：

  FROM nginx:alpine
  COPY build /usr/share/nginx/html
  EXPOSE 80
  CMD ["nginx", "-g", "daemon off;"]
  

• 用Cloud Build构建镜像并推送到Artifact Registry：

  gcloud builds submit --tag us-central1-docker.pkg.dev/[你的项目ID]/react-frontend/react-app:v1
  

• 部署到Cloud Run：

  gcloud run deploy react-frontend --image us-central1-docker.pkg.dev/[你的项目ID]/react-frontend/react-app:v1 --platform managed --region us-central1 --allow-unauthenticated
  

后端（Flask）部署步骤 #

• 编写Dockerfile（用Gunicorn作为WSGI服务器）：

  FROM python:3.9-slim
  WORKDIR /app
  COPY requirements.txt .
  RUN pip install --no-cache-dir -r requirements.txt
  COPY . .
  EXPOSE 5000
  CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"]
  

• 构建并推送镜像：

  gcloud builds submit --tag us-central1-docker.pkg.dev/[你的项目ID]/flask-backend/flask-api:v1
  

• 部署到Cloud Run：

  gcloud run deploy flask-backend --image us-central1-docker.pkg.dev/[你的项目ID]/flask-backend/flask-api:v1 --platform managed --region us-central1 --allow-unauthenticated
  

跨域处理 #

前端需要配置后端的Cloud Run服务URL，或者在Flask后端通过flask-cors库添加跨域支持：

from flask_cors import CORS
app = Flask(__name__)
CORS(app)

3. 用VM实例运行docker-compose（适合需完全控制环境的场景） #

如果想完全保留本地docker-compose的运行逻辑，可以选择VM实例，但需要自己管理服务器的运维、扩缩容等，适合对环境有特殊要求的场景。

操作步骤 #

• 创建Compute Engine VM实例：选择适合的机器类型（比如e2-micro在免费额度内），勾选“允许HTTP/HTTPS流量”。
• 登录VM：

  gcloud compute ssh [VM名称] --zone us-central1-a
  

• 安装Docker和docker-compose：

  # 安装Docker
  sudo apt update && sudo apt install docker.io -y
  sudo systemctl enable docker
  sudo usermod -aG docker $USER
  # 退出重新登录后生效权限
  
  # 安装docker-compose
  sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
  sudo chmod +x /usr/local/bin/docker-compose
  

• 上传项目文件：可以用gcloud compute scp把本地项目传到VM，或者直接在VM上Git克隆代码仓库。
• 启动服务：

  docker-compose up -d
  

• 配置防火墙：在Google Cloud控制台添加防火墙规则，开放前端（如80端口）和后端（如5000端口）的外部访问权限，或者用Nginx做反向代理统一入口。

方案对比 #

内容的提问来源于stack exchange，提问作者Ethan Shapiro