このパートで学ぶこと

今回は、以前レッスン2で作成したS3バケットにCloudFront経由でアクセスするように設定して、キャッシュを保存させます。前パートで学んだように、エッジサーバーにキャッシュを保存させ、S3バケットへのアクセス無しにS3の中にあるHTMLファイルの内容を閲覧可能にするのが目的です。

このパートでは、CloudFront経由でアクセスするための設定方法と、出てくる用語について学びながら実際に手を動かしていきます！

この先の作業は、

（1）S3とCloudFrontの結び付け

（2）ドメインの取得・設定とACMによる証明書の取得

（3）CloudFrontへの証明書の紐付けと動作確認

の順序で進めていきます。

S3の動作確認

まずは、以前作成したS3バケットが正常に動作しているか確認しましょう。もし削除など、バケットがない場合はレッスン2の内容を見返しながら、再度作成してください。

それでは、AWSにログインしましょう！

AWSログインリンク：https://signin.aws.amazon.com/console

ログインが完了したら、下の画像を見てください。

まず、画面左にあるサービス右横の入力欄をクリックしたら、「S3」と入力して、表示されたS3をクリックしてください。

S3のコンソール画面を開いたら、バケット名をクリックします。

以前作成したバケット名をクリックしたら、「プロパティ」タブをクリックしてください。

プロパティを開いたら、画面一番下までスクロールして「静的ウェブサイトホスティング」の部分に記述されている「バケットウェブサイトエンドポイント」のURLをコピーして、ブラウザの入力欄にペーストして開きます。記述されているURLをクリックしても同様の結果になります。

上の画像のように表示されれば、以前のS3の設定が保存されS3バケットに保存されているHTMLファイルの内容が表示されています。可能であれば、このパートの後半でURLを比較するので、このまま開いておいてください。

もし表示が異なる場合は、ブロックパブリックアクセスやバケットポリシーの設定が変わっている可能性があるので、レッスン2の内容を見返しながら再度S3の静的ウェブサイトホスティングの有効化まで設定してください。

ちなみに、ブラウザの画面左上を見ると、鍵のマークがついていませんね。 これは、まだこのWEBサイトがhttps化されていないということです。 最終的には左上の部分に鍵のマークがつくことになりますので、終わり次第確認してみましょう！

CloudFrontの設定

では、S3の動作確認が問題なければCloudFrontとS3を結びつけていきます。

早速CloudFrontの設定を開きましょう！下の画像を見てください。

まず、画面左にあるサービス右横の入力欄をクリックしたら、「CloudFront」と入力して、表示されたCloudFrontをクリックしてください。

CloudFrontの画面を開いたら、画面右部分にある「CloudFrontディストリビューションを作成する」ボタンを押下してください。 ディストリビューションというのは、1つのCloudFrontの単位と認識してください。EC2のインスタンスのような呼称です。

作成画面に移ると、様々な入力欄が表示されているはずです。ここは設定項目が多いので、まずはどんな操作を行うかを知った上で、個別の設定内容について見ていくことにします。

操作方法

①一番上の「オリジンドメイン」を選択するとS3バケットのURLが選択できるはずなので、それを選択します。

②「名前」の部分は自動入力されるので、その下にある「S3バケットアクセス」のオプションから「Legacy access identities」を選んでください。

③オリジナルアクセスアイデンティティのブロックが表示されるので、「新しいOAIを作成」ボタンを押下します。確認ウィンドウが表示されるので、指示に従って進めてください。

④先ほど作成したOAIを選択します。

⑤「はい、バケットポリシーを自動で更新します」ボタンを選んでください。

設定内容

操作は以上です。では、設定した内容を振り返っていきましょう！

オリジンドメイン

まず、最初のオリジンドメインの選択について説明します。下の図を見てください。

CloudFrontはCDNで、エッジサーバー部分の役割を果たすと前パートで説明しました。 この画像におけるS3バケットの部分を指定するのがオリジンドメインです。ここを他のサービスに変更すれば、異なる場所からデータをキャッシュできます。

OAIとバケットポリシー

次に、OAIについて見ていきます！OAIとはOrigin Access Identityの略称で、S3で学習したバケットポリシーのようなアクセス制御を行うためのものです。

今回OAIを利用する理由は、S3バケットへの直接アクセスを禁止し、CloudFront経由でしかアクセス許可を行わない設定にするためです。（S3に直接アクセスできる状態のままだと、CloudFrontを利用する意味がなくなってしまいます）。OAIは、ディストリビューションの作成時にも設定できますし、作成後にも変更・作成可能です。

OAIを利用する設定にした場合は、バケットポリシーの変更も必要になります。 そのバケットポリシーを自動で反映してもらうのが、最後に選択した「はい、バケットポリシーを自動で更新します」ボタンを選択した理由です。

---

それではCloudFrontの作成に戻りましょう！AWSの画面を下にスクロールしてください。

次に、ビューワープロトコルポリシーを変更します。ここでは、クライアントがCloudFront経由でアクセスする際のHTTP/HTTPSに関するルールを設定します。

デフォルトでは「HTTP and HTTPS」になっているので、「Redirect HTTP to HTTPS」に変更します。

リダイレクトとは、特定のURLがリクエストされた時に、自動で別のURLに誘導する仕組みです。リダイレクトは重要な概念なので、しっかり押さえてください。設定した項目は「HTTPからHTTPSへリダイレクトする」という意味になるので、HTTPでアクセスされた場合は、HTTPS付きのURLに自動で誘導し301エラーを返す設定です。

設定が完了したらAWSの画面を下にスクロールしてください。

ここでは、CloudFrontの通信に関する設定が可能です。「デフォルトルートオブジェクト」の部分に、「index.html」と入力してください。

これは、CloudFrontのルートURL（一番上の階層のURL）をそのまま指定した時に、自動で「index.html」ファイルを探して返すという処理が行える設定です。レッスン3で学習した、絶対パスという概念がありましたね。今回の設定では、/work-school-testというURLでファイルを指定された場合、「/work-school-test/index.html」を自動で返すという意味になります。

デフォルトルートオブジェクトまで設定が完了したら、画面最下部にある「ディストリビューションを作成」というボタンを押下して、ディストリビューションを作成してください。

問題なく作成されていれば、上の画像と同じ画面になっているはずです。ディストリビューションの作成には若干時間がかかるので「ステータス」の部分が「有効」になるまで待ってください。

有効になり次第、「ドメイン名」の部分に記述されているURLをコピーしてブラウザにペーストしてみましょう！

先ほどのS3の動作確認時と同様に、HTMLファイルの内容が表示されています。しかし、URLが先ほどと異なりますね。加えて、画面左上に鍵のマークが付いています。CloudFrontはhttps化されているので、証明書も存在します。ただ、ドメイン名が自動で付与されたものなのでどのようなサイトなのか分かりづらいですね。

さらに、このままだとS3のURLを直接指定した方でも同じ内容が返ってきてしまっています。そのため、最後にS3への直接アクセスを禁止する設定をしましょう！

S3の設定

まずは、S3のブロックパブリックアクセスを有効化して、パブリックアクセスができないようにします。

サービス選択画面から、S3を選択します。

S3の画面を開いたら、バケット名をクリックします。

バケットの設定画面を開いたら、「アクセス許可」タブをクリックして、画面下部にある「ブロックパブリックアクセス」の「編集」ボタンをクリックします。

ブロックパブリックアクセスの設定画面を開いたら、一番上の「パブリックアクセスを全てブロック」にチェックを入れて、画面右下の「変更を保存」ボタンを押下します。押下すると、モーダルウィンドウが表示され、「確認」と入力するように促されるので、そのように入力し設定を反映します。

ブロックパブリックアクセスの設定が反映できたら、次にバケットポリシーを変更します。

まず、先程と同様に「アクセス制御」のタブを開き、「バケットポリシー」の「編集」ボタンをクリックします。

CloudFrontのディストリビューション作成の際に、「バケットポリシーの自動更新」を行う設定にしていた場合上の画面と同じように表示されているはずです。もし表示が異なる場合は全く同様の内容を手入力すれば大丈夫です。

現在、画面には2つのバケットポリシーが表示されています。レッスン2でも学習しましたが、Sidというのがバケットポリシー識別のためのIDのようなものになります。Sidが「PublicReadGetObject」と記述されているバケットポリシーは、以前S3を公開するために準備した「作成したバケットにインターネット上で、全てのユーザーにオブジェクトを取得する動作を許可する」という意味のバケットポリシーです。

今回は、S3のバケットは公開しない設定にするため該当する赤枠①のポリシーは全て消去してください。

赤枠②のSidが「CloudfrontGetObject」と記述されている部分が今回ディストリビューションの作成時に自動追加された部分で、「CloudFront経由のアクセスの場合のみGetメソッドを許可する」という意味になります。設定以前は赤枠で囲われたSidの記述が「2」となっているはずなので、「CloudfrontGetObject」と書き換えておきましょう。

最終的には、上の画像と同じように設定が完了したら画面右下にある「変更の保存」ボタンを押下して設定は完了です。

もし「PublicReadGetObject」の記述を残したままの場合、CloudFrontアクセス用のバケットポリシーが適用されず、ブラウザでアクセスした際に403エラー（アクセス権限無し）が表示されてしまいますので、必ず変更・削除するようにしましょう。

これで（1）のCloudFront・S3の設定は終了です。