目的
この記事では、ムームードメインで独自ドメインを取得して、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バケット名を独自ドメインと同じにすることで選択可能となります。
ルーティングポリシーは「シンプルルーティング」を選択します。
「レコードを作成」を押下します。
Aレコードが作成されることを確認します。
NSレコードの4つのネームサーバのアドレスをムームードメイン側にも登録するためコピーします。
■ムームドメイン側の設定
注意点
ムームードメインでネームサーバ１～４を登録する際に、末尾に「.」を入れないこと。
入れてしまうとエラーが表示されネームサーバの登録に失敗します。
しばらく経過すると、独自ドメインで静的ウェブサイトにアクセスすることが可能となります。
※10分くらいでは表示されました。
