概要
Herokuへデプロイしたアプリケーションへの独自ドメイン適用とSSL対応についてまとめます。
前提条件
- アプリケーションはHerokuへデプロイ済み
- お名前.com等で独自ドメインを取得済み(今回の例ではお名前.comで取得)
- Cloudflareのアカウントを作成済み
手順
※取得したドメイン名はexample.comと仮定します。
- Herokuへ独自ドメインの追加
- Cloudflareへ作成したドメインの追加
- お名前.comでネームサーバーの入力
1.Herokuへ独自ドメインの追加
基本的にこちらの公式ドキュメント通りに進めば問題ありません。
1-1. heroku domains:add
heroku domains:add example.com
まず、herokuコマンドが実行できるディレクトリでコマンドを実行します。
下記のエラーが発生した場合はクレジットカードの登録が必要となります。
https://devcenter.heroku.com/categories/billing
› Error: Please verify your account in order to add domains (please enter a credit card) For more information, see https://devcenter.heroku.com/categories/billing Verify now at
› https://heroku.com/verify
※Herokuは独自ドメインでのSSL利用は有料ですが、独自ドメインの使用自体は無料のため、この時点での登録では料金が発生しません。(2022/01/09現在)
ちなみに、Personal>アプリケーション名>Setting>Domains のAdd Domainからでも追加できます。
2-2. heroku domains
heroku domains
上のコマンドを実行し、DNS Targetをコピーしておきます。こちらは後ほどCloudflareで使用します。
2. Cloudflareへ作成したドメインの追加
1-1. ドメインの登録
ドメインを入力し、サイトを追加ボタンをクリックします。プラン選択画面が表示されるので、freeを選択します。
青色のレコードを追加ボタンからレコードを追加します。
タイプはCNAME、名前には取得したドメイン、ターゲットには先ほどコピーしたDNS Targetを貼り付けます。プロキシステータスにはチェックを入れておいてください。
Cloudflare ネームサーバーに２つネームサーバーがあるので、どちらもコピーしてください。次の手順で使用します。
3. お名前.comでネームサーバーの入力
ページ下部の2.ネームサーバーの選択からその他のサービスを選択し、先ほどCloudflareでコピーしたネームサーバーを貼り付けてください。
これですべての手順は完了です。
まとめ
無料で独自ドメインを適用しSSL対応する手順をまとめました。注意しなければならないのは、この手順でSSL化するのはブラウザとCloudflareの間のみです。chromeの非SSLページで表示される警告の回避などには十分と考えられますので、参考になれば幸いです。