咨询：基于S3与CloudFront实现多SPA独立部署及子路径访问方案

我刚好实操过类似的多SPA部署方案，用S3+CloudFront完全能满足你的需求——既保证三个应用独立部署、权限隔离，又能通过主域名的不同路径统一访问。下面是一步步的实现细节和关键配置要点：

核心是给每个SPA分配独立的S3存储桶，搭配各自的CloudFront分发（方便独立配置缓存、安全规则），再通过一个主CloudFront分发作为入口，把不同路径的请求路由到对应的应用分发/S3桶。这样既实现了myproduct.com、myproduct.com/signup、myproduct.com/admin的统一访问，又能单独部署每个SPA，互不影响。

1. S3存储桶配置（每个SPA独立隔离） #

三个应用对应三个独立的S3桶，命名建议清晰好区分：

• myproduct-main：托管主应用（对应myproduct.com根路径）
• myproduct-signup：托管注册应用（对应/signup路径）
• myproduct-admin：托管管理应用（对应/admin路径）

每个桶的关键配置：

• 启用静态网站托管：设置索引文档为index.html，错误文档也设为index.html（SPA的前端路由需要 fallback 到首页）
• 锁死访问权限：禁止桶公开访问，只允许对应的CloudFront分发通过*OAI（Origin Access Identity）*访问。示例桶策略（替换占位符）：

  {
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
      {
        "Sid": "AllowCloudFrontAccess",
        "Effect": "Allow",
        "Principal": {
          "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity YOUR_OAI_ID"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
      }
    ]
  }
  

• 上传构建产物：把每个SPA的打包文件（比如build/目录下的内容）上传到对应桶的根目录。

2. CloudFront分发配置（独立管控+主入口路由） #

2.1 为每个SPA创建独立CloudFront分发 #

给每个应用单独建CloudFront分发，这样可以独立配置缓存策略、WAF防护、SSL证书，也方便单独触发缓存失效：

• 源设置：选择对应的S3桶，关联刚才创建的OAI（确保只有CloudFront能访问桶内容）
• 默认根对象：设为index.html，用户直接访问分发域名时会加载首页
• 缓存行为：默认行为转发所有HTTP方法，缓存策略选CachingOptimized（按需调整）；如果需要处理SPA的深层路由，比如/signup/profile，可以搭配Lambda@Edge（在请求阶段判断路径，返回对应桶的index.html）
• SSL证书：用AWS Certificate Manager（ACM）在us-east-1区域申请包含myproduct.com的证书（CloudFront只认us-east-1的证书）
• 自定义域名：暂时可以不设置，后续通过主分发路由访问。

2.2 创建主CloudFront分发（统一入口） #

这个分发是用户访问myproduct.com的唯一入口，负责把不同路径的请求转发到对应应用：

• 默认源：指向主应用的S3桶（或者主应用的CloudFront分发，更灵活）
• 缓存行为配置：
  • 默认行为：匹配/*，转发到主应用的源，处理根路径请求
  • 添加行为1：路径模式设为/signup/*，转发到注册应用的CloudFront分发域名，关键要设置路径转换——把/signup/*转换为/*，这样注册应用的资源（比如/signup/js/app.js）会被映射到注册桶的/js/app.js，能正确加载
  • 添加行为2：路径模式设为/admin/*，同理转发到管理应用的CloudFront分发，路径转换设为/*
• SSL证书：同样用us-east-1区域的myproduct.com证书
• 自定义域名：设置为myproduct.com
• 错误页面：把404、403错误重定向到index.html，保证SPA路由正常工作

3. DNS配置（绑定主域名） #

不管用Route 53还是第三方DNS服务，把myproduct.com的A记录和AAAA（IPv6）记录设置为别名记录，指向主CloudFront分发的域名（比如d123456abcdef.cloudfront.net）。别名记录不需要设置TTL，AWS会自动管理解析。

4. 优化独立部署流程 #

为了让每个应用的部署更高效、安全：

• 给每个SPA搭独立的CI/CD流水线（比如GitHub Actions、GitLab CI），只负责把构建产物上传到对应S3桶，然后触发该应用CloudFront分发的缓存失效
• 给每个流水线分配最小权限的IAM角色，确保只能访问对应的S3桶和CloudFront分发，避免越权
• 管理应用可以额外加WAF规则，比如限制访问IP、只允许登录用户访问，提升安全性

关键踩坑点提醒 #

• SPA路由 fallback：每个CloudFront分发都要把错误页面指向index.html，不然用户刷新深层路由会出现404
• 路径转换必须加：主分发转发/signup/*到注册应用时，一定要去掉/signup前缀，不然S3桶找不到对应资源
• OAI必用：绝对不能开S3桶的公开访问，用OAI既能保证CloudFront正常访问，又能防止数据泄露
• ACM证书区域：CloudFront要求证书必须在us-east-1区域，哪怕你的S3桶在其他区域也要在这里申请

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