GitHub
AWS

Github Pagesでホスティングしつつ、CloudFrontを使ってサイトをSSL対応の独自ドメインにする

More than 1 year has passed since last update.

自身のペラ1サイト https://kechol.net/ を更新した時に、ホスティングをS3からGithub Pagesに移行したのとSSLに対応しました。そのときのメモです。


TL;DR


  • Github Pagesではリポジトリをプロジェクトページとしてホスティングできる

  • CloudFrontを使えば、Github PagesでホスティングしたページはSSL対応の独自ドメインにできる


    • SSL証明書は Amazon Certificate Manager を使って無料で発行できる

    • CloudFrontのOriginを *.github.io/project-page に割り当てる

    • 独自ドメインにするにはCloudFrontのURLをRoute 53で割り当てる




Github Pagesでリポジトリをホスティングする

Github Pagesでは、ユーザ/組織のページかプロジェクトページを github.io というドメインの元でホスティングすることができます。

User, Organization, and Project Pages - User Documentation

ユーザページは自身のプロフィールとして、プロジェクトページはそのプロジェクトのドキュメントや紹介のためのページとして活用することができます。

今回はプロジェクトページを利用する前提で、kechol/kechol.net の gh-pages ブランチ にビルドした静的ファイルを設置しました。


独自ドメインとSSLに対応する

さて、GithubのユーザページやS3でのホスティングであれば、あとはRoute 53でCNAMEを当てれば独自ドメインにできますが、今回はプロジェクトページで、かつSSL対応をしなければならないので、前段にCloudFrontを配置します。

なお、前段のCDNとしてCloudFlareを使えば、完全に無料でサイトをホスティングすることが可能ですが、今回はDNSのNameServerを変えたくなかったのとFree Planの制限を避けたかったため利用していません。


Amazon Certificate Manager (ACM) でSSL証明書を発行する

CloudFrontの設定の前に、ACMでSSL証明書を発行しておきましょう。ACMは裏側で Let's Encrypt を利用しており、無料でSSL証明書を発行できるほか証明書の更新も自動で行ってくれます。

なお、ACMの利用にはドメイン認証の都合上、hostmaster@yourdomain.com, admin@yourdomain.com など指定のメールアドレスでメールを受信できるように設定されている必要がありますので注意してください。(今回は説明は割愛します)

AWS Certificate Manager

後ほど説明しますが、CloudFront では、North Virginia (us-east-1) で発行したSSL証明書しか指定できないため、発行の際は注意してください。

"Request a certificate" (初回では Get Started)から証明書を発行します。証明書発行をリクエストすると、AWSからドメイン認証のメールが飛んでくるのでリンクを踏んで承認します。

Screen_Shot_2017-01-11_at_8_40_54_PM.png

承認後、証明書一覧の画面で Status が Issued になれば発行完了です。

Screen Shot 2017-01-11 at 8.44.15 PM.png



CloudFront を設定する

CloudFront の "Create Distribution" から新規に CloudFront の Distribution を作成します。

ポイントとしては、Origin Settings の Origin Domain Name が *.github.io のドメインになっていることと、Origin Path が/project-name のようなかたちになっていることです。

Screen Shot 2017-01-11 at 8.48.35 PM.png

そして、下部の Distribution Settings で先ほど発行したSSL証明書を指定します。(Custom SSL Certificate の部分)

CNAMEsには設定したいカスタムドメインを入力してください。

Screen_Shot_2017-03-01_at_12_35_36.png

その他の設定としては、Viewer Protocol Policy で "Redirect HTTP to HTTPS" を指定しておくと常にHTTPSでページが表示されて良いと思います。


Route 53 でDNSレコードを作成する

CloudFront の設定が完了すると、yourcdn1234.cloudfront.net のようなURLが発行されるので、ページが閲覧できるか確認のうえ、Route 53でDNSの設定をすれば完了です。

Screen_Shot_2017-01-11_at_8_56_26_PM.png

Alias の Aレコードとして設定するのが簡単だと思います。


Screen Shot 2017-01-11 at 9.15.31 PM.png

どうやらちゃんと動いてるっぽいです。良かったですね。