TakayukiKoyama Geek Blog

Create, Entertain, Experience

S3サイト を CloudFront + ACM + Route53 でSSL化する方法

目的

  1. 会社サイト ( http://geeken.jp ) をいい加減SSL対応しなきゃ
  2. AWSACM(AWS Certificate Manager)が無料らしい?
  3. ちゃんと設定しないと「保護されていない通信」扱いされるのでメモ

前提

  1. お名前.comで買ったドメインをRoute53のDNSサーバに丸投げ
  2. WordPressを静的ファイルに変換してS3に置いてドメインをS3に指している

Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門

Amazon Web Servicesではじめる新米プログラマのためのクラウド超入門

ACMSSL証明書を作る

  • ※ リージョンを「米国東部(バージニア北部)」にする
    • us-east じゃないと CroundFront で ACM を選択できない
  • 証明書リクエスト:「パブリック証明書のリクエスト」
  • ドメイン名の追加

f:id:tkoyama1988:20180522001551p:plain:w400

 サブドメインをつけるなら上記のような追加が良いらしい。

  • DNS or Eメール検証
    • Route53/S3ならボタンをポチるだけでRoute53にレコード追加してくれるのでDNSがオススメ
  • 検証が終わるまで待つ

CloudFront を S3 の前に挟んで HTTPS 対応

 以下のような流れでアクセスできるようにする。S3自体にSSL化はできないらしいので間にCloudFrontを挟む。

従来

( お名前 -> ) Route53 -> S3

今回

( お名前 -> ) Route53 -> CloudFront -> S3

  • Create Distribution で CloudFront を作成
  • Web で Get Startedして、以下の設定を行う
  • まずは向き先を S3 のバケットにする

追記(2018.5.22)

※ 以下、訂正

f:id:tkoyama1988:20180522002537p:plain:w400

↑ のS3バケット選択だとサブディレクトリが index.html を見つけてくれない

f:id:tkoyama1988:20180522112536p:plain:w400

S3 の Static website hosting ドメインを指定する

追記終わり(2018.5.22)

  • Httpでアクセスしたときは Https にリダイレクトする

f:id:tkoyama1988:20180522002629p:plain:w400

  • ACM の証明書を設定

f:id:tkoyama1988:20180522002649p:plain:w400

Route53 の向き先を変える

  • CloudFrontの向き先が S3 になったので、Route53 の向き先を CloudFront にする。
  • 以下のレコードを編集 or 新規追加
    • Type : A
    • Alias : Yes
    • Alias Target : < CroudFrontで作成したドメイン xxxx.cloudfront.net >

f:id:tkoyama1988:20180522020343p:plain:w400

あとはブラウザでアクセスして確認して終わり。

※ 新しいタブでアクセスしないと「保護されていない通信」になってしまうことがあるので、もし「保護されていない通信」になったら設定を確認する前に新しいタブ/ウィンドウを開いてみよう。