AWS攻略——使用S3托管静态网页

Posted 2022-07-29 breaksoftware

        在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，便可以看到网页内容。