在S3与CloudFront部署的多React应用中移除URL中的index.html

我之前在把多个React应用托管到同一个S3+CloudFront环境时，也碰到过一模一样的问题，给你几个亲测有效的解决思路，按优先级推荐：

方法1：配置S3静态网站托管 + CloudFront指向网站端点 #

这是最直接省心的方案，利用S3静态网站的默认索引文档功能：

• 打开S3控制台，找到你的目标存储桶，进入「Properties」标签，拉到最下方的「Static website hosting」，选择「Enable」：
  • 设置「Index document」为 index.html，「Error document」也建议设为 index.html（适配React的BrowserRouter路由刷新场景）
  • 保存后，你会得到一个S3网站端点（格式类似 your-bucket.s3-website-us-east-1.amazonaws.com）
• 回到CloudFront控制台，修改你的分发的Origin配置：
  • 把Origin域名从S3的REST端点（比如 your-bucket.s3.amazonaws.com）替换成刚才拿到的S3网站端点
  • 注意：Origin类型要选「Custom Origin」，而非「S3 Origin」
  • 配置Origin的HTTP端口为80，HTTPS端口为443，协议选「HTTPS only」或者「Match viewer」
• 最后在CloudFront的Behaviors里，确保路径模式覆盖你的子应用路径（比如 calculate/*），「Default Root Object」可以留空——因为S3网站端点会自动处理子目录的index.html请求

等CloudFront部署完成后，用户访问 https://{domain}/calculate/ 时，就会自动加载对应目录下的index.html了。

方法2：用Lambda@Edge做路径重写 #

如果不想修改S3的静态网站配置，可以用Lambda@Edge在请求阶段悄悄重写路径：

• 先在us-east-1区域创建Lambda函数（Lambda@Edge要求必须在这个区域创建），代码如下：

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;
    const uri = request.uri;
    
    // 规则：如果请求路径以/结尾，或者是无扩展名的路径（比如React路由），则重写到对应路径的index.html
    if (uri.endsWith('/') || !uri.includes('.')) {
        request.uri = uri.endsWith('/') ? `${uri}index.html` : `${uri}/index.html`;
    }
    
    callback(null, request);
};

• 发布这个Lambda函数的新版本，然后回到CloudFront的Behaviors页面，给对应的路径模式（比如 calculate/*）添加一个「Origin Request」触发的Lambda@Edge关联，选择刚才发布的Lambda版本
• 等待CloudFront分发部署完成后，用户访问 https://{domain}/calculate/ 时，请求会被自动重写到 /calculate/index.html，而且用户看不到URL的变化

方法3：配置CloudFront自定义错误响应（适合少量应用场景） #

如果你的子应用数量不多，也可以用CloudFront的错误响应来兜底：

• 进入CloudFront控制台的分发页面，点击「Error Pages」标签，创建自定义错误响应：
  • HTTP错误代码选 404 Not Found，自定义响应代码选 200 OK
  • 响应页面路径填 /calculate/index.html（每个子应用需要单独配置一条规则）
• 这个方法的原理是：当用户访问 /calculate/ 时，S3会返回404，CloudFront捕获到这个错误后，自动返回对应的index.html。缺点是灵活性差，应用多的话配置会很繁琐，还可能有缓存问题。

另外补充个小提醒：如果你的React用了BrowserRouter，上述方法1和方法2已经顺便解决了路由刷新的问题——所有路由请求都会被指向index.html，不会出现刷新404的情况。修改CloudFront配置后，记得等10-15分钟部署完成再测试，也可以用浏览器隐私模式避免缓存干扰。

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