Route53でドメイン買ってACMでSSL証明書発行してCloudFrontでGithub Pagesと買ったドメインと紐付けた
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。
追記：2018/05/02
Github 側でカスタムドメインでも SSL 化対応してくれるようになったそうです。
CloudFront よくわからん、AWS ヤダみたいな人は無理しなくても良さそうです 😇
https://blog.github.com/2018-05-01-github-pages-custom-domains-https/
なにこれ
タイトル通りの手順です。流れなので長いのはお許しください。
０からでもうまいことやれたので備忘録として書きました。参考までにどうぞ。
事前準備
- AWS へのアカウント登録関連は完了しておく
- メール認証・クレカ登録などお忘れなく
- Github Pages 作成
- 無料垢でも OK
Route53 でドメインを買う
- Route53 にアクセス。
- 「Register Domain」ボタンよりドメイン購入手続き
- 購入したいドメイン名を入力
- 欲しい TLD（.com, .net, .org など）を選択
- 「Check」ボタンより購入可能なドメインを検索
- 「Add to cart」で欲しいドメインをカートに追加
- ページ下部の「Continue」ボタンで次へ
- 購入者入力画面で各種入力
- 「Privacy Protection」項目は特に考慮することがなければ Hide contact information if the TLD registry, and the registrar, allow it にチェック
- 入力後、問題なければ「Continue」ボタンで確認画面に遷移
- 「Terms and Conditions」の同意確認箇所にチェックを入れ、「Complete Purchase」ボタンで購入確定へ
- メールにて購入完了の旨を受け取る。ドメイン購入はこれにて完了。
- 下図は実際に買ったときのやつ
- AWS Certificate Manager に移動
AWS Certificate Manager
- 右上のリージョンが「バージニア北部」になっていることを確認
- なっていなかったら選択
- CloudFront で使用する際に必要
- 「証明書のリクエスト」をクリック
- ドメイン名の追加で先程購入したドメインを入力して「次へ」をクリック
- 証明書のリクエスト検証は DNS にして「次へ」をクリック
- 確認で問題なければ「確定とリクエスト」ボタンをクリック。
- その後遷移する確定後の画面より「続行」ボタンをクリック。
- ダッシュボードに遷移して、検証保留中になっているのを確認したら CloudFront に移動
CloudFront
- 「Distributions」ダッシュボードが開いているのを確認して、「Create Distribution」をクリック
- Web の方の「Get Started」をクリック
01. Origin Settings
- 「Origin Domain Name」に自分の GitHub page を入力
- ここでは GitHub page の URL ＝インデックスページという想定です
02. Default Cache Behavior Settings
- 「Viewer Protocol Policy」をRedirect HTTP to HTTPS
- 「Cache Based on Selected Request Headers」をWhitelist
- 「Whitelist Headers」でHostsを Add
03. Distribution Settings
- 「Alternate Domain Names(CNAMEs)」に適応させるドメインを入力
- 「SSL Certificate」はCustom SSL Certificateを選択
- このとき AWS Certificate Manager で作成した SSL 証明書が選択できると思うのでそれを選択
- 01~03 までを入力したら「Create Distribution」ボタンをクリック
- その後生成された「Domain Name」（d から始まるやつ）の URL をコピー
- コピーした URL が見れる状態になってるかを確認
- アクセスできるのを確認したら Route53 に戻る
Route53
- 左メニューより「Hosted Zones」を選択、ダッシュボードに購入したドメイン名あるのでクリック
- 「Create Record Set」ボタンをクリック
- Name は空で OK
- Type は A
- Alias は Yes をチェック
- Alias Target に先程コピーした URL を貼る
- 「Save Record Set」クリックで追加
Github
- GitHub Pages のリポジトリに移動
- 「Settings」タブより設定ページに移動
GitHub Pages
- 「Custom domain」箇所に購入したドメインを入力、Save
- DNS の浸透がまだだとはじかれるかもなので、10 分くらい待つのとか、CloudFront の Status が Deployed になっているかなど確認した上でやる
反映を確認
🎉🎉🎉
感想
- AWS、自分で１から触るのは始めてなので DNS 浸透なり証明書が無効だったりと色々ありしんどかった。
- ただここまでやっておけばある程度動かせる下地ができる感じなのでやっておいてよかった
- ドメイン買うのももっと安くやる方法もあるだろうけど、AWS サービス間で設定するなら全部まとめてやるのが分かりやすいかなと思ったのでこの手法で良かったと思う