Help us understand the problem. What is going on with this article?

初めてHerokuで独自ドメインを公開するあなたへ

More than 1 year has passed since last update.

※この記事は2018年9月に公開後、herokuのバージョンアップを受けての変更点を反映させた内容になります。(2018年10月31日時点)

独自ドメインで公開したい

最近herokuを使って独自ドメインを公開するということがあり、少し調べていましたが、いまいちまとまったものがないことと、あまり最新のものがなかったので改めて書いてみようと思いました。

この記事で書くことと書かないこと

この記事では初めて独自ドメインを公開する、、、!という人に向けて、
簡易に独自ドメインを公開するまでの最短のプロセスを記そうと思うので、
herokuでやりやすい、サブドメイン(wwwがついてるもの)の公開の仕方を書こうと思います。
ルートドメインの公開の仕方に関しては次回の記事で書こうと思います。

前提

  • すでにドメインはバリュードメインやお名前.comを使って取得しているものとする
  • herokuはhobbyプラン(無料の一つ上の7$のプラン)を使っているものとする(このプラン以上じゃないと独自ドメインが使えないため)

必要なこと

独自ドメインの公開に必要なことは以下の通りです。

  • heroku側の設定をすること
  • ドメイン側の設定をすること

この2つをやればすぐに公開できます。

heroku側の設定について

まずはheroku側の設定をしてみます。
前提としてherokuにすでにデプロイしていることとします。
(herokuのデプロイに関しては この記事 がとてもわかりやすかったので参照してみてください。)

herokuにドメインを追加する

最初に、デプロイした状態で

heroku domains:add www.[取得したドメイン]
heroku domains:wait www.[取得したドメイン]

と入力します。
これでherokuにドメインが追加されました。
例えば、 sample.com というドメインを取得したなら、

heroku domains:add www.sample.com
heroku domains:wait www.sample.com

と入力することで完了です。

別の方法として、herokuのダッシュボードからも設定ができます。
使用しているアプリのページへ飛び、[Setting]の部分から、下記の画像のような [Domains and certifications] というところがあるので、そこから [Add domain] のボタンを押すことで追加することもできます。
注意として、ここでも www. をつけるのを忘れないようにしましょう。

スクリーンショット 2018-08-03 17.19.06.png

いずれの方法にしても、ドメインが追加されて、

Domain Name       DNS Record Type         DNS Target
-----------       ----------------        ---------------------------
www.[取得したドメイン] CNAME                   [ランダムな英語と数字の組み合わせ].herokudns.com

と出てくれば完了です。
※herokuのバージョンが2018年9月に変更され、もともと DNS Targetは
www.[取得したドメイン].herokudns.com
だったのが
[ランダムな英語と数字の組み合わせ].herokudns.com
になっています。このようにバージョンによって若干設定の仕方が異なるので、
つまずいたときは、公式ドキュメント を見るのをお勧めします。

PointDNSを設定する

ドメインを追加したら、herokuのアドオンである Point DNS を追加しましょう。
DNSとは簡単にいうとドメインと IPアドレス(インターネット上の住所) を結びつけて、
取得したドメインが、ちゃんとインターネット上に住所を構えるためのシステムです。

Point DNSはherokuがアドオンとして提供しているDNSです。
今回はそのPoint DNSを使ってDNS設定を行なっていきます。

①ドメインを追加した後に、

heroku addons:create pointdns:developer

と入力し、point DNSをherokuに追加します。

先ほどと同様にherokuのダッシュボードでも可能です。
herokuのダッシュボードでやるには、 [Resources] の [Add-ons] の下の検索窓から Point DNSと検索すると出てきます。(下記の画像を参考にしてください。)

スクリーンショット 2018-08-03 17.43.08.png

②アドオンを追加したら、ついでにレコードの設定もします。
herokuのダッシュボードから Point DNS をクリックすると以下のような Point DNSのページに移動します。

スクリーンショット 2018-08-03 17.49.10.png

ここで自分のドメインをクリックして次に、いくつかのレコードが並んだページが出てきます。
そこで、 [Add Record] というところから、レコードの追加モーダルを開きます。

スクリーンショット 2018-08-03 17.52.35.png

ここで、

  • CNAME タイプのレコードと、ALIAS タイプのレコードを作成します。
  • どちらも Name には wwwを追加し
  • CNAMEHostname には [ランダムな英語と数字の組み合わせ].herokudns.com (DNS target)を追加
  • ALIASTarget には、[ランダムな英語と数字の組み合わせ].herokudns.com (DNS target)を追加
  • ALIASTTL には、 60 と記載(CNAMEはそのままで大丈夫)

という作業をして、 CNAMEレコードとALIASレコードを作成します。

これでレコードが6つ(SOA, ALIAS, CNAME, NS×3)になれば完了です。

ドメイン側の設定

お名前.comバリュードメイン などでドメインを取得するかと思いますが、微妙にそれぞれでやり方が違います。今回は少し難しい(と個人的に感じた) バリュードメイン の方でやってみたいと思います。

①ログインする
マイページに移動しましょう

②ドメインのコントロールパネルにいきましょう。バリュードメインの場合は以下のように取得したドメインの横にボタンが複数あります。

スクリーンショット 2018-08-03 17.32.56.png

ここから、 DNS/URL というところを開きます。(特に操作は必要ありませんが、バリュードメインのIPアドレスである a @ 202...のようなaレコードが書かれていることを確認してください。)

③次に同じくコントロールパネルから、 ネームサーバー というところをクリックしてください。

フォームがいくつかあり、上から3つぐらいがデフォルトで何か書かれていると思います。
このフォームに、先ほど、 Point DNSのレコード画面NS というタグのついたものを記載していきます。

そのままコピペで大丈夫ですが、最後に . がついていると正常に登録できないので外しておきましょう。

スクリーンショット 2018-08-03 18.03.54.png

上記のように登録できたら完了です。

これでしばらく待つとドメインにアクセスできるようになります!
(ぼくは7.8分かかりました。)
ふ〜という感じですね。初めてだたなかなか骨が折れるかと思います。
お疲れ様でした。

ついでにSSLもやっちゃう

最近のherokuでは便利なことに自動でSSLの設定も行なってくれるようなので、
有料のDynoを使っている場合は簡単なのでおすすめです。
しっかりとしたサイトやアプリをつくるならSSLはマストなので入れることをオススメします。

ダッシュボードの [setting] からアクセスして [Configure SSL] と押すだけで自動で SSLの設定をしてくれます。便利すぎる、、、!!

僕自身も初めてドメインを公開するときはかなり前の記事で今はないアドオンとか出てきたり、でちょっと苦戦しました、、、。独自ドメイン公開の喜びを最短で噛み締められることを祈ってます🙏

alma
デザインをもっと好きになるサービス、Cocoda!の開発・運営をするスタートアップです。
https://cocoda-design.com/
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした