Herokuとお名前.comでサブドメインなしの独自ドメインを使う方法
TL; DR
CloudflareのDNSを使え
経緯
先日、青空文庫を縦書きで読めるWebアプリを作りました（今も開発中です）。
Herokuにデプロイしたのでaozora-format.herokuapp.comを使っていましたが、せっかくなら独自ドメインにしたいな〜とお名前.comで検索してみたところ、「.jp」ドメインが1円でした。
早速取得してApexドメイン（サブドメインなし）で使おうと考えました。
まずはDNSの設定をしようとHerokuのヘルプを見てみると、「サブドメインの場合はCNAMEを、サブドメインなしの場合はDNSプロバイダによって異なるけど、ALIASやANAMEを設定してね」とあります。
「Aレコードは使えません」とも書いてありますね。
Some DNS providers will only offer A records for root domains. Unfortunately, A records will not suffice for pointing your root domains to Heroku because they require a static IP. These records have serious availability implications when used in environments such as on-premise data-centers, cloud infrastructure services, and platforms like Heroku. Since Heroku uses dynamic IP addresses, it’s necessary to use a CNAME-like record (often referred to as ALIAS or ANAME records) so that you can point your root domain to another domain.
DNSプロバイダによってはルートドメインの設定にAレコードしか使えないことがあります。Aレコードは固定IPを設定する必要があるので、残念ながらHerokuアプリを指定するには適していません。（中略）Herokuは動的IPアドレスを使っているので、あなたのルードドメインが別のドメインを指すようにするにはCNAMEのようなレコード（よくALIASやANAMEレコードと呼ばれています）を使う必要があります。
「ふむふむ、ANAMEとかALIASとかに設定するのね」とお名前.comで使えるDNSのヘルプを見たところAレコードを設定する方法しか使えないそうで、途方に暮れてしまいました。
日本語ドメインは、A / AAAA / CNAME レコードのみご利用いただくことが可能です。
仕方がないのでGoogle先生に質問したところ、以下の記事がヒットしました。
PointDNSというHerokuのAdd-onを使う方法もあるようですが、今回はCloudflareのDNSを使う方法を選びました。
ほぼ『Heroku + Cloudflare』でルートドメインかつSSLでサイトを運用する | vdeepに書いてある通りにしたらうまくいったので、書き残しておきます。
設定方法
前提
- ドメインはお名前.comで取得済み
- アプリはHerokuにデプロイ済みで
*アプリ名*.herokuapp.comが機能している - Cloudflareのアカウント登録は済んでいる
なにをするか
初期状態では、お名前.comで取得したドメインの名前解決はお名前.comのDNSを使って行われます。
これをCloudflareのDNSを使うように変更し、CloudflareのDNSで独自ドメインから*アプリ名*.herokuapp.comへのエイリアスを設定します。
最後に、Herokuアプリがその独自ドメインからのアクセスを許可するように設定して完了です。
1. CloudflareのDNSを設定する
まずはCloudflareにドメインを追加し、DNSの設定をしておきます。
Cloudflareにログインしてダッシュボードの「Home」にある「Add a Site」ボタンを押します。
すると「ドメイン名はなんや？」と聞かれるのでドメイン名を入力し、「Add Site」ボタンを押してドメインを追加しましょう。
ドメインごとのダッシュボードから「DNS」を選択し、「Add Record」ボタンを押します。
以下のように@がアプリ名.herokuapp.comを指すよう、CNAMEレコードを設定し、「Save」すればOKです。
もしサブドメインも必要なら同様にCNAMEを設定してください。
2. お名前.comのDNSからCloudflareのDNSを使うように変更する
CloudflareのDNSを設定したページの下にCloudflareのDNSのアドレスがあるので、それを使うようにお名前.com Naviで変更します。
まずはお名前.com Naviにログインし、「ネームサーバーの設定」へ行きます。
設定するドメインを選択し、「その他のネームサーバーを使う」のところにCloudflareのネームサーバをコピペし、「確認」→「保存」します。
しばらく待つと設定が反映されます（早ければ30分、遅くとも72時間程度かと）。
ここまでできた状態で独自ドメインへブラウザでアクセスすると、Cloudflareの520: web server returns an unknown errorというエラーが表示されるようになっているはず。
3. Herokuアプリにドメインを追加する
520: web server returns an unknown errorというのは、Herokuアプリ側でエラーが出ていることを示しています。
が、*アプリ名*.herokuapp.comにアクセスするとちゃんと動いているはずです。なんでや。
これはHerokuアプリに独自ドメインからアクセスすることを許可していないために表示されるエラーです。
許可するためには、Herokuアプリの設定からドメインを追加する必要があります。のでします。
Herokuにログインして、アプリのダッシュボードから「Settings」を表示しましょう。
「Domains」という項目の「Add domain」ボタンを押してドメインを追加します。
これで完了です！
まとめ
最近のWebはCDNに乗せることが多いと思うので、別のDNSサービスなどに登録すること無くCloudflareの機能でなんとかできたのは助かりました。
お名前.com以外で取得した独自ドメインにも適用できる手法ですし、何より無料でできるのが大変ありがたいと思いました。
おわり。
Discussion