CloudFront+S3でウェブページを公開する

コンテンツ配信サービスのCloudFrontとストレージサービスのS3はどちらもサーバーレスサービスで急遽コンテンツを公開する場合などに便利な組み合わせです。基本的にはCloudFrontの各種リクエスト数だったりS3に設置しているファイルの容量による課金なのでシンプルな内容であれば安価にコンテンツを配信することができます。今回はこの組み合わせでコンテンツを公開するまでをまとめます。

前提条件

• S3バケットは直接アクセスを許可せずにCloudFrontからの要求のみ許可する

S3の準備をする

S3サービスを選び「バケットの作成」をクリックします。

バケット名を入力します。リージョンは必要に応じて適切なリージョンを選択してください。

その他オプションを必要に応じて変更しつつページ最下部の「バケットを作成」をクリックします。今回はバケット名の指定以外はデフォルト設定のままです。

コンソール上部の緑帯部分にバケット作成が成功した通知が表示されたら作成したバケットをクリックします。

プロパティタブをクリックします。

プロパティメニューが表示されたら最下層までスクロールして静的ウェブサイトホスティングのよこの「編集する」ボタンをクリックします。

静的ウェブサイトホスティングのラジオボタンで「有効にする」を選ぶとホスティングメニューが追加で表示されるのでインデックスドキュメント（必須項目）を入力します。今回は「index.html」を指定しています。

必要に応じてエラードキュメントのファイルを指定し、最後に「変更の保存」ボタンをクリックします。

オブジェクトタブに戻り、公開するファイルを配置します。ファイルの配置はこのページにドラッグ＆ドロップをするか「アップロード」ボタンを押してアップロードする2種類の方法があります。今回は「アップロード」ボタンを押します。

「ファイルを追加」ボタンをクリックします。

OSのエクスプローラが表示されるのでアップロードしたいファイルを選択します。そうすると選んだファイルがコンソール画面に表示されるので間違いがないことを確認して「アップロード」ボタンをクリックします。

コンソール上部に緑色の帯でアップロード結果とアップロード詳細が表示されるので「終了」ボタンをクリックします。ここまででS3の準備は完了です。

CloudFrontに使用する証明書を準備する

CloudFrontで使用するサーバー証明書を準備します。証明書の発行は少し時間がかかります。使える証明書がない場合は先にやっておくと効率的です。

！！注意！！　CloudFrontに使う証明書はバージニアリージョンで発行する必要があります。

コンソールからCertification Manager(ACM)を選択しリージョンをバージニアに変更します。

リージョンにまだ証明書がない場合は以下の画像が表示されるので「今すぐ始める」ボタンをクリックします。

ラジオボタンで「パブリック証明書のリクエスト」を選択して右下の「証明書のリクエスト」ボタンをクリックします。

利用するドメイン名を入力して「次へ」ボタンをクリックします。

検証方法としてラジオボタンで「DNSの検証」を選択して「次へ」ボタンをクリックします。（必要に応じて検証方法は選択してください）

必要に応じてタグを設定して「確認」ボタンをクリックします。

設定した内容が表示されるので間違いがないことを確認したら、右下の「確定とリクエスト」ボタンをクリックします。

ドメインの確認状態が表示されるので展開して「名前」と「値」を控えて「続行」ボタンをクリックします。

DNSサーバーやRoute53で控えた名前と値をCNAMEレコードで登録します。（認証が完了するまで少し時間がかかります）

しばらく時間が経過したあとに状況が「発行済み」になっていればOKです。

CloudFrontを設定する

コンソールからCloudFrontを選択肢「Create Distribution」ボタンをクリックします。

「Get Started」ボタンをクリックします。

以下の項目を設定し最後に「Create Distribution」ボタンをクリックします。一通りの設定項目の画像もつけておきますので参考にしてください。（必要に応じて適宜設定値を変更ください）

項目名	設定値
Origin Domain Name	準備したS3を指定（選択できます）
Restrict Bucket Access	Yes
Origin Access Identity	Create a New Identity
Comment	適宜変更
Grant Read Permissions on Bucket	Yes, Update Bucket Policy
Viewer Protocol Policy	Redirect HTTP to HTTPS
Allowed HTTP Methods	GET, HEAD, OPTIONS

CloudFrontディストリビューションの一覧が表示され作成したディストリビューションが表示されますので、作成したディストリビューションの「ID」をクリックします。

GeneralタブのDomain Nameにある文字列を値として、証明書の発行で指定したDNSレコードを登録します。（名前引きができるようになるまでAlternate Domain Nameの設定と証明書の設置ができません。）

※一般的なDNSサーバーを使う場合はCNAMEで良いですが、Route53を使っている場合はCNAMEでなくリソース指定でレコードを作成すると良いです。（ネイキッドドメインとかはこれで設定できます。）

DNSレコードの登録後に名前引きができるようになったらGeneralタブの「Edit」ボタンをクリックします。

以下の設定をします。

項目名	設定値
Alternate Domain Names(CNAMEs)	DNSレコードに登録したドメイン名 （複数設定可能）
SSL Certificate	Custom SSL Certificateを選択して上記に対応できる証明書を指定

ページをスクロールして最下部右下の「Yes, Edit」ボタンをクリックします。

接続確認する

ブラウザで表示されるか確認してみると無事にページが表示されました。

CloudFrontは設定変更時に反映まで一息かかるので上記までの設定が完了してもすぐに反映されないことがあります。