Question

我的静态文件从Amazon S3提供。我正在为我的CI / CD使用circleci来部署我的文件。这些文件正按预期方式添加到s3存储桶中，但是当我转到静态网站链接时，我看到一个空白页面，其中显示控制台错误“ Uncaught SyntaxError：Unexpected token ILLEGAL”。

通过一些侦查（作为示例，请参见this link），我发现问题出在元数据中。 js文件的内容类型为application/javascript，而不是text/js。当我手动进入存储桶并单击各个文件时，请依次转到“属性”和“元数据”，并删除现有的内容类型，并为所有js添加行Content-Type，其值为text/js {1}}个文件，网站开始按原样显示。不是唯一要添加的js文件的文件是gz，并且该文件获取了正确的元数据（index.html）。

当我切换内容类型时以为我解决了这个问题，我为此感到非常兴奋。但是，当我重新部署该应用程序时，再次添加了相同的不正确的元数据。我找到了一种解决方案，即在部署期间添加值为text/html的{{1}}标签。这样做确实可以获取与content-type文件关联的正确内容类型，但是还正在部署index.html文件。由于index.html文件还包含text/js文件，因此出现错误“无法访问此站点”。

有人对解决方案有任何想法吗？我正在寻找一种动态选择一种内容类型或另一种内容类型的方法，但是我想知道是否有更好的解决方案。该应用程序正在通过CloudFront分发。

谢谢您的帮助！

这是我的circleci config.yml部署完成的结尾：

js.gz

第text/js行运行以下命令：

      - run: sudo apt-get update && sudo apt-get install -y python-dev
      - run: sudo curl -O https://bootstrap.pypa.io/get-pip.py
      - run: sudo python get-pip.py
      - run: sudo pip install awscli --upgrade
      - run: aws --version
      - run: aws s3 ls
      - run: yarn run deploy

在yarn run deploy中添加的更新行：

yarn build && aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip

更新：

我想我找到了一种解决方案，方法是添加标签以通过扩展名包含或排除文件，如下所示。

content-type

但是，这通常使它们不可用，从而导致错误：

yarn build && aws s3 sync dist/ s3://[bucket] --delete --content-encoding gzip --content-type text/js

Answer 1

我找到了解决方案，添加了所有内容，然后更新了元数据。

package.json脚本：

"deploy": "aws s3 sync dist/ s3://dallas-website --delete --content-type text/js --content-encoding gzip",
"update-metadata": "aws s3api copy-object --bucket dallas-website --content-type text/html --copy-source dallas-website/index.html --key index.html --metadata-directive REPLACE"

config.yml步骤：

- run: yarn run build
- run: yarn run deploy
- run: yarn run update-metadata

Amazon S3压缩文件获取不正确的元数据并导致错误

1 个答案: