【CroudFront】S3の静的ウェブサイト作成とSSL化の手順まとめ

今回は、S3の静的ウェブサイトを作成する手順をまとめます。SSL化はCroudFrontで行います。WEBサイトは、商用フリーのサンプルを使用します。

S3の静的ウェブサイト作成とSSL化の手順

S3の静的ウェブサイト作成とSSL化の手順

S3バケットの作成

1.AWSマネジメントコンソールを開きます

2.S3コンソールを開きます

3.「バケットを作成」ボタンを開きます

4.バケットを作成画面で下記を入力し、「バケットを作成」をクリックする

バケット名：Route53で登録するドメイン(サブドメイン)と同じ名前
パブリックアクセスをすべてブロック：チェックを全て外す
その他の項目：デフォルトのまま

5.一覧から作成したバケット名をクリックする

6.「プロパティ」タブをクリックする

7.静的ウェブサイトホスティングの「編集」をクリックする

8.下記項目を変更し、「変更の保存」をクリックする

静的ウェブサイトホスティング：有効
インデックスドキュメント：index.html
エラードキュメント – オプション：index.html

9.「アクセス許可」タブを開きく

10.バケットポリシー欄の「編集」をクリックする

11.下記の定義を入力して「変更の保存」をクリックする

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "PublicReadGetObject",
			"Principal": "*",
			"Effect": "Allow",
			"Action": ["s3:GetObject"],
			"Resource": ["arn:aws:s3:::<ドメイン名>/*"]
		}
	]
}

12.バケットにindex.htmlファイルをアップロードする

13.index.htmlファイルのURLにアクセスできることを確認する

CloudFront 画像のキャッシュ設定

1.CloudFrontのコンソールを開く

2.「ディストリビューションを作成」をクリック

3.下記の設定を入力し、「ディストリビューションを作成」をクリック

オリジンドメイン：S3の静的webホスティングのURLを選択する

※上記以外の値はデフォルト値とする

Route53で独自ドメインの設定

1.Route53コンソールを開きます

2.左ペインから「ホストゾーン」をクリック

3.Aレコードを追加するドメインを選択する
※ドメインは取得している前提

4.「レコードの作成」をクリック

5.下記を入力して「レコードを作成」をクリック

レコード名：静的WEBサイトで使用するドメイン
トラフィックのルーティング先：エイリアス
→S3ウィブサイトエンドポイントへのエイリアス
→リージョンを選択
→s3のエンドポイントを選択

6.設定したドメインでWEBサイトにアクセスできることを確認する

ACMを使用してSSL化の設定をする

1.ACMコンソールを開く

2.リージョンをバージニア北部に変更する
※CroudFrontが対応している証明書がバージニア北部の為

3.「証明書をリクエスト」をクリック

4.「パブリック証明書をリクエスト」を選択して「次へ」をクリック

5.下記を入力して「リクエスト」をクリック

完全修飾ドメイン名：Route53で設定したドメイン名
検証方法を選択：DNS 検証

6.一覧から作成した証明書IDをクリック

7.「Route53でレコードを作成」をクリック
※Route53にCNAMEを登録して検証する

8.確認画面で「レコードを作成」をクリック

9.証明書の一覧でステータスが「発行済み」になることを確認する
※数分で発行済みになる

CroudFrontでHTTPSリダイレクトの設定

1.CloudFrontコンソールを開く

2.対象のディストリビューションIDを開く

3.「ビヘイビア」タブをクリック

4.「編集」をクリック

5.下記設定を変更して「変更を保存」をクリック

ビューワープロトコルポリシー：Redirect HTTP to HTTPS

6.「一般」タブをクリック

7.「編集」をクリック

8.下記設定を変更して「変更を保存」をクリック
代替ドメイン名 (CNAME) ：ドメイン名
カスタム SSL 証明書：バージニア北部で作成した証明書

9.Route53コンソールを開く

10.今回使用するドメインのAレコードを開く

11.トラフィックのルーティング先をCroudFrontに変更して「保存」をクリック

12.ブラウザからドメインに接続しHTTPSで開くことを確認する

S3のセキュリティを強化する

1.S3コンソールを開く

2.対象のバケット名をクリック

3.「アクセス許可」タブをクリック

4.バケットポリシーの「削除」ボタンをクリック

5.「プロパティ」タブをクリック

6.静的ウェブサイトホスティングの「編集」ボタンをクリック

7.静的ウェブサイトホスティングで「無効」を選択し「変更の保存」をクリック

8.CloudFrontコンソールを開く

9.対象の「ディストリビューションID」をクリック

10.「オリジン」タブを開く

11.対象のオリジン名を選択して「編集」ボタンをクリック

12.S3 バケットアクセスで「OAIを使用します」を選択し「新しい OAI を作成」をクリック

13.ポップアップウィンドウで「作成」をクリック

バケットポリシー
はい、バケットポリシーを自動で更新します

14.「変更を保存」をクリック

まとめ

今回は、CroudFront＋S3で静的WEBサイトを作成する手順をまとめました。実際にご紹介した手順でサンプルサイトを作成しましたが、特につまるところはありませんでした。ACMで取得したSSL証明書をCroudFrontで使用する際は、東京リージョンで作成しないように注意が必要です。今後は、CroudFront＋S3の静的ウェブサイトをTerraromで作成したいと思っております。うまく検証出来たら、当ブログの記事でもご紹介します。

なお、クラウド部ではココナラでAWSの設定代行を行っております。ご自身での設定が難しい場合などは、お気軽にご相談ください。