8

我有一个使用 SSL 托管在 AWS（使用 CloudFront 的 S3）上的网站。当我通过 Chrome 执行 Lighthouse 测试时，该测试不适用于除主页之外的任何页面。它针对除性能之外的所有测试返回问号并返回以下错误：

存在影响 Lighthouse 运行的问题： Lighthouse 无法可靠地加载您请求的页面。确保您正在测试正确的 URL，并且服务器正确响应所有请求。状态码：404。”

这是一个 ReactJS SPA 网站，Lighthouse 确实通过调试工作，但当我尝试 URL 中的 S3 或 cloudfront 域或我购买的实际域时不起作用。它是否可以正常工作我不能 100% 确定，因为我可能只在主页上尝试过它并假设它适用于所有页面。

任何人都可以建议我可以尝试的任何明显的事情（解决或给我更多分析）？我对 AWS 和 React 还很陌生。除此以外，该网站似乎运行良好。

非常感谢 ：）

4

3 回答 3

7

终于把这个整理好了。这是 AWS S3 和 CloudFront 处理错误的方式的问题。由于托管在 AWS 上的 React 网站不会链接到存储桶中保存的实际文件（例如 www.example.com/testpage，它会尝试路由到 testpage），因此会出错。现在您可以在您的存储桶中设置一个指向 index.html 页面的错误文档，因此如果出现错误，它将重新路由，然后 react 将路由到实际页面。所以，我已经设置了这个，但它仍然失败。我发现您还可以在 CloudFront 中设置一个错误文档，通过添加它，Lighthouse（和 Google Search Console）终于开始工作（通过 CloudFront 并使用我的实际域）。但是，它不能通过 S3 存储桶域工作。不知道为什么不这样做，但这对我来说并不重要，因为它可以正确地路由到我想要的地方。

于 2019-01-15T10:59:38.543 回答
1

只需添加自定义错误响应。像这样（查看图片以供参考）：

HTTP 错误代码：404

错误缓存最小 TTL（秒）：0

检查自定义错误响应设置

响应页面路径：/index.html

HTTP 响应代码：200

在此处输入图像描述

基本上让框架处理路由设置。

于 2020-04-19T01:42:10.887 回答
1

这对我有用。

我用前缀 #!/ 更新了我的 404 Url 选项

必须更新我的存储桶路由规则

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>myhostname.com</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>myhostname.com</HostName>
            <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

在此之后，我在 App.jsx 中添加了一个小检查以重新路由此类 URL

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
    history.replace(path);
}

参考： https ://viastudio.com/hosting-a-reactjs-app-with-routing-on-aws-s3/

于 2020-03-13T07:12:20.613 回答