LoginSignup
5
6

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-11-02

はじめに

現在、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

ステップ2:確定とリクエスト

・内容に問題なければ「確定とリクエスト」をクリックします。
01_CertificatedManager04.png

ステップ3:検証

・「続行」をクリック。すると検証Eメールがドメイン情報を元に送られます。
ドメイン部分を開くと送信先が表示されます。
01_CertificatedManager05.png

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

01_CertificatedManager07.png

2. SSL設置(CloudFront)

「AWS > CloudFront」をクリック。

Distributions

・「Create Distribution」をクリックします。
02_CloudFront01.png

Step 1:Select delivery method

・Webの「Get Started」をクリックします。
02_CloudFront02.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

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つを組み合わせることでセキュアなサイトが簡単に作れます。
また、サーバーレスなので運用面でも費用面でもコストが限りなく抑えることができるのでシンプルなサービスサイトや告知だけのキャンペーンサイトにとてもオススメです。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6