AWS S3 入门教程

AWS S3 是亚马逊开发的专为从任意位置存储和检索任意数量的数据而构建的对象存储。AWS S3 本身也可以托管静态页面。

本文就以 Thinkster 的开源 App —— RealWorld App Angular 为例，完成一个简单留言系统的静态资源的部署和发布。

1.安装依赖及编译

从仓库地址上克隆代码到本地之后，通过安装依赖、安装@angular/cli、本地启动服务、编译为发布版四个步骤，即可完成项目本地的测试和编译。

1.1.安装依赖

npm install

1.2.安装 @angular/cli

npm install -g @angular/cli

1.3.本地启动服务

ng serve

1.4.编译为发布版

angular-cli 集成了 webpack ，因此只需要使用内置 build 命令即可完成前端资源的打包。最后编译好的资源会存储在项目路径 dist/ 文件夹下。

ng build --prod

2. AWS S3 配置

登陆 AWS S3 管理控制台，进行存储桶配置。这里值得注意的是有五个步骤：新建存储桶名称、存储桶属性配置、权限设置、存储桶策略、上传代码。

2.1.新建存储桶

存储桶名称必须在所属区域唯一。

2.2.存储桶属性配置

在存储桶属性中，选中静态网站托管，设置使用此存储桶托管网站。设置索引文档为主页地址。记录此时显示的 API EndPoint 作为网站的主页入口。

2.3.权限设置

在存储桶权限中，设置公有访问设置，管理公有存储桶策略。打开阻止新的公有存储桶策略 (推荐)。这个权限的开放会限制存储桶共有策略。

2.4.存储桶策略

在存储桶权限中，设置存储桶策略。注意替换这里的存储桶名称。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::Your_Bucket_Name/*"
            ]
        }
    ]
}

2.5.上传代码

可以通过控制台上传代码，也可以通过命令行工具 AWS CLI 上传。控制台的模式比较简单，只需选择你刚刚编译完成的代码，点击上传即可。

3.检验你的成果

网站输入你在存储桶属性配置中记录的 API EndPoint。若成果展现了页面，说明你已经的静态网站已经部署完毕。

4.参考链接

亚马逊官方文档——设置静态网站

How to Host a Website on S3 Without Getting Lost in the Sea