Route53でドメイン買ってACMでSSL証明書発行してCloudFrontでGithub Pagesと買ったドメインと紐付けた

created at:

追記:2018/05/02

Github側でカスタムドメインでもSSL化対応してくれるようになったそうです。

CloudFrontよくわからん、AWSヤダみたいな人は無理しなくても良さそうです😇

https://blog.github.com/2018-05-01-github-pages-custom-domains-https/

なにこれ

タイトル通りの手順です。流れなので長いのはお許しください。

0からでもうまいことやれたので備忘録として書きました。参考までにどうぞ。

事前準備

  • AWSへのアカウント登録関連は完了しておく
    • メール認証・クレカ登録などお忘れなく
  • Github Pages作成
    • 無料垢でもOK

Route53でドメインを買う

  • Route53にアクセス。
  • 「Register Domain」ボタンよりドメイン購入手続き
    • Screenshot from Gyazo
  • 購入したいドメイン名を入力
  • 欲しいTLD(.com, .net, .orgなど)を選択
  • 「Check」ボタンより購入可能なドメインを検索
    • Screenshot from Gyazo
  • 「Add to cart」で欲しいドメインをカートに追加
  • ページ下部の「Continue」ボタンで次へ
    • Screenshot from Gyazo
  • 購入者入力画面で各種入力
    • Screenshot from Gyazo
  • 「Privacy Protection」項目は特に考慮することがなければ Hide contact information if the TLD registry, and the registrar, allow it にチェック
  • 入力後、問題なければ「Continue」ボタンで確認画面に遷移
  • 「Terms and Conditions」の同意確認箇所にチェックを入れ、「Complete Purchase」ボタンで購入確定へ
    • Screenshot from Gyazo
  • メールにて購入完了の旨を受け取る。ドメイン購入はこれにて完了。
    • 下図は実際に買ったときのやつ
  • AWS Certificate Managerに移動
    • Screenshot from Gyazo

AWS Certificate Manager

  • 右上のリージョンが「バージニア北部」になっていることを確認
    • なっていなかったら選択
    • CloudFrontで使用する際に必要
      • Screenshot from Gyazo
  • 「証明書のリクエスト」をクリック
    • Screenshot from Gyazo
  • ドメイン名の追加で先程購入したドメインを入力して「次へ」をクリック
    • Screenshot from Gyazo
  • 証明書のリクエスト検証はDNSにして「次へ」をクリック
    • Screenshot from Gyazo
  • 確認で問題なければ「確定とリクエスト」ボタンをクリック。
    • Screenshot from Gyazo
  • その後遷移する確定後の画面より「続行」ボタンをクリック。
  • ダッシュボードに遷移して、検証保留中になっているのを確認したらCloudFrontに移動
    • Screenshot from Gyazo

CloudFront

  • 「Distributions」ダッシュボードが開いているのを確認して、「Create Distribution」をクリック
    • Screenshot from Gyazo
  • Webの方の「Get Started」をクリック
    • Screenshot from Gyazo

01. Origin Settings

  • 「Origin Domain Name」に自分のGitHub pageを入力
    • ここではGitHub pageのURL=インデックスページという想定です
    • Screenshot from Gyazo

02. Default Cache Behavior Settings

  • 「Viewer Protocol Policy」をRedirect HTTP to HTTPS
  • 「Cache Based on Selected Request Headers」をWhitelist
  • 「Whitelist Headers」でHostsをAdd
    • Screenshot from Gyazo

03. Distribution Settings

  • 「Alternate Domain Names(CNAMEs)」に適応させるドメインを入力
  • 「SSL Certificate」はCustom SSL Certificateを選択
    • このときAWS Certificate Managerで作成したSSL証明書が選択できると思うのでそれを選択
    • Screenshot from Gyazo
  • 01~03までを入力したら「Create Distribution」ボタンをクリック
  • その後生成された「Domain Name」(dから始まるやつ)のURLをコピー
    • Screenshot from Gyazo
  • コピーしたURLが見れる状態になってるかを確認
  • アクセスできるのを確認したらRoute53に戻る

Route53

  • 左メニューより「Hosted Zones」を選択、ダッシュボードに購入したドメイン名あるのでクリック
  • 「Create Record Set」ボタンをクリック
    • Screenshot from Gyazo
  • Nameは空でOK
  • TypeはA
  • AliasはYesをチェック
    • Alias Targetに先程コピーしたURLを貼る
  • 「Save Record Set」クリックで追加
    • Screenshot from Gyazo

Github

  • GitHub Pagesのリポジトリに移動
  • 「Settings」タブより設定ページに移動
    • Screenshot from Gyazo

GitHub Pages

  • 「Custom domain」箇所に購入したドメインを入力、Save
    • DNSの浸透がまだだとはじかれるかもなので、10分くらい待つのとか、CloudFrontのStatusがDeployedになっているかなど確認した上でやる
    • Screenshot from Gyazo

反映を確認

🎉🎉🎉

Screenshot from Gyazo

感想

  • AWS、自分で1から触るのは始めてなのでDNS浸透なり証明書が無効だったりと色々ありしんどかった。
  • ただここまでやっておけばある程度動かせる下地ができる感じなのでやっておいてよかった
  • ドメイン買うのももっと安くやる方法もあるだろうけど、AWSサービス間で設定するなら全部まとめてやるのが分かりやすいかなと思ったのでこの手法で良かったと思う

参考

アーカイブ一覧へ戻る

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップページに戻る