相关疑难解决方法(0)

我将React网站build/文件夹部署到AWS S3存储桶中.

如果我去www.mywebsite.com,它可以工作,如果我点击a标签去项目和关于页面,它会引导我到正确的页面.但是,如果我复制并发送页面网址或直接转到类似的链接:www.mywebsite.com/projects,则返回404.

这是我的App.js代码:

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);

我正在尝试使用自定义域在 S3 中设置一个静态网站，并使用 CloudFront 处理 HTTPS。

问题是根路径可以正常工作，但子路径却不能。

显然，这都是关于我在两个地方都配置为index.html 的默认根对象。

• example.com-> example.com/index.html-工作正常
• example.com/about/-> example.com/about/index.html-因 NoSuchKey 错误而失败

有趣的是，如果我打开对 S3 存储桶的读取访问权限并使用 S3 URL，它工作得完全正常。

他们在一个AWS文档页面上讨论了这一点： https: //docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html，但他们甚至没有说解决方案，或者至少我没有说没能找到它。

但是，如果您定义默认根对象，则最终用户对发行版子目录的请求不会返回默认根对象。例如，假设 index.html 是您的默认根对象，并且 CloudFront 收到最终用户对 CloudFront 分配下的安装目录的请求：

http://d111111abcdef8.cloudfront.net/install/

即使安装目录中出现index.html 的副本，CloudFront 也不会返回默认根对象。

如果您将分配配置为允许 CloudFront 支持的所有 HTTP 方法，则默认根对象适用于所有方法。例如，如果您的默认根对象是 index.php 并且您编写应用程序以向域的根 ( http://example.com ) 提交 POST 请求，则 CloudFront 会将请求发送到 http://example.com /index.php。

CloudFront 默认根对象的行为与 Amazon S3 索引文档的行为不同。当您将 Amazon S3 存储桶配置为网站并指定索引文档时，即使用户请求存储桶中的子目录，Amazon S3 也会返回索引文档。（索引文档的副本必须出现在每个子目录中。）有关将 Amazon S3 存储桶配置为网站以及索引文档的更多信息，请参阅 Amazon Simple Storage Service 开发人员指南中的在 Amazon S3 上托管网站一章。 …