最近のブログでは独自ドメインを扱うネタが多くなっています(これとか、これとか)。この背景としては旧 Google Apps(現 Google Workspace)の無料版が廃止になって、猶予期間の終了が迫り、これまで取得したドメインの運用を Google Apps に任せていたことに起因して、無料または安価な代替運用先を探していることにありました。ただ(自分的に優先順位の高かった)独自ドメインのメールサーバーについてはある程度対応できたと思っています。
上述のように独自ドメインのメール環境についてはある程度解決しました。次は独自ドメインウェブサイトの問題です。独自ドメインのウェブサイトやウェブサービスを Google Apps を使わずに用意する方法です。まあ、ホスト名だけであれば DNS の CNAME 設定だけでなんとかなるのですが、問題になるのは SSL を使いたいケース(つまり https で始まる URL で独自ドメインのウェブサイトを公開したいケース)です。
これも手間を惜しまないのであれば、Let's Encrypt などで独自ドメインの証明書を無料で取得・更新できます。その証明書を使ってサービスを公開すれば https 対応はできます。ただ、これはこれで(アプリケーション側で証明書を意識するのも)面倒だし、もし証明書の更新を忘れてしまうとサービスが見えなくなってしまったり、証明書を更新した際の再起動なども行う必要があるので、手順としても(コマンドラインで作業するなど)面倒だったりします。独自ドメインのウェブサイトを運用する上でここを(できれば無料、または安価で)どうにかできないだろうか、という課題があります。
そして本ブログエントリはこの部分を
・アプリケーションは無料の Heroku で公開して、
・無料の Cloudflare で SSL 対応した独自ドメイン名でアクセスできるようにする
という構成を実現するための手順を紹介します。そして本ブログエントリはこの部分を
・アプリケーションは無料の Heroku で公開して、
・無料の Cloudflare で SSL 対応した独自ドメイン名でアクセスできるようにする
【アプリケーションを Heroku で公開する】
対象のウェブアプリケーションを Heroku で公開します。アカウントを所有していない場合はサインアップします。
ここでは特別な設定はほぼ不要ですが、1点だけ。Heroku で独自ドメインを使うには、有料版を利用するか、クレジットカードを登録する形で無料枠を使う必要がある点に注意してください。Heroku 自体はクレジットカードを登録せずに無料範囲内で利用することができ、その範囲内でウェブアプリケーションを公開することもできますが、この後独自ドメインを使う場合は無料で使う場合であってもクレジットカードを登録する必要がある、という意味です。
Heroku は GitHub と連携してアプリケーションをデプロイしますが、ここを CLI で手動で行ってもいいし、Git コミットをハンドリングして自動デプロイにしても構いません。いずれかの方法でアプリケーションを Heroku にデプロイしてください。なお後者の方法については過去にこのブログでも紹介したことがあるので、よかったら参考にしてください:
Heroku のパイプラインで GitHub コミット時に自動デプロイする
以下では dotnsf-www.herokuapp.com というホスト名で Heroku 上でアプリケーションが稼働しているものとして説明を続けます。Heroku 上で独自ドメイン向けの設定を行う必要もありますが、 Cloudflare 側での設定をまず先に済ませてから Heroku 上での設定を行います。
【Cloudflare で独自ドメインの設定をする】
次に Cloudflare 側の設定を行います。アカウントを取得していない場合は Cloudflare の無料プランでサインアップし、所有している独自ドメインを登録します。なお以下では独自ドメイン(pi314.jp というドメインを使う例を紹介します)は取得済みで、そのドメインの DNS 管理を Cloudflare にさせる前提で紹介します。
独自ドメインを登録した後、まずは "SSL" のメニューを選択して、「暗号化モード」が「フル」に設定されていることを確認します。もし異なる設定になっている場合は「フル」に変更します。この設定にすることで利用者のブラウザから、Cloudflare を経由して(今回の場合は Heroku 上の)アプリケーション・サーバーまでの全ての経路の通信を暗号化することができるようになります。また独自ドメインの SSL 証明書の更新も自動化されます:

そして "DNS" メニューを選択して DNS の設定を行います。今回は上述の dotnsf-www.herokuapp.com というサーバーを www.pi314.jp という名前で公開できるよう設定します。「レコードを追加」と書かれたボタンをクリックします:

追加するレコードは以下のようにして「保存」ボタンをクリックします:
タイプ: CNAME
名前: www (www.pi314.jp という名前で公開する、という設定です)
ターゲット: dotnsf-www.herokuapp.com
プロキシ: ON(プロキシ済み、と表示されます)

入力した内容が DNS 画面に表示されるようになります。これで https://www.pi314.jp/ という URL にアクセスがあると、https://dotnsf-www.herokuapp.com/ に(利用者から見えない所で)転送されてページが表示できるようになります。また Cloudflare を使っているので、セキュリティプロキシも有効になっています:

【heroku 側のアプリケーションを再設定する】
これでアプリケーションの独自ドメイン利用ができる・・・わけではありません。最後に SSL を使えるように実際には dotnsf-www.herokuapp.com 上で動いているアプリケーションが www.pi314.jp というホスト名でアクセスされる可能性があることを予め認識させておく必要があります。そのためには Heroku の CLI を使って(CLI でログイン後に)以下のコマンドを実行※します:
$ heroku domains:add www.pi314.jp --app dotnsf-www
※このコマンドを実行するには heroku を有料サービスで使うか、または無料利用であってもクレジットカードを登録しておく必要があります。
このコマンドを実行後、しばらく(数分)待ってからウェブブラウザで https://www.pi314.jp/ にアクセスすると、https://dotnsf-www.herokuapp.com/ の画面が https://www.pi314.jp/ というホスト名で表示できることが確認できます。
以上、Heroku も Cloudflare も有償サービスを使わないのであれば、この方法でも無料の範囲内で独自ドメインでウェブアプリケーションを公開することができそうです。