LoginSignup
139
96

More than 5 years have passed since last update.

お名前.comで購入したドメインをHerokuに設定する

Last updated at Posted at 2018-03-18

はじめに

本記事は、Herokuにお名前.comで購入したドメインを設定したい!SSL証明書を取得してhttps対応にしたいという方が対象です。

前提条件

  • お名前.comでドメインを購入済みである(今回はexample.comというドメインを購入したと仮定します)
  • Herokuにアプリをデプロイ済みである
  • HerokuのプランがHobby以上である

ドメインの設定

1.Herokuにドメインの登録

  1. Herokuにアクセスし、ドメインを設定したいアプリのダッシュボードに移動します。
  2. ダッシュボードのメニューバーからSettingを選択します。
  3. Settingに移動し、下にスクロールすると『Domains and certificates』という項目が現れます。
  4. Add domainボタンを押すとモーダルウィンドウが表示されるので、そちらに設定したいドメイン名を入力してください。(例:www.example.com)
    スクリーンショット 2018-03-18 18.57.20.png:w300

  5. 入力が完了すると赤い部分にドメイン名が表示されると思います。スクリーンショット 2018-03-18 19.19.17.png:w300

6. .herokudns.comと表示されているDNS Targetをコピーしておいてください。(例:www.example.com.herokudns.com)

2. SSLの設定

HerokuのプランをHobby以上にするとSSL証明書を自動で取得することができます。

  1. 先ほど設定した『Domains and certificates』の欄にあるConfigure SSLを選択すると、ドメイン名の入力時同様にモーダルウィンドウが表示されます。
  2. Automaticallyを選択しContinueを選択してください。image.png:w300
  3. これでSSLの設定は完了です。

お名前.com側の設定

  1. お名前.comにアクセスし、ドメインNaviにログインしてください。
  2. ログインすると上のメニューバーにDNSを押してください。
  3. ドメインのDNS関連機能設定にチェックを入れ、次へ進んでください。
  4. 中央に表示される内部ドメイン一覧から今回使用したいドメイン名にチェックを入れ次に進んでください。
  5. 下にスクロールするとDNSレコード設定を利用するという項目があるんで、設定するボタンを押してください。
    image.png:w300

  6. TypeをCNAMEにし、VALUEに先ほどコピーしたDNS Targetを入力してください。(例:www.example.com.herokudns.com)
    image.png:w300

  7. 入力を終えたら下にある変更確認にチェックし、確認画面に進み設定を完了してください。

  8. 設定を完了してから、24〜72時間の間でドメインが反映されると思います。
    ドメインが反映される前に取得したドメインにアクセスするとお名前.comのページに飛ばされ『このドメインは取得されています』と表示される思いますが、心配せず気長に待ってください。

補足

72時間以上待ってもドメインが反映されない場合は、Heroku側のドメインの設定がうまくいってないかもしれません。その際は、下記の赤枠のようにチェックマークが付いているか確認を行ってください。チェックマークにならない場合は再度、Heroku側の設定もしくはお名前.com側の設定を見直してみてください。image.png:w300

まとめ

いろいろ大変そうだと思っていましたが、SSLの設定やTarget DNSなど自動でしてくれるため非常に簡単でした。ドメインが反映されるまでそわそわすると思いますが気長に待つことが大事です!私は30時間近くかかりましたが、2〜3時間で反映される方もいるそうです。みなさんもHerokuにドメインを設定してみてはいかがでしょうか。

139
96
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
139
96