見出し画像

S3+CloudFront+Route53で静的サイトを公開した作業メモ

S3+CloudFront+Route53を使って静的サイトを公開した時の作業メモです。
ドメインはお名前.comで取得済みです。

1.S3の設定

①AWS マネジメントコンソールにログイン
②サービスから「S3」を選択
③「バケットを作成する」をクリック
 名前:取得したドメイン
 リージョン:アジアパシフィック(東京)を入力
④作成したバケットを選択し、公開するファイルをアップロード
⑤「アクセス権限」→「パブリックアクセス設定の編集」→「パブリックアクセスをすべてブロック」をオフに変更
⑥「アクセス権限」→「バケットポリシー」を追加
下記参考

⑦「プロパティ」→「Static website hosting」→「このバケットを使用してウェブサイトをホストする」にチェックをつけ、
「インデックスドキュメント」と、必要があれば「エラードキュメント」を入力し保存
⑧「エンドポイント」のURLからアクセスできるか確認

2.ネームサーバーの設定

①サービスから「Route53」を選択

②「ホストゾーンの作成」→使用するドメインを入力し作成
③表示されたNSレコードを、お名前.comで対象ドメインのネームサーバ情報に入力し保存

3.SSL化設定

①サービスから「Certificate Manager」を選択

画面右上のリージョンを「米国東部 (バージニア北部)」に変更
※CloudFrontでAmazon が発行したSSL証明書を使用するため

③リージョンを変更したら、
「証明書のリクエスト」→「パブリック証明書のリクエスト」をクリック
④使用するドメインを入力し、DNS認証を選択
⑤「Route53でのレコードの作成」をクリックし、CNAMEレコードを自動追加
⑥「発行済み」になるまで待機

画像1

4.CloudFront設定

①サービスから「CloudFront」を選択

②「Create Distribution」→Webの「Get Start」をクリック
③下記の通り入力していく
・OriginDomainName:S3バケット名
・OriginID:初期値のまま
・ViewewProtocolPolicy:「Redirect HTTP to HTTPS」を選択
・SSL Certificate:「Certificate Manager」で作成した証明書を選択
・Default Root Object:S3のインデックスドキュメントを入力

画像2

④登録完了後、Stateが「Enabled」になるまで待機

5.Aレコードの設定

①サービスから「Route53」を選択
②対象ドメイン→「レコードセットの作成」をクリック
③レコードを作成
タイプ:Aレコード
エイリアス:はい
エイリアス先:CloudFrontディストリビューションから選択

指定ドメインでアクセスできるか確認する。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
6
Japanese Web Developer / Front-End / Back-End / SIGNAL inc. / TOKYO /