目录
在AWS上有很多部署静态网页的方式,比如使用EC2或者Lightsail。但是不管使用上述哪种方案,都需要预先部署如Nignx或者Apache等Http服务。这对纯前端同学来说可能有点复杂,而AWS提供了更简单的部署方式——只需要提供静态网页文件的“S3网页托管服务”。(转载请指明出于breaksoftware的csdn博客)
本文将带大家熟悉一下该方案的实施步骤。
创建存储桶
因为S3管理页面是不分区的——“全球”,所以在创建存储桶时,需要指定该存储桶所在的区域。这次部署的区域是us-east-1(弗吉尼亚北部),为了方便之后环节介绍的“自动化部署”,我们给该存储桶取名规则制定为“区域-项目-前/后端”,其中kronos是我们项目名称。由于我们是重新创建存储桶,所以不复制任何桶的设置。
在“设置权限”中取消勾选“阻止全部公共访问权限”
设置为“公有”
进入存储桶,在“权限”页面选中“存储桶策略”,并填入下面的配置
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::us-east-1-kronos-web/*"
}
]
}
设置“静态网站托管”
进入“属性”,点击“静态网站托管”。由于我们项目是Vue,且路由是History模式,所以需要将“索引文档”和“错误文档”都设置为“index.html”。这个设置尤其重要,否则History模式将无法使用。同时记录下“终端节点”的URL,我们将通过这个URL访问静态网页。
文件上传
由于文件不能打包上传,所以我们需要一个个,一层层上传静态网页的文件。
一个比较简单的方法是使用aws工具。我们进入dist文件夹所在的目录,执行如下指令
aws s3 sync dist --region us-east-1 s3://us-east-1-kronos-web/
最后我们访问上一步的URL,便可以看到网页内容。