独自ドメインでの静的コンテンツの配信

概要

S3へアップロードした静的コンテンツを、CloudFront経由で配信。
Route53で取得した独自ドメインでサブドメインを含まないドメイン名を使用。

S3

バケット作成

1. S3 Management Console へ遷移。
2. 「バケットを作成」ボタンを押下。
3. バケット名を入力。
4. 「作成」ボタンを押下。
5. バケットが作成される。

静的コンテンツアップロード

1. 作成したバケットを選択。
2. 「アップロード」ボタンを押下。
3. 「ここにアップロードするファイルとフォルダーをドラッグアンドドロップします。」へ、index.htmlなどをドラッグ・アンド・ドロップ。
4. (必要に応じて)「詳細の設定」ボタンを押下し、「低冗長化ストレージを使用」を選択。
5. 「アップロードの開始」ボタンを押下。
6. 静的コンテンツがアップロードされる。

CloudFront

Distribution作成

1. AWS CloudFront Management Console へ遷移。
2. 「Create Distribution」ボタンを押下。
3. Webの「Get Started」ボタンを押下。
4. Origin Domain Nameで作成したバケットを選択。
5. Restrict Bucket Accessを「Yes」に変更。
6. Origin Access Identityを「Create a New Identity」に変更。
7. Grant Read Permissions on Bucketを「Yes, Update Bucket Policy」に変更。
8. Alternate Domain Names(CNAMEs)にドメイン名を入力。
9. (必要に応じて)Default Root Objectにindex.htmlを入力。
10. 「Create Distribution」ボタンを押下。
11. Statusが「In Progress」から「Deployed」に変われば完了(10分以上かかるかも)

Route 53

ドメイン取得(確認)

1. Route 53 Management Console へ遷移。
2. Registered domains を選択。
3. 取得したドメインがあることを確認。

設定

1. Hosted zones を選択。
2. 取得したドメインがあるので選択。
3. NSとSOAがあることを確認。
4. 「Create Record Set」ボタンを押下。
5. サブドメインを含まない「zone apex」のため、Nameはそのまま。
6. Typeもそのまま。
7. Aliasを「Yes」に変更。
8. Alias Targetに生成した「xxxxxxxxxxxxxx.cloudfront.net」を設定。
9. 「Save Record Set」ボタンを押下。
10. ブラウザからこのドメインへアクセスすると表示される。

お礼

tsukapah様のお陰で無事配信できました。
ありがとうございました。