AWS Elastic Beanstalk 与静态资源的分离部署实践指南-Golang-PHP中文网

AWS Elastic Beanstalk 与静态资源的分离部署实践指南

本文介绍如何将 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 托管

✅ 核心架构设计

feishu-dingtalk-bridge

打通飞书/钉钉开放API，实现日程同步、审批追踪、文档解析与智能待办分发的企业协同中枢

下载

前端域名：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 → 独立滚动更新。二者解耦、安全、可观测、可伸缩——这才是云原生时代弹性部署的正确打开方式。