S3 静态网站托管将所有路径路由到 Index.html [英] S3 Static Website Hosting Route All Paths to Index.html

问题描述

我使用 S3 来托管将使用 HTML5 pushStates 的 javascript 应用程序.问题是如果用户将任何 URL 加入书签，它不会解析为任何内容.我需要的是能够接受所有 url 请求并在我的 S3 存储桶中提供根 index.html，而不仅仅是执行完全重定向.然后我的 javascript 应用程序可以解析 URL 并提供正确的页面.

I am using S3 to host a javascript app that will use HTML5 pushStates. The problem is if the user bookmarks any of the URLs, it will not resolve to anything. What I need is the ability to take all url requests and serve up the root index.html in my S3 bucket, rather than just doing a full redirect. Then my javascript application could parse the URL and serve the proper page.

有没有办法告诉 S3 为所有 URL 请求提供 index.html 而不是进行重定向?这类似于通过提供单个 index.html 来设置 apache 来处理所有传入请求，如下例所示:https://stackoverflow.com/a/10647521/1762614.我真的很想避免运行网络服务器来处理这些路由.从 S3 开始做所有事情都非常有吸引力.

Is there any way to tell S3 to serve the index.html for all URL requests instead of doing redirects? This would be similar to setting up apache to handle all incoming requests by serving up a single index.html as in this example: https://stackoverflow.com/a/10647521/1762614. I would really like to avoid running a web server just to handle these routes. Doing everything from S3 is very appealing.

推荐答案

在 CloudFront 的帮助下，无需 url hack 即可轻松解决.

It's very easy to solve it without url hacks, with CloudFront help.

• 创建 S3 存储桶，例如:react
• 使用以下设置创建 CloudFront 分配:
  • 默认根对象:index.html
  • Origin Domain Name:S3 存储桶域，例如:react.s3.amazonaws.com
  • Create S3 bucket, for example: react
  • Create CloudFront distributions with these settings:
    • Default Root Object: index.html
    • Origin Domain Name: S3 bucket domain, for example: react.s3.amazonaws.com
    • HTTP 错误代码:403:禁止(404:未找到，如果是 S3 静态网站)
    • 自定义错误响应:是
    • 响应页面路径:/index.html
    • HTTP 响应代码:200:OK
    • 点击创建
    • HTTP Error Code: 403: Forbidden (404: Not Found, in case of S3 Static Website)
    • Customize Error Response: Yes
    • Response Page Path: /index.html
    • HTTP Response Code: 200: OK
    • Click on Create

    这篇关于S3 静态网站托管将所有路径路由到 Index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！