目的

この記事では、ムームードメインで独自ドメインを取得して、S3にホスティングした静的ウェブサイトにアクセスする方法を記載します。

想定読者

・S3に静的ウェブサイトをホスティングさせたい方
・表題の件について、Route53でどのように設定するかを確認したい方

手順

手順としては以下を想定しております。

独自ドメインの取得
S3バケットの作成
静的ホスティングサイトの有効化
ウェブサイトアクセスのアクセス許可の設定
Route53の設定

1. 独自ドメインの取得

独自ドメインですが、ムームドメインで取得しました。
ドメイン名をこだわらなければ1円(1年間)で取得出来ました。
https://muumuu-domain.com/

2. S3バケットの作成

S3バケットですが、Terraformで作成しました。
TerraformのソースコードはGithub上にございます。
https://github.com/tireidev/handson/blob/main/src/aws/terraform/s3/s3_bucket/s3_bucket.tf

注意点

独自ドメイン名でS3にホスティングした静的ウェブサイトにアクセスする場合、バケット名は独自ドメイン名と同じにする必要がございます。
バケット名が独自ドメイン名と異なる場合、Route53でエイリアスレコード作成時にS3エンドポイントが選択出来ません。

3. 静的ホスティングサイトの有効化

Amazon S3よりバケットを押下します。

プロパティを押下します。

静的ウェブサイトホスティングより「編集」を押下します。

静的ウェブサイトホスティングを「有効にする」に変更します。
インデックスドキュメントはS3にアップロードしたオブジェクト名「index.html」を記載します。
「変更の保存」を選択します。

4. ウェブサイトアクセスのアクセス許可の設定

ブロックパブリックアクセス (バケット設定)、S3バケットポリシーを設定します。
この設定を行わないと以下のように静的ホスティングサイトを有効化してもアクセスが拒否されてしまいます。
例) 403エラー

ブロックパブリックアクセスをすべてブロックを「オフ」に設定します。

S3バケットポリシーにて、バケットへのアクセスを許可します。

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

出典：AWSユーザーガイド.「ウェブサイトアクセスのアクセス許可の設定」. https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html ,（参照2022-06-12）

ここまで行うと、バケットウェブサイトエンドポイントよりS3にホスティングした静的ウェブサイトへのアクセスが可能となります。

5. Route53の設定

ダッシュボードを押下します。

「ホストゾーンの作成」を押下します。

ドメイン名を入力して、「ホストゾーンの作成」を押下します。

NSレコードとSOAレコードが作成されます。
「レコードを作成」を押下してAレコードを作成します。

レコードタイプは「A-IPv4アドレスと一部のAWSリソースにトラフィックをルーティングします。」を選択します。
トラフィックのルーティング先にて、「エイリアス」を選択します。
次に、「S3ウェブサイトエンドポイントへのエイリアス」を選択し、リージョン、S3エンドポイントを選択します。
S3エンドポイントは、S3バケット名を独自ドメインと同じにすることで選択可能となります。
ルーティングポリシーは「シンプルルーティング」を選択します。
「レコードを作成」を押下します。