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

2024-05-27 11:54:33

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

AWS攻略——使用S3托管静态网页相关推荐

AWS攻略——使用CodeBuild进行自动化构建和部署静态网页
首先声明下,使用"CodeBuild"部署并不是"正统"的方案,因为AWS提供了"CodeDeploy".如果不希望引入太多基础设施,可以考 ...
AWS攻略——使用CodeBuild进行自动化构建和部署Lambda（Python）
Aws Lambda是Amazon推出的"无服务架构"服务.我们只需要简单的上传代码,做些简单的配置,便可以使用.而且它是按运行时间收费,这对于低频访问的服务来说很划算.具体的介绍 ...
免费的html空间,免费HTML网页空间（每月200 GB 流量托管静态网页超简单）
免费HTML网页空间(每月200 GB 流量托管静态网页超简单) 二十几年前有个相当知名的网页空间服务「GeoCities」,可以说是早期网站服务的始祖,当年有非常多类似的网页托管服务,让使用者将制作 ...
Neocities 免费HTML 网站空间，每月200 GB 流量托管静态网页超简单
Neocities 免费HTML 网站空间,每月200 GB 流量托管静态网页超简单-第1张图片-小蜜蜂免费云主机二十几年前有个相当知名的网页空间服务「GeoCities」,可以说是早期网路服务的始 ...
AWS攻略——Peering连接VPC
文章目录创建IP/CIDR不覆盖的VPC 创建VPC 创建子网创建密钥对创建EC2 创建Peering 接受Peering邀请修改各个VPC的路由表修改美东us-east-1 pulic s ...
AWS攻略——VPC初识
大纲在网络里启动一台可以ssh上去的机器查看区域.VPC和子网创建EC2 连接 Web端连接客户端连接知识点参考资料 VPC是在AWS架构服务的基础,有点类似于我们在机房里拉网线和设置路由 ...
AWS攻略——一文看懂AWS IAM设计和使用
大纲 1 作用 2 初创公司IAM成长记 2.1 根用户(Root User) 2.2 用户(User) 2.2.1 管理员 2.2.2 普通用户 2.2.3 规模膨胀 2.3 用户组(User Gr ...
利用gitcafe托管静态网页
由于我的博客系统hexo就是托管在gitcafe上面,所以对于gitcafe和github就有着比较浓厚的兴趣,前段时间又把git学习了一下,算是刚好入了个门吧:在gitcafe上有一个gitcefe ...
AWS攻略——使用CodeCommit托管代码
除了我们熟悉的github,各大云厂商也有自己的代码托管服务.本文讲解如何在Amazon的CodeCommit中托管代码.(转载请指明出于breaksoftware的csdn博客) 根账户登录 AWS ...

最新文章

热门文章