我的静态文件从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
答案 0 :(得分:0)
我找到了解决方案,添加了所有内容,然后更新了元数据。
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