中国区部署 Web 前端到 S3 和 Cloudfront

现代应用通常采用前、后端分离的架构，分离后的前端应用通常以 HTML + CSS + Javascript 的形式存在，通过 HTTP 服务器将这些静态资源提供给用户的浏览器，并在其中运行，再配合后端各个微服务面向前端的 API 动态加载数据组成应用的整体。虽然 HTTP 服务器可以提供前端应用的静态资源，但是为了更快的加载速度和更好的使用体验，现在，静态资源几乎都会使用 CDN（内容分发网络）进行分发。这样既可以减轻 HTTP 服务器的压力，又可以加快前端应用的加载速度，还可以在全球不同地点提供几乎一致的使用体验。在 AWS 上，Amazon S3 可以直接通过 HTTP 协议对外提供资源，节省了 HTTP 服务器的成本，配合 CDN 服务 CloudFront 即可实现前端应用的快速部署。

Amazon S3 是 AWS 上使用最为广泛的对象存储服务，支持直接将存储在 S3 数据桶的 HTML、CSS、Javascript 等资源通过 HTTP 协议对外暴露，让用户可以直接通过 S3 获取到前端应用。Amazon CloudFront 是 AWS 上的 CDN 服务，它可以将 S3 设置为分发的对象，将 S3 上的资源通过 AWS 分布在世界各地的边缘节点将内容提供给用户。同时，CloudFront 还提供了 S3 不支持的 HTTPS 协议，让前端应用更加安全。然而由于中国区的一些特殊情况，在此使用 S3 + CloudFront 需要一些不同于 Global 的额外配置，下文将详细描述操作步骤，帮助有需要的人在 AWS 中国区优雅地部署前端应用。

1. 建立 S3 数据桶

注意：需要设置阻止公开访问。

2. 建立 Route 53

红框内输入以备案的域名。

3. 建立 CloudFront 分配

源选择存放前端资源的 S3 桶，桶中如果没有子文件夹则留空源路径输入框。来源访问选择“遗留访问身份”，点击“建立新的 OAI”，下面选择“否，我将更新存储桶策略”。

在备用域名中添加刚才在 Route 53 添加的域名，默认根对象填写 index.html （根 HTML 文件文件名）。

建立完成后，进入“源”标签页，记下表格中 Origin access 的值，如图红框所示。

4. 更新 S3 桶策略并保存

代码如下（替换下面纯大写字符串）：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws-cn:iam::cloudfront:user/CloudFront Origin Access Identity {$ORIGIN_ACCESS_ID}"
            },
            "Action": "s3:GetObject",
            "Resource": “BUCKET_ARN/*"
        }
    ]
}

5. 回到 Route 53 增加别名

如果实用子域名则需要新增 CNAME 记录，并在 CloudFront 的备用域名中输入该记录的完整域名。

全部完成后，等待片刻即可去设定的域名测试效果。

总结

由于中国区和全球区的不同，以及 ICP 备案的要求，导致在国内使用 S3 + CloudFront 部署前端应用需要更多的额外设置。相信本文可以帮助大家顺利使用在 AWS 部署前端应用的最佳实践，降低部署和维护前端应用的成本。

亚马逊AWS官方博客