Herokuで有料Dynoを使いつつ、独自ドメインをCloudflareでSSL対応(https化)してルートドメイン設定する方法

この記事を書いたひと: @t4traw 2017年11月5日

最近、キャンプ道具を管理するOKCAMP(https://okcamp.me)というサービスを開発しました(現在まだα版)。

OKCAMPはHerokuでホストしています。ドメインはムームードメインで取得しました。

一般公開するAppなのでhttps化をしっかりしようと思い、調べてみるとHerokuは有料Dynoを使えば簡単にhttps化できるからそれを使用する予定でした。

ところが、運営ブログ(https://blog.okcamp.me/)をJekyll×GitHub Pagesで運用しようとした時に、サブドメインのhttps化はCDNを使わないとできない事がわかりました。

CDN使うならメインのOKCAMPもルートドメインでアクセスできるようにしてCDN側でhttps化した方が良いよね?となり、DNSをCloudflareにして、ルートドメインの設定などなどを設定した時にちょっぴりハマったので記事にしておきます。

まずはHerokuの有料Dynoに変更、

Herokuの無料Dynoは30分間アクセスがないとAppがフリーズするので、有料Dyno(Hobby)を使うことにしました。

次に、Settingsの中のDomains and certificatesという項目でAdd domainを押して取得したドメインを入力します。

Herokuは本来Aレコードの設定ができないので、www.okcamp.meといったサブドメインしか使えないのですが、後述するCloudflareなどのサービスを使えば擬似的にルートドメインでの運用が可能になります。

で、HerokuのAdd domainで入力するのはどうすればいいのかと言うと、僕の場合はなぜか両方(okcamp.meとwww.okcamp.me)の両方を入力したらうまくいけました。本当はokcamp.meだけで良さそうな気がしますが、とりあえず動いたのでこのままで。また変更があったら編集します。

Cloudflareの登録と設定、ムームードメインでのネームサーバーの変更

次にDNSサービスのCloudflareの登録、設定をします。

おそらく、Sign upのボタンから取得したドメインの入力はスムーズにいけると思います。入力していくとDNS設定をこれにしてくれという画面が表示されます。

Change Nameservers toに表示されている項目をムームードメインに設定します。

これで、これ以降のDNSの設定は全てCloudflareで行えます。

Cloudflareの設定

CloudflareのDNSタブからDNSの設定をします。

上にも書きましたが、HerokuではAレコードの設定ができないので、ルートドメインのように運用するには、CNAMEにドメインそのままを入力します。今回の自分の場合だとokcamp.meをCNAMEのNameに入力しました。

これでルートドメインにアクセスがあった場合、Valueへ案内してくれるようになります。

次にSSLの設定です。Cryptoのタブへ移動し、SSLの設定をFullに変更します。

以上でhttps化の設定が完了しました。長い時にはDNSの浸透に1日ぐらいかかるらしいので、しばらくしてから取得したドメインをhttpsでアクセスしてみてください。

HSTS(HTTP Strict Transport Security)の設定も同時にすると良いという記事をいくつか見ましたが、サーバーをHerokuで運用しているし、注意文に書かれている内容に自身がなかったので、今回はパスしました。

というわけでHerokuとCloudflareで独自ドメインをルートドメイン設定する方法でした。

OKCAMPはβ版がリリースできたら、また開発の時のあれこれを投稿したいと思います。