S3で構築したサイトにCloudFrontとCertificate Managerを使ってSSLを導入する。

はじめに

現在、S3をベースに構築したサイト(blog.proudit.jp)をCloudFrontを使ってHTTPSへ切り替えることにしました。 また、HTTPへのアクセスは全てHTTPSへリダイレクトするようにCloudFront側で設定もします。 http→https_after.png

流れ 1.証明書の作成(Certificate Manager) 2.SSLの設定(CloudFrontの導入) 3.DNS切り替え(Route53)


# 1. 証明書の作成(Certificate Manager) まずは**Certificate Manager**で証明書の作成です。 「AWS > Certificated Manager」をクリック。

リージョンバージニアに変更します。 証明書はバージニアで作成しないとCloudFrontへ導入できないので注意してください。 01_CertificatedManager01.png

・「今すぐ始める」または「証明書のリクエスト」をクリックします。 01_CertificatedManager02.png


## ステップ1:ドメイン名の追加 ・ドメイン名に取得するドメイン名を入力し「**確認とリクエスト**」をクリックします。 ![01_CertificatedManager03.png](/images/posts/f301d6d4-7cec386e-a929-c3e4-4b7e-303e8b3d1076.png)
## ステップ2:確定とリクエスト ・内容に問題なければ「**確定とリクエスト**」をクリックします。 ![01_CertificatedManager04.png](/images/posts/2afe43aa-f72fd1f1-2a0c-60df-b4ea-a78792697fec.png)
## ステップ3:検証 ・「**続行**」をクリック。すると検証Eメールがドメイン情報を元に送られます。 ドメイン部分を開くと送信先が表示されます。 ![01_CertificatedManager05.png](/images/posts/92d3c121-60851214-e514-9974-f9a6-3fe3f08e0c48.png)

検証が認証されるまで「検証保留中」になります。検証が完了すると「発行済」となります。 01_CertificatedManager06.png

01_CertificatedManager07.png


# 2. SSL設置(CloudFront) 「AWS > CloudFront」をクリック。
## Distributions ・「**Create Distribution**」をクリックします。 ![02_CloudFront01.png](/images/posts/03b246b6-f7c1f886-2020-8d95-d1f6-61e194f1fd2c.png)
## Step 1:Select delivery method ・Webの「**Get Started**」をクリックします。 ![02_CloudFront02.png](/images/posts/7e3dd51e-3d2222de-a3a1-255e-198d-9f4352acebd3.png)
## Step 2:Create distribution ### Origin Settings ・**Origin Domain Name**に設定したいS3バケット名を選択します。 ・**Restrict Bucket Access**という項目が現れるので「**Yes**」をチェックします。 ・**Create Read Permissions on Bucket**を「**Yes, Update Bucket Policy」**にチェックします。 ![02_CloudFront03-1.png](/images/posts/e100b0a2-2ff4fca3-ff3e-5bf4-6437-0e05f56a6b41.png)

Default Cache Behavior Settings

Viewer Protocol Policyで「Redirect HTTP to HTTPS」を選択します。 02_CloudFront03-2.png

Distribution Settings

Alternate Domain Namesドメイン名を入力します。 ・SSL Certificateを「Custom SSL Certificate」を選択し、先ほどCertificate Managerで作成した証明書を選択します。 02_CloudFront03-3.png

Default Root Objectに「index.html」を入力します。 02_CloudFront03-4.png

・「Create Distribution」をクリックして作成します。 02_CloudFront03-5.png

02_CloudFront04.png

・「In Progress」が「Deployed」になったら完了です。 02_CloudFront05.png


# DNS設定変更(Route53) 「AWS > Route53」をクリック。

・「Hosted zones > 対象のDomain Name」をクリックします。 03_Route5301.png

・対象のレコードをクリックしAlias Targetで先ほど作成したCloudFrontを指定します。 03_Route5302.png

・「Save Record Set」をクリックして保存します。 03_Route5303.png

・サイトにアクセスするとhttpsでアクセスされているのがわかります。 04_Browser01.png

以上でSSLの導入が完了です。


# ポイント 設定する際に注意するポイントは3つです。 ひとつ目めは、 **「Certificate Managerでバージニアを選択すること。」** 現時点でCloudFrontへ導入するにはバージニアでSSLを作成しなければなりません。もし他のリージョンで作成した場合、CloudFrontの「**Custom SSL Certificate**」に作成した証明書が表示されなくてハマりポイントになります。

ふたつ目は、 「CloudFrontからS3へのアクセス権限を付与すること。」 CloudFront作成時にCreate Read Permissions on Bucketの項目を 「Yes, Update Bucket Policy」にチェックを入れることで、S3のOrigin Access Identityを同時に作成し、S3のアクセスポリシーを修正してくれます。

そして最後のみっつ目は、 「CloudFrontを作成する際のDefault Root Objectにindex.htmlを入力すること。」 ここを入力しておかないとルートでアクセスした際にコンテンツが見つからなくなってしまいます。


# おわりに 「S3 + CloudFront + Certificate Manager」の3つを組み合わせることでセキュアなサイトが簡単に作れます。 また、サーバーレスなので運用面でも費用面でもコストが限りなく抑えることができるのでシンプルなサービスサイトや告知だけのキャンペーンサイトにとてもオススメです。

サイトのSSL導入ご検討サーバレス化へのご興味がお有りの方はぜひ**「お問い合わせ」**よりご相談ください。