Amazon CloudFront でブログを HTTPS 対応した

Written by @ryysud

Aug 15, 2017 18:29 · 1053 words · 3 minutes read #web

まえおき

前回の記事 “HTTPS を理解しているようで理解していなかったのでざっくりまとめてみた” に続いて、今回は実際に HTTPS 対応するまでの流れをご紹介していきます。

当ブログの構成

以下のような構成になっており今回は両方にHTTPS対応を行いました。

  • ブログは Github Pages でホスティング（reboooot.net）
  • 静的コンテンツは S3 でホスティング（static.reboooot.net）

HTTPS 対応までの流れ

具体的な流れはこんな感じ

① AWS Certificate Manager（ACM）で SSL証明書 を発行
② Amazon CloudFront で Origin を GitHub Pages / S3 として設定
③ Amazon Route 53 に CloudFront で生成されたURL（*.cloudfront.net）を設定

ググると綺麗にまとまっている記事があるので、それに従って実施したところ簡単に対応することが出来ました。また、今回は CloudFront を前段において HTTPS通信 をさせることが目的だったので、デフォルト24時間キャッシュから極力キャッシュさせない（1秒キャッシュ）ような設定を行いました。

HTTPS 対応完了

http://reboooot.net にアクセスすると https://reboooot.net にリダイレクトされ、証明書自体も問題ないことも確認できました！

https.png

ハマったところ

初めに Tokyo Region の ACM で SSL証明書 を発行したのですが、CloudFront で設定を行う際に SSL証明書 を選択することが出来ず、調べたところ Tokyo Region の ACM で取得した SSL証明書 は CloudFront で使えないとのことでした…。

「Services Integrated with AWS Certificate Manager」Amazonの公式文書によれば、AWS Certificate Managerで取得したSSL証明書をCloudFront使えるのは「米国東部（バージニア北部）」だけだとのこと。（米国東部（バージニア北部）は、us-east-1やcloudtrail.us-east-1.amazonaws.comにあたります。）

引用：Amazon Certificate ManagerのTokyo RegionでSSL取得してもCloudFrontでは表示されない

まとめ

今回は Github Pages でホスティングしているブログ（reboooot.net）と静的コンテンツ用の S3（static.reboooot.net）で個別に対応を行いました。

before.png after.png

「安全ではないサイト」から脱することが出来てよかったです (^ω^)

参考資料