Hosting static site on AWS S3

2021-05-07 339 words 2 minutes

Contents

1. Consideration

1.1. Use S3

At first, I tried to host Github Pages for a home page. However, github says I need to upgrade github account or make repository public to host web page. So, I decided host my minimal page to Amazon S3.

1.2. HTTPS

According to Amazon S3 ユーザーガイド S3 を使用して静的ウェブサイトをホスティングする,

Amazon S3 ウェブサイトエンドポイントは HTTPS をサポートしていません。Amazon S3 バケットで HTTPS を使用する方法については、以下を参照してください。

CloudFront を使用して Amazon S3 バケットに対する HTTPS リクエストを処理するにはどうすればよいですか?

ビューワーと CloudFrontとの通信で HTTPS を必須にする

2. Requirement

AWS account
Web page content
Domain

3. Create S3 bucket

AWS console > Amazon S3 > Bucket > Create Bucket

Bucket name (following Bucket naming rule)
AWS region
Check off “Public Access Control” (at this point)
Check off “default server-side encryption” (at this point)

4. Enabling website hosting

In the Buckets list, choose the name of the bucket
Choose Properties
Under Static website hosting, choose Edit.
Choose Use this bucket to host a website.
Under Static website hosting, choose Enable.
Specify index document (e.g. “index.html”)
Specify error document (e.g. “error.html”) for 4xx class errors.

Ref. Enabling website hosting

5. Block Public access

5.1. Open public access to Bucket

Go to S3 console > select bucket > Permissions
Clear “Block all public access” and save

5.2. Add Bucket policy (permit read access)

At Permission for the bucket, set bucket policy by JSON (with changing “Bucket-Name” to your bucket name)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


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

Ref. Amazon S3 ユーザーガイド - チュートリアル: Amazon S3 での静的ウェブサイトの設定

6. Upload web content

Go to S3 console > Object > Upload:
Drug and drop from local file

index.html
error.html
css/style.css

Upload

7. Check website endpoint

Bucket > Properties > Static website > Bucket website endpoint

Then you can see hosted web page.