如何部署带WebSocket通信的Express+React(Vite)容器化应用至GCP/AWS

核心问题解答与部署步骤 #

1. 镜像推送：推两个独立镜像，而非单个 #

你需要分别推送前端和后端两个镜像到容器注册表（GCP用GCR，AWS用ECR），两者是独立服务，各自有独立生命周期和资源需求：

• 给每个镜像打标签：GCP格式示例为gcr.io/[你的项目ID]/backend:v1、gcr.io/[你的项目ID]/frontend:v1；AWS格式示例为[你的账号ID].dkr.ecr.[区域].amazonaws.com/backend:v1
• 推送命令示例：docker push gcr.io/[项目ID]/backend:v1

2. CORS问题解决 #

本地同网络的0.0.0.0仅适用于测试，部署到云环境后需针对性处理CORS：

• 方案一（推荐）：统一域名入口：用反向代理（Nginx、云负载均衡）将前后端挂载到同一域名下，比如前端用https://your-domain.com，后端WebSocket用https://your-domain.com/ws，彻底避免跨域问题。
• 方案二：后端配置CORS规则：在Express后端启用cors中间件，设置Access-Control-Allow-Origin为前端域名，同时开启credentials: true；Vite前端需对应设置withCredentials: true，WebSocket连接时使用完整的WSS地址。

3. 环境变量必须配置 #

禁止依赖硬编码的0.0.0.0，部署时通过环境变量传递关键地址：

• 前端（Vite）：设置VITE_WS_URL环境变量，指向后端WebSocket服务的公网地址（比如wss://your-backend-domain.com/ws），Vite会自动注入该变量到代码中。
• 后端：设置端口、数据库地址等环境变量，避免硬编码。
• 容器启动时传递变量：示例为docker run -e VITE_WS_URL=wss://xxx frontend-image，或在编排文件中定义。

部署方案选择 #

小流量/测试环境：无需Kubernetes #

如果是测试或低流量场景，用轻量方案即可：

• 云VM + Docker Compose（GCP Compute Engine、AWS EC2）：
  1. 在VM上安装Docker和Docker Compose。
  2. 拉取已推送的前后端镜像。
  3. 修改docker-compose.yaml，替换环境变量为VM的公网IP/域名。
  4. 执行docker-compose up -d启动服务。
• 托管容器服务（GCP Cloud Run、AWS ECS Fargate）：
  分别部署前后端服务，设置环境变量，Cloud Run支持WebSocket长连接（需设置超时时间最长900秒），无需手动管理VM。

生产环境/高流量场景：可选Kubernetes #

如果需要自动扩容、高可用、灰度发布等能力，用GKE（GCP）或EKS（AWS）：

• 为前后端分别创建Deployment和Service。
• 用Ingress（或云负载均衡）统一入口，配置WebSocket长连接超时（比如Nginx Ingress设置proxy-read-timeout: 300s）。
• 前端必须构建为静态文件，托管在GCP Cloud Storage/AWS S3，通过负载均衡指向静态资源和后端服务，禁止在生产环境运行Vite dev server。

关键注意事项 #

• 前端生产环境必须构建静态文件：npm run dev仅适用于开发，生产环境需执行npm run build生成压缩后的静态资源，用Nginx或云存储托管。
• WebSocket长连接配置：
  • 后端开启TCP keep-alive，避免连接被中间件断开。
  • 云服务层面设置超时时间：比如Cloud Run最长900秒，AWS ELB设置空闲超时为300秒以上。
• 安全配置：强制使用HTTPS/WSS协议，利用云平台自带的证书管理服务（GCP Managed SSL Certificates、AWS ACM）配置免费证书。

内容的提问来源于stack exchange，提问作者anoop chandran