Question

我正在使用servereless来部署我的后端和前端。我的前端正在使用create react app。我相信在做了以下更改之后

<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" />

我将图标/ 更改为图标/ ，我收到以下问题：

未捕获的SyntaxError：意外的标记＆lt;

在我的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>

还有一点需要注意的是，这在本地运行良好，甚至在移动设备上运行良好。我认为这可能是云端缓存，所以我等了一整天仍然无法找到这个错误的底部。

Answer 1

我遇到了同样的问题。我进行了隐身测试，并且在执行缓存无效后，该站点在inco中工作正常，就像迈克尔在第一条评论中所述。看起来就像浏览器缓存和Cloudfront缓存一样。

我能够清除前一天的浏览器Cookie /数据来解决该问题。

Answer 2

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

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

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

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

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

Answer 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中给出相对路径，不如给出绝对路径对我有用。

在s3意外令牌上托管的React app＆lt;

3 个答案: