Amazon S3 gzipped 文件获取不正确的元数据并导致错误
Amazon S3 gzipped files getting incorrect metadata and causing error
我的静态文件是从 Amazon S3 提供的。我正在为 CI/CD 使用 circleci 来部署我的文件。文件按预期添加到 s3 存储桶中，但是当我访问静态网站 link 时，我看到一个空白页面并显示控制台错误 "Uncaught SyntaxError: Unexpected token ILLEGAL".
通过一些调查（参见 this link 作为示例）我发现问题出在元数据中。添加的 js 文件的内容类型为 application/javascript 而不是 text/js。当我手动进入我的存储桶并单击单个文件时，转到“属性”，然后转到“元数据”，然后删除现有的内容类型并为所有 js 添加值为 text/js 的行 Content-Type gz 文件，网站开始正常显示。唯一添加的不是 js 文件的文件是 index.html，并且该文件获得了正确的元数据 (text/html)。
当我切换内容类型时它起作用了，我感到非常兴奋，以为我解决了这个问题。但是，当我重新部署该应用程序时，再次添加了同样不正确的元数据。我找到了一个解决方案，即在部署期间添加值为 text/js 的 content-type 标记。这确实可以获取与 js.gz 文件关联的正确内容类型，但 index.html 文件也正在部署。由于 index.html 文件也得到了 text/js 文件，我们得到了错误 "This site can't be reached"。
有没有人有解决方案的想法？我正在努力寻找一种动态选择一种或另一种内容类型的方法，但我想知道是否有更好的解决方案。该应用程序正在通过 CloudFront 分发。
感谢您的帮助！
这是我的 circleci config.yml 部署的结尾：
- 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
更新：
我想我找到了一个解决方案，方法是添加标签以按扩展名包含或排除文件，如下所示。
"deploy-html": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.html --include *.gz --delete --content-encoding gzip --content-type text/js",
"deploy-js": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.js --include *.html --content-encoding gzip --content-type text/html",
"deploy": "yarn build && yarn run deploy-html && yarn run deploy-js"
但是，这使得它们通常不可用，因此会导致错误：
Unknown options: server.js,webpack.common.js,webpack.dev.js,webpack.prod.js
我通过添加所有内容然后更新元数据找到了解决方案。
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 提供的。我正在为 CI/CD 使用 circleci 来部署我的文件。文件按预期添加到 s3 存储桶中，但是当我访问静态网站 link 时，我看到一个空白页面并显示控制台错误 "Uncaught SyntaxError: Unexpected token ILLEGAL".
通过一些调查（参见 this link 作为示例）我发现问题出在元数据中。添加的 js 文件的内容类型为 application/javascript 而不是 text/js。当我手动进入我的存储桶并单击单个文件时，转到“属性”，然后转到“元数据”，然后删除现有的内容类型并为所有 js 添加值为 text/js 的行 Content-Type gz 文件，网站开始正常显示。唯一添加的不是 js 文件的文件是 index.html，并且该文件获得了正确的元数据 (text/html)。
当我切换内容类型时它起作用了，我感到非常兴奋，以为我解决了这个问题。但是，当我重新部署该应用程序时，再次添加了同样不正确的元数据。我找到了一个解决方案，即在部署期间添加值为 text/js 的 content-type 标记。这确实可以获取与 js.gz 文件关联的正确内容类型，但 index.html 文件也正在部署。由于 index.html 文件也得到了 text/js 文件，我们得到了错误 "This site can't be reached"。
有没有人有解决方案的想法？我正在努力寻找一种动态选择一种或另一种内容类型的方法，但我想知道是否有更好的解决方案。该应用程序正在通过 CloudFront 分发。
感谢您的帮助！
这是我的 circleci config.yml 部署的结尾：
- 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
更新：
我想我找到了一个解决方案，方法是添加标签以按扩展名包含或排除文件，如下所示。
"deploy-html": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.html --include *.gz --delete --content-encoding gzip --content-type text/js",
"deploy-js": "yarn build && aws s3 sync dist/ s3://[bucket name] --exclude *.js --include *.html --content-encoding gzip --content-type text/html",
"deploy": "yarn build && yarn run deploy-html && yarn run deploy-js"
但是，这使得它们通常不可用，因此会导致错误：
Unknown options: server.js,webpack.common.js,webpack.dev.js,webpack.prod.js
我通过添加所有内容然后更新元数据找到了解决方案。
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