※この記事は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.
をつけるのを忘れないようにしましょう。
いずれの方法にしても、ドメインが追加されて、
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と検索すると出てきます。(下記の画像を参考にしてください。)
②アドオンを追加したら、ついでにレコードの設定もします。
herokuのダッシュボードから Point DNS をクリックすると以下のような Point DNSのページに移動します。
ここで自分のドメインをクリックして次に、いくつかのレコードが並んだページが出てきます。
そこで、 [Add Record] というところから、レコードの追加モーダルを開きます。
ここで、
-
CNAME
タイプのレコードと、ALIAS
タイプのレコードを作成します。 - どちらも
Name
にはwww
を追加し -
CNAME
のHostname
には[ランダムな英語と数字の組み合わせ].herokudns.com
(DNS target)を追加 -
ALIAS
のTarget
には、[ランダムな英語と数字の組み合わせ].herokudns.com
(DNS target)を追加 -
ALIAS
のTTL
には、60
と記載(CNAME
はそのままで大丈夫)
という作業をして、 CNAME
レコードとALIAS
レコードを作成します。
これでレコードが6つ(SOA, ALIAS, CNAME, NS×3)になれば完了です。
##ドメイン側の設定
お名前.com や バリュードメイン などでドメインを取得するかと思いますが、微妙にそれぞれでやり方が違います。今回は少し難しい(と個人的に感じた) バリュードメイン の方でやってみたいと思います。
①ログインする
マイページに移動しましょう
②ドメインのコントロールパネルにいきましょう。バリュードメインの場合は以下のように取得したドメインの横にボタンが複数あります。
ここから、 DNS/URL というところを開きます。(特に操作は必要ありませんが、バリュードメインのIPアドレスである a @ 202...のようなaレコードが書かれていることを確認してください。)
③次に同じくコントロールパネルから、 ネームサーバー というところをクリックしてください。
フォームがいくつかあり、上から3つぐらいがデフォルトで何か書かれていると思います。
このフォームに、先ほど、 Point DNSのレコード画面 の NS
というタグのついたものを記載していきます。
そのままコピペで大丈夫ですが、最後に .
がついていると正常に登録できないので外しておきましょう。
上記のように登録できたら完了です。
これでしばらく待つとドメインにアクセスできるようになります!
(ぼくは7.8分かかりました。)
ふ〜という感じですね。初めてだたなかなか骨が折れるかと思います。
お疲れ様でした。
##ついでにSSLもやっちゃう
最近のherokuでは便利なことに自動でSSLの設定も行なってくれるようなので、
有料のDynoを使っている場合は簡単なのでおすすめです。
しっかりとしたサイトやアプリをつくるならSSLはマストなので入れることをオススメします。
ダッシュボードの [setting] からアクセスして [Configure SSL] と押すだけで自動で SSLの設定をしてくれます。便利すぎる、、、!!
僕自身も初めてドメインを公開するときはかなり前の記事で今はないアドオンとか出てきたり、でちょっと苦戦しました、、、。独自ドメイン公開の喜びを最短で噛み締められることを祈ってます🙏