AWS S3教程：在S3上搭建静态网站并配置自己的域名及https

教程

发布日期: 2021-06-11

作为AWS众多云服务的核心成员之一，S3得到了非常广泛的应用。下面来介绍一下如何在S3上搭建静态网站。

AWS S3

创建并配置S3 bucket

创建S3 bucket

首先在自己的AWS账户中创建一个bucket，比如填入如下信息：

Bucket name: demo.lcoding.club
不要选择“Block all public access”
建议选择Bucket Versioning

单击”Create bucket”来创建这个bucket。

上传测试文件index.html

上传一个index.html到这个bucket。此时还不能直接访问这个index.html，如果通过浏览器进行访问，你会看到一个访问拒绝的消息：

markup

<Error>
  <Code>AccessDenied</Code>
  <Message>Access Denied</Message>
  <RequestId>C4WNH6GNHA6QN19V</RequestId>
  <HostId>XWh8MvQ2rwMZ08oraA4JlU+eN8uYrZnIJqrzJnyjziH8noxsqM665cC5OKjZJVNu8wSfbjwaNO8=</HostId>
</Error>

当然，也可以上传一个React/Vue构建完的目录到S3：

bash

aws s3 sync build/ s3://YOUR_BUCKET_NAME --profile YOUR_AWS_PROFILE_NAME --delete

Bucket的进一步配置

选择S3 Bucket => “Properties” => “Static website hosting”，

Static website hosting: Enable
Index document: index.html

单击“Save changes”

选择“Permissions”，添加如下的Bucket policy:

yaml

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::demo.lcoding.club/*"
            ]
        }
    ]
}

至此为止：我们能够通过http (而不是https) 来访问这个静态网站了：
http://demo.lcoding.club.s3-website-eu-west-1.amazonaws.com/

下面的目标有两个：第一是使用https，第二是使用自定义域名: https://demo.lcoding.club

AWS Certificate Manager中的设置

注意，Region一定要选择us-east-1 (N. Virginia)

单击“Request a certificate”

选择：”Request a public certificate”
Fully qualified domain name: demo.lcoding.club
Select validation method: DNS validation - recommended

单击“Request”，这时就会看到这个certificate的状态为”Pending validation”

image

这里要求证明你对域名的所有权。如果你的域名在Route 53中，就非常方便了，直接单击“Create records in Route 53”，AWS就会自动创建对应的CNAME记录。

如果域名在其他地方管理，就需要进行相应的设置了。下面以Cloudflare为例。

在域名提供商处添加CNAME record

我用的是Cloudflare，在自己域名下按照上一步要求的信息添加对应的CNAME。

image

需要注意，在添加CNAME的时候，

Name：_xxxxxxxxxxxxxxxxxxx.api (没有后面的.lcoding.club.)
Content: xxxxxxxxxxxxxxxx.xxxxxxx.acm-validations.aws. (不要忘记后面的.)

这部做完后需要等待几个小时，一旦AWS通过了验证，就可以进入到下一步了。

CloudFront中的设置

选择“Create a CloudFront distribution”

Origin domain: demo.lcoding.club.s3.eu-west-1.amazonaws.com (注意这一步可以从下拉列表框中选择，但有些时候AWS似乎不能及时更新，可能看不到最新的bucket名字，因此建议去bucket那里复制名字然后粘贴过来)
Viewer Protocol Policy: Redirect HTTP to HTTPS
Alternate Domain Names: demo.lcoding.club
SSL Certificate: Custom SSL Certiciate 并选择刚创建的certificate。

然后单击“Create distribution”。