S3のオブジェクトをSSL対応のCloudFrontでデリバリーする
今回作るもの
はい👻
CloudFrontを使ったコンテンツデリバリー(SSL付き)! です。
一応アクセスログはS3バケットに放り込んで置こう。という構成です!今後BIツールに入れて見える化! とかするのもありですからね!
前提
- 今回作る予定のCloudFront用の証明書をACMで用意してある。
用意してない場合は、この文字列をクリック
では 作っていきましょう👻
ステップ1
コンテンツ保存用のS3バケットと、アクセスログ書き出し用のS3バケットを用意します。
はい、マネージメントコンソールからS3のコンソールに入りまーす

まずコンテンツ保存用のバケットを作ります。「バケットを作成」クリック。

適当なバケット名をつけます。

パブリックアクセスを下記の設定にし、下にスクロールして「バケットを作成」クリック
次にバケットをもう1つ作ります。アクセスログ書き出し用です。
同じ所のスクショは省略して、、、「バケットを作成」を押した後、適当に(たとえば下記のように)バケット名をつけます。
今度はパブリックアクセスの設定はデフォルトで大丈夫です。

次にコンテンツ用バケットにサンプルのindex.htmlファイルを追加します。
まずローカルでこんなファイルを作ってください笑
<h1>はろーわーるど</h1>
そしてS3にアップロードします!
下記のようにバケット一覧の画面でコンテンツ保存用のバケット名(ここではxxxx-web)をクリックします。
「アップロード」をクリック

下記の画面で追加します。追加方法はファイラーから選んでもドロップでもOKです。

「アップロード」をクリック

これでアップロード完了! です!
ステップ2
CloudFrontのディストリビューションを作成します。
ディストリビューションは配送設定みたいなものです。
マネージメントコンソールからCloudFrontのコンソールへ移動します

「Create Distribution」クリック

「Get Started」クリック

ここから設定項目がたくさんあります、、、スクショにコメント入れておき巻いたので、スクショの通り設定してください。
また赤枠が無い場所は自動で入力されます。
※ 希望するブログのURLはACMのワイルドカードで指定した範囲でないとだめです。

はい。↑で「Create Distribution」を押すと完了です。
ステップ3
Route 53の設定をします。
Route 53のコンソールにはいります。いい加減このスクショは不要ですか?

左上から「ホストゾーン」をクリック

自分の使うドメイン(ホストゾーン)をクリック

「レコードセットの作成」クリック

色々設定
- CloudFrontで設定したURL記入
- エイリアス:「はい」
- 一覧から先ほど作成したCloudFrontを選択
「作成」クリック
完了!!
ブラウザのURLへ、設定したURLを入力して「Enter!!」
じゃん!! エラーコード(笑)
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>1C54A29D403DD284</RequestId>
<HostId>
U2Q6m/6Qzxt9CfwyEDGk0ySl2FO5tlSvWi7ATuvlGBeEB3pCG+yy8sda37K2d8L8Go8euW4v6bY=
</HostId>
</Error>
このエラーコード、、、いつも出る。。。そして1,2時間ほっておくとそのうち気がつくと消えてる、、、ので待ちましょう笑
しばらく待って、、、じゃん☆

めっちゃ文字化け笑
まぁ文字化けはほっておいて無事S3からデリバリーできました。
最後にアクセスログを確認
S3のコンソールからアクセスログのバケットをクリックしてください。

アクセスログも無事溜まっております
はい👻
お疲れさまでした!