こんにちはますのです。
サーバレスのWebサービス構築中、「あれ、SSL証明書取得してるのにhttps通信になってないやんけ」と初めてのことであわあわしたのです。
どうやらS3の静的Webサイトへ直接アクセスする場合はhttp通信のみ適用の様子。
SSL通信のhttpsでアクセスする場合はCloudFrontを使う必要があるそうです。
今回は設定方法についてまとめておこうと思います。
やりたいこと
- S3に保存している静的サイトへ「https」通信としてアクセスしたい
図にするとシンプル過ぎてちょろいもんですね。
設定方法
では実際に設定をしていきましょう。
流れとしては以下の①～③になります。GUI上でポチポチするだけで簡単にできます。
なお、「独自ドメインの取得とRoute53へのドメイン登録」「S3のWebサイト設定」は完了している前提となります。
- CertificateManagerでSSL証明書を作成する
- CloudFrontとS3を紐づけてSSL証明書を適用する
- Route53にCloudFrontのドメイン名と独自ドメインを紐づける
ステップ１：CertificateManagerでSSL証明書を作成する
こちらのSSL証明書作成は無料で出来ます。
ELBやCloudFrontなど、AWSサービスで利用出来るものとなり、自動更新も出来るようなものなので構成によっては積極的に使っていきたい代物です。
先ずはAWS管理コンソールから「CertificateManager」を起動します。
次にリージョンを「米国東部 (バージニア北部) (us-east-1)」に変更し、「今すぐ始める」をクリックします。
そのため、CloudFrontやAPI Gatewayで利用する場合はリージョンを合わせて設定する必要があります。
ビューワーと CloudFront との間で HTTPS を必須にするには、証明書をリクエストまたはインポートする前に AWS Certificate Manager コンソールで AWS リージョンを 米国東部（バージニア北部） に変更する必要があります。
CloudFront とオリジンとの間で HTTPS を必須にする場合、オリジンとして ELB ロードバランサーを使用しているなら、任意のリージョンで証明書をリクエストまたはインポートできます。
引用：CloudFront で SSL/TLS の証明書を使用するための要件
※今回はワイルドカード証明書を発行する設定とします。
Route53へのドメイン登録が完了していれば数分で「検証状態：成功」に変化します。
※「成功」になる前に「続行」をクリックして問題ありません。
ステップ２：CloudFrontへSSL証明書設定、S3へのアクセス設定をする
SSL証明書の作成が終わったら、CloudFrontへSSLとS3の設定を実施します。
AWS管理コンソールから「CloudFront」をクリックします。
CloudFront管理コンソールより「Create Distribution」をクリックします。
※余談：リージョンがグローバルになっています。裏ではus-east-1がメインで動いていて、徐々に他リージョンに伝搬する仕組みのようです。
「Select a delivery method for your content.」の画面になります。
今回はS3の静的サイトを設定するため、「Web：Get Started」を選択します。
Origin Settingsの設定箇所（3つ）
・Origin Domain Name：SSL通信にしたいS3バケットを選択
※クリックすると候補が出てくるのでクリックしました。
・Reastrict Bucket Access：Yes
※S3へのアクセスをCloudFrontからのみとするため
・Origin Access Identity：Create a New Identity
※新たにAccess Identityを作成。Commentは自動で追加された内容で利用。
なお、既存のIdentityがあればそちらでもOK。推奨は既存のものを使ってねと書いてある。
Default Cache Behavior Settingsの設定箇所（1つ）
・Viewer Protocol Policy：Redirect HTTP to HTTPS
※HTTPの通信の場合はHTTPSにリダイレクトするように設定。
HTTPS Onlyでも問題無し。適宜設定は変更する。
その他設定は全てデフォルトで実施。
環境によって設定をいじってくださいませ。
Distribution Settingsの設定箇所（３つ）
・Alternate Domain Names(CNAMEs)：https通信とするドメイン名
・SSL Certificate：Custom SSL Certificate＞先ほど作成したSSL証明書を選択
他の部分はデフォルト設定のままです。
「Create Distribution」をクリックします。
CloudFrontの管理画面に戻ると以下のように作成されたものが表示されます。
「Status：Deployed」に変化すれば利用可能な状態となります。
※Deployedに変わるまで少し時間が掛かります。10分くらい待ってみましょう。
以上でCloudFrontの設定は完了となります。
ステップ３：Route53にCloudFrontの「Domain Name」を紐づける
Route53管理コンソール＞ホストゾーン＞「設定するドメイン名」＞レコードを作成をクリック
ルーティングポリシーは各自の環境に合わせて指定。
今回は冗長化とかもしないので「シンプルルーティング」を指定しました。
「シンプルなレコードを定義」より以下入力して登録する。
・レコード名：ステップ２(CloudFront)でSSL証明書を設定した際に入力したドメイン名
・値/トラフィックのルーティング先：
→CloudFrontディストリビューションへのエイリアス
→米国東部(バージニア北部)
→（ステップ２で作成したCloudFrontのDomain Name）
最後に「レコードの作成」で登録をし、Route53の設定も完了となります。
実際にアクセスしてみる
ACM、CloudFront、Route53への設定が完了しました。
今回の設定では「https://dev-vueslsapp.soypocket.work」というURLへアクセスすることが出来るようになります。
手順としては長くなりましたが、GUI上でポチポチするだけで簡単にSSL設定が出来ました。
Apacheとかですとconfにあれこれ書いて、中間証明書とか秘密鍵とかサーバに格納してhttpdを再起動とかの作業が必要だったのです。
それを再起動不要でGUIだけで完了出来るのは良いですね。証明書発行の手間が無いのは素敵。
サーバレスで構築する機会はあまりないですが、やる機会が出来た時には利用出来そうで覚えておいて損は無さそうと感じたのです。
AWSのサービスはAWS内で完結するものだと使いやすくて良いと改めて実感しました。