Question

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

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

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

有人能建议我做些显而易见的尝试（解决还是给我更多分析）？我是AWS和React的新手。除此以外，该网站似乎运行正常。

非常感谢：）

Answer 1

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

HTTP错误代码：404

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

检查自定义错误响应设置

响应页面路径：/index.html

HTTP响应代码：200

enter image description here

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

Answer 2

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

Answer 3

这对我有用。

我用前缀＃！/

更新我的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/

灯塔不再与网站一起使用-错误404

3 个答案: