如何在Serverless框架中为React前端与Lambda函数端点共用域名？

我来帮你搞定这个问题！要让S3托管的React前端和Lambda函数共用同一个域名，核心思路是用AWS CloudFront作为统一的流量入口，通过路径规则区分前端静态资源请求和API请求，分别转发到S3和API Gateway（对应你的Lambda函数）。下面是一步步的实操指南：

1. 先搞定S3静态网站的基础配置 #

因为你用的是React单页应用，得确保S3能正确处理客户端路由：

• 在AWS控制台找到你的S3前端桶，启用静态网站托管
• 把“索引文档”设为index.html，错误文档也设为index.html（这一步很重要，不然React Router的非根路径会返回404）
• 配置桶的权限，确保CloudFront能访问桶内资源（推荐用OAC（Origin Access Control）代替旧的桶策略，安全性更高）

2. 用Serverless框架配置Lambda与API Gateway #

在你的Serverless项目的serverless.yml里，给Lambda函数配置API Gateway触发事件，指定API路径前缀（比如/api/*），这样所有API请求都会带上这个前缀，方便后续CloudFront路由区分。

示例配置片段：

service: my-app-api

provider:
  name: aws
  runtime: nodejs18.x
  stage: prod
  region: us-east-1

functions:
  getUser:
    handler: handler.getUser
    events:
      - http:
          path: api/users/{id}
          method: get
          cors: true  # 启用CORS，避免前端跨域问题
  createUser:
    handler: handler.createUser
    events:
      - http:
          path: api/users
          method: post
          cors: true

部署这个配置后，你会得到一个API Gateway的域名，记下来后面要用。

3. 配置CloudFront作为统一入口 #

这是实现同域名的核心步骤，CloudFront会根据请求路径把流量分发到不同的源：

1. 创建CloudFront分发：
   • 添加两个Origin：
     • 第一个Origin：选择你的S3静态网站域名（格式类似your-bucket.s3-website-us-east-1.amazonaws.com），配置OAC权限确保只有CloudFront能访问S3
     • 第二个Origin：选择你的API Gateway域名（格式类似xxxxxx.execute-api.us-east-1.amazonaws.com），Origin Path填你的Serverless阶段名（比如/prod）
2. 配置缓存行为规则：
   • 第一条规则：路径模式设为/api/*，关联到API Gateway的Origin。缓存策略选CachingDisabled（API请求一般不需要缓存，按需调整），允许的HTTP方法选GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE，同时启用CORS
   • 第二条规则：路径模式设为/*，关联到S3的Origin。缓存策略选适合静态资源的（比如默认的CachingOptimized），并在“错误页面”设置里添加一条规则：HTTP错误码404，响应页面路径/index.html，HTTP响应码200（处理React路由的404问题）
3. 配置自定义域名：
   • 在CloudFront的“自定义域名”部分，添加你的目标域名（比如yourdomain.com）
   • 上传SSL证书：用AWS Certificate Manager（ACM）在us-east-1区域申请证书（CloudFront只认这个区域的证书），然后关联到你的CloudFront分发

4. 前端与API的适配调整 #

• React前端调用API时，直接用相对路径即可，比如fetch('/api/users/1')，不用写完整的API Gateway域名
• 如果你用了create-react-app，记得在package.json里设置"homepage": "."，避免build后的资源路径错误；或者在build时指定PUBLIC_URL环境变量

5. 域名解析指向CloudFront #

到你的域名服务商（比如AWS Route53），创建一条A记录，记录类型选“别名”，指向你的CloudFront分发域名，这样用户访问yourdomain.com时，流量就会先到CloudFront，再被分发到对应的源。

一些额外注意事项 #

• 每次更新前端静态资源后，记得在CloudFront里刷新缓存，不然用户可能看到旧内容
• 确保API Gateway的CORS配置正确，除了在serverless.yml里设置cors: true，也可以在Lambda响应里手动添加CORS头：

  return {
    statusCode: 200,
    headers: {
      'Access-Control-Allow-Origin': '*', // 或者指定你的域名
      'Access-Control-Allow-Credentials': true
    },
    body: JSON.stringify(data)
  };
  

• 测试时可以用CloudFront的测试工具，或者直接访问你的域名，分别测试前端页面和API接口是否正常响应

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