Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
11
Help us understand the problem. What is going on with this article?
@yamanoku

Route53でドメイン買ってACMでSSL証明書発行してCloudFrontでGithub Pageと買ったドメインと紐付けた【追記あり】

More than 3 years have passed since last update.

Route53でドメイン買ってACMでSSL証明書発行してCloudFrontでGithub Pageと買ったドメインと紐付けた【追記あり】

by yamanoku
1 / 29

追記:2018/05/02

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

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


なにこれ

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

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


事前準備

  • AWSへのアカウント登録関連は完了しておく
    • メール認証・クレカ登録などお忘れなく
  • Github Page 作成
    • 無料垢でも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


  • 入力後、問題なければ「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 Page

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

Screenshot from Gyazo


GitHub Pages

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

Screenshot from Gyazo


反映を確認

:tada::tada::tada:

Screenshot from Gyazo


感想

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

参考

11
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yamanoku
一児の父です。
crowdworks
21世紀の新しいワークスタイルを提供する日本最大級のクラウドソーシング「クラウドワークス」のエンジニアチームです!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
11
Help us understand the problem. What is going on with this article?