本文介绍如何将 go 后端 api（部署于 elastic beanstalk）与 vue 前端（构建后带哈希的静态资源）彻底解耦，通过 cloudfront + s3 实现高效、低成本、可版本化、全站 https 的前后端分离架构。
本文介绍如何将 go 后端 api（部署于 elastic beanstalk）与 vue 前端（构建后带哈希的静态资源）彻底解耦，通过 cloudfront + s3 实现高效、低成本、可版本化、全站 https 的前后端分离架构。
在现代 Web 应用开发中，前后端分离已成为标准范式。但当使用 AWS Elastic Beanstalk（EB）托管 Go 编写的 RESTful API 时，若将 Vue 构建产物（如 app.7a2bba27be158abd2c91.js）直接打包进同一容器镜像，会导致每次前端样式或 HTML 微调都触发完整容器重建与滚动更新——不仅延长部署时间，还增加 EC2 实例替换频率（丢失 CPU 积分）、浪费计算资源，且违背“关注点分离”原则。
最佳实践：静态资源交由 S3 + CloudFront 托管，API 专注 EB 托管
✅ 核心架构设计
- 前端域名：
https://www.example.com→ 指向 CloudFront 分发（Origin 为 S3 静态网站桶） - 后端域名：
https://api.example.com→ 指向 Elastic Beanstalk 环境的 CNAME（如myapp-env.eba-xxxx.us-east-1.elasticbeanstalk.com） - 全链路强制 HTTPS：CloudFront 配置 Viewer Protocol Policy 为 Redirect HTTP to HTTPS；EB 环境启用 SSL 终止（通过 ALB 关联 ACM 证书）
- API 版本化：
/v1/users,/v2/orders等路径便于灰度与兼容性管理
✅ Vue 构建与部署自动化（CI/CD 示例）
假设使用 GitHub Actions，vue.config.js 已配置 publicPath: '/' 且输出至 dist/，则可编写如下部署流程：
# .github/workflows/deploy-frontend.yml
name: Deploy Frontend to S3 + Invalidate CloudFront
on:
push:
branches: [main]
paths: ['src/**', 'vue.config.js']
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '20'
- run: npm ci
- run: npm run build # 输出至 dist/
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v2
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: us-east-1
- name: Sync dist to S3
run: |
aws s3 sync ./dist/ s3://my-frontend-bucket/ \
--delete \
--cache-control "max-age=31536000,public" \
--exclude "*" \
--include "*.js" \
--include "*.css" \
--include "*.png" \
--include "*.jpg" \
--include "*.svg" \
--include "index.html"
- name: Invalidate CloudFront Cache
run: |
aws cloudfront create-invalidation \
--distribution-id ${{ secrets.CF_DISTRIBUTION_ID }} \
--paths "/*"⚠️ 关键注意事项
- S3 桶策略必须允许 CloudFront 以 OAI（Origin Access Identity）方式读取，禁止公开
GET，确保资源仅经 CDN 访问；index.html的 Cache-Control 设为no-cache或max-age=0，避免 HTML 更新被浏览器/CDN 缓存导致哈希引用失效；- Vue Router 使用
history模式时，需在 S3 静态网站配置「错误文档」为index.html，并配合 CloudFront 的Cache Behavior设置Viewer Protocol Policy = HTTPS Only和Allowed HTTP Methods = GET, HEAD, OPTIONS；- EB 后端无需感知前端部署路径：所有
/api/*请求由 Nginx/ALB 重写或客户端明确指向https://api.example.com/v1/...，完全规避跨域（CORS）问题。
✅ Elastic Beanstalk 后端零改造适配
Go 应用保持原生 HTTP 服务（如 http.ListenAndServe(":8080", handler)），EB 自动注入 PORT 环境变量并代理至该端口。只需在 .ebextensions/01-nginx.config 中微调反向代理（如需处理 /health 路径）：
files:
"/etc/nginx/conf.d/elasticbeanstalk/01-custom.conf":
mode: "000644"
owner: root
group: root
content: |
location /health {
proxy_pass http://127.0.0.1:8080;
}最终效果：前端修改 → git push → 30 秒内全球生效；后端迭代 → EB eb deploy → 独立滚动更新。二者解耦、安全、可观测、可伸缩——这才是云原生时代弹性部署的正确打开方式。
