托管在 s3 意外令牌上的 React 应用程序 <答案

【问题标题】：React app hosted on s3 unexpected token <托管在 s3 意外令牌上的 React 应用程序 <
【发布时间】：2018-07-14 16:47:12
【问题描述】：

我正在使用无服务器来部署我的后端和前端。我的前端正在使用创建反应应用程序。我相信在我做了以下更改后

<img className="svg-width" src="/img/Icons/photographer-camera.svg" alt="camera icon" />



<img className="svg-width" src="/img/icons/photographer-camera.svg" alt="camera icon" />

我将 Icons/ 更改为 icons/ 的地方出现以下问题：

Uncaught SyntaxError: Unexpected token

在我的 s3 存储桶中，我导航到 img/ 并验证我的目录对于图标也是小写的。

语法错误的问题文件是我域的/static/js/main.977eb738.js 下的main.977eb738.js。但是当我去我的桶时，我看不到那个 js 文件。我看到了

它抱怨的文件中的代码是 create react app 样板中 public/index.html 中的 index.html。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#000000">
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

还有一点需要注意的是，这在本地甚至在移动设备上都可以正常工作。我认为这可能是云端缓存，所以我等了一整天，仍然无法找到这个错误的根源。

【问题讨论】：

没有理由等待一整天。只需通过将 /* 指定为路径来创建整个分配的 CloudFront invalidation。等待它完成，然后重新测试。此外，Age 和 X-Cache 响应标头可让您了解 CloudFront 正在做什么。如果Age 不存在并且您看到X-Cache: Miss from Cloudfront，则该对象不在缓存中。

标签： reactjs amazon-s3 npm amazon-cloudfront serverless-framework

【解决方案1】：

我遇到了同样的问题。我测试了隐身模式，并且在进行缓存失效后，该站点在 inco 中运行良好，就像迈克尔在第一条评论中所说的那样。看起来它是 Cloudfront 缓存旁边的浏览器缓存。

我能够通过清除前一天的浏览器 cookie/数据来解决此问题。

【讨论】：

困扰了我一天，现在想知道为什么我的网站在我尝试托管它时空了，你是救星！
我遇到了同样的问题，清除浏览器上的缓存可以达到预期的效果，但是如何在所有其他客户的浏览器上修复它？非常感谢！

【解决方案2】：

我建议任何直接上传到 AWS S3 存储桶的人清除 CloudFront 边缘缓存。

使用 AWS CLI 可以通过以下行来完成：

aws cloudfront create-invalidation --distribution-id YOURID --paths "/*"

为了找到 CloudFront 分配 ID，请在 AWS 控制台中导航到 cloudFront。

在此处阅读更多信息：Invalidating Files

【讨论】：

【解决方案3】：

我遇到了类似的问题。我没有使用无服务器（AWS lambda）。发生的事情是在我的build/index.html 内部，它在链接的hrefs 和脚本的src 标记处失败了。
所以，我有
<link href="/static/css/main.866f5359.chunk.css" rel="stylesheet">
并将其更改为
<link href="https://s3-us-west-2.amazonaws.com/fullthrottle-labs-react-task/static/css/main.866f5359.chunk.css" rel="stylesheet">，
对于脚本也是如此。

所以，我没有在 build/index.html 中提供相对路径，而是提供绝对路径对我有用。

【讨论】：