【初心者・入門】Amazon S3 を利用して静的ウェブサイトを公開してみる (中編)

はじめに

こんにちは、エーピーコミュニケーションズクラウド事業部の高橋です。

今回のブログは、前回のブログ「Amazon S3 を利用して静的ウェブサイトを公開してみる」の中編です！(なので後編もあります)
前回のブログでは S3 を利用して静的ウェブサイトを公開しましたが、今回はそのウェブサイトを HTTPS 化してみようと思います！
どうぞよろしくお願いします！

techblog.ap-com.co.jp
techblog.ap-com.co.jp

どんなひとに読んで欲しい

Amazon S3 を使用してウェブサイトを公開する基本的な方法を知りたい人
Amazon CloudFront を使用して静的ウェブサイトを HTTPS で公開したい人

Amazon CloudFront の設定

S3 を利用した静的ウェブサイトを HTTPS 化するために、一番重要な鍵となる AWS サービスが Amazon CloudFront というサービスになります。
Amazon CloudFront とは、AWS が提供するグローバルなコンテンツ配信ネットワーク (Content Delivery Network, CDN) サービスです。
コンテンツを世界中の数百のエッジロケーションにキャッシュすることにより、世界中のユーザーに対して高可用かつ低遅延でコンテンツを配信できます。
また、HTTPS による暗号化だけでなく、AWS WAF、AWS Shield、AWS Certificate Manager などのサービスを組み合わせることにより、より安全なコンテンツの配信を容易に実現できます。

それではさっそく、Amazon CloudFront を設定して、HTTPS にてアクセスできるようになるか検証したいと思います！

① ディストリビューションの作成
はじめに、ディストリビューションを作成します。
ディストリビューションを設定することにより、ユーザーがウェブサイトやアプリケーションを通じてファイルをリクエストしたときに、どのオリジンからオブジェクトを取得するかを CloudFront によって指示できます。
※「オリジン」とは、ウェブコンテンツにアクセスするために使われる URL におけるスキーム (プロトコル)、ホスト (ドメイン)、ポート番号の３つの組み合わせによって定義されるものです。

まずは、AWS コンソールの CloudFront の画面から「ディストリビューションを作成」をクリックします。

続いて、作成するディストリビューションにおけるオリジンドメインを入力します。
前回ブログで作成した S3 バケットのドメインを入力したところ、以下のように S3 ウェブサイトエンドポイントの使用を推奨する内容のポップアップが表示されましたので「Web サイトのエンドポイントを使用」をクリックします。
(どうやら、S3 バケットに対して「静的ウェブサイトホスティング」を有効化していると自動的に推奨として表示されるようです)
※ また、ディストリビューションを作成した後、オリジンドメインは追加することが可能です。

次に、プロトコルは「HTTPのみ」しか選択できないので、それを選択します。
画像右側の AWS 情報を確認しますと、S3 に「静的ウェブサイトホスティング」を有効化していると「HTTPのみ」しか選択できないようです。
どうやら、「CloudFront ⇒ S3 (静的ウェブサイトホスティング有効)」へのアクセスは HTTP のみを使用しているようです。
※ 補足ですが「名前」についてはオリジンドメインを入力すると同じドメイン名で自動的に入力されました。

次に、デフォルトのキャッシュビヘイビアを設定します。(「ビヘイビア」は日本語で「動作」や「挙動」といった意味です)
ディストリビューションを最初に作成する段階では、「パスパターン」は「デフォルト (*)」が元々入力されており変更できませんでした。
※「パスパターン」とは、リクエスト URL パスの内容に合わせるように、追加している他のオリジンドメインにアクセスするように設定できる機能です。(ディストリビューションに対してビヘイビアを追加する際に、「デフォルト (*)」以外のパスパターンを追加できます)

「ビューワープロトコルポリシー」については、「Redirect HTTP to HTTPS」を選択します。
この設定により、ユーザーから HTTP のアクセスであっても HTTPS にリダイレクトされます。(後述で検証してみます！)

「許可された HTTP メソッド」については、デフォルトで選択されていた「GET, HEAD」を選択しておきます。
この設定により、CloudFront を、オリジンからオブジェクトを取得する場合、または、オリジンからオブジェクトのヘッダー情報を取得する場合のみに制限できます。

次に、「キャッシュキーとオリジンリクエスト」という項目では、キャッシュポリシーとオリジンリクエストポリシーを設定できますが、今回の検証では特に影響がないため、推奨されている「Cache policy and origin request policy」を選択し、キャッシュポリシーを S3 に対して推奨されている「CachingOptimized」を入力します。
※ 他のオプションは入力しません。

次に、ウェブアプリケーションファイアウォール (WAF) では、念のため「セキュリティ保護を有効にする」を選択しておきます。

最後に、「設定」という項目においても基本的には今回の検証に影響がないため、デフォルトの入力のままにしておきます。
ただ、一点だけ「デフォルトルートオブジェクト」だけ設定します。
これを設定することで、例えば「https://XXXXXXX.net/」(ルートディレクトリ) でサイトにアクセス (要求) した際も、ここで設定したオブジェクト (ファイル) を返すことができます。
※ 前回のブログでの「静的ウェブサイトホスティング」の設定における「インデックスドキュメント」の設定、いわばホーム画面を設定するようなオプションになります。

以上、これらの設定が入力完了したので「ディストリビューションを作成」をクリックします。
画面が遷移して、ディストリビューションの一覧が表示され、ただいま作成したディストリビューションも表示されていました！
ステータスとしては「有効」ですが、最終変更日が「デプロイ」となっているので、デプロイ中と思われます。

しばらく待ってみると・・・無事にデプロイが完了し最終更新日が表示されました！
※ 余談ですが、ディストリビューション作成で払い出される「ID」と「ドメイン名」は全く異なるようです。(黒く伏せているので画像からは分かりませんが・・)

これにてディストリビューションは作成完了です！

② HTTPS でウェブサイトにアクセス
それでは早速、HTTPS として静的ウェブサイトにアクセスできるか確認してみたいと思います！

作成したディストリビューションをクリックします。
「ディストリビューションドメイン名」というのが、CloudFront に作成されたドメイン名です。

このディストリビューションドメイン名をもとに、以下の URL にて HTTPS 通信でアクセスしてみたいと思います！
https://XXXXXXX.cloudfront.net/

アクセスしてみたところ・・・問題なく HTTPS でアクセスできることを確認できました！
鍵マークも付いており、接続がセキュリティで保護されていることが分かります。
また、先ほど「デフォルトルートオブジェクト」で設定したオブジェクトである「index.html」ファイルがルートディレクトリの画面として表示されていることも確認できました。

左が今回の検証の HTTPS での接続、右が前回の検証のバケットウェブサイトエンドポイント (HTTP) での接続

では、続いて、以下のように HTTP の URL に変更しても HTTPS にリダイレクトして問題なくアクセスできるかも確認してみたいと思います！
※ 先ほどの、ディストリビューション作成時の「ビューワープロトコルポリシー」の「Redirect HTTP to HTTPS」設定についての確認です。
http://XXXXXXX.cloudfront.net/

HTTP の URL を張り付けてアクセスしたところ・・・

問題なく HTTPS にリダイレクトされてアクセスすることができました！

これにて、今回の検証は完了です！

おわりに

今回のブログでは、CloudFront を利用した、静的ウェブサイトへのアクセスを HTTPS にてアクセスする基本的な設定方法を検証してみました！
ただ、もう一つ、ウェブサイトの公開として外せないのが、自分が欲しいドメインを取得して、その URL でウェブサイトを公開することだと思います。
今回の検証のままだと、ディストリビューションを作成したときに払い出された暗号のようなドメインの URL のままなので、後編としてドメインを変更する検証もやってみたいと思います！

ご拝読いただき、ありがとうございました！
引き続き、後編も読んでいただけたら幸いです！