Heroku x Cloudflare: 無料で独自ドメインのホームページ立ち上げ+SSL化

HerokuとCloudflareを用いて無料でホームページを立ち上げたので手順の覚書。（特に新しい方法などではなく数年前からこの方法に関しては色々なブログで紹介されている）

この記事の内容：
1. 前提（独自ドメインとHerokuのアカウントの所有）
2. Herokuのアプリでドメインの追加
3. Cloudflareでの設定
4. ドメインサービス側での設定

1. 前提（独自ドメインとHerokuのアカウントの所有）

まずドメインに関してはお名前.comで管理済み。（元々別の会社で所得下が移転を繰り返しお名前.comで落ち着く）

現状常にアクセスがあるわけでもないためHerokuではFreeのプランを使用。（Freeプランではクレジットカードの登録で月1000時間までサイト/アプリを稼働させれるようなので、プロジェクトが一つであれば24時間x31日=744時間で常時稼働させることが可能）
参照：https://qiita.com/oedkty/items/3a8efddc910c78655dd5

プランの違いの詳細に関してはこちらを参照：
https://devcenter.heroku.com/ja/articles/heroku-postgres-plans

2. Herokuのアプリでドメインの追加

独自ドメインがすでにありHerokuでアプリがすでに公開中であることが前提で次にHerokuでの設定に進む。

Heroku にログインし各アプリのSettings(設定)のタブを選択し、下の方にあるDomainsよりAdd domain(ドメイン追加)のボタンから独自ドメインを追加する。

ドメイン追加後DNS Targetが付与される。このDNS Targetは後ほどCloudflareとドメインサービスでの設定で使用する。

3. Cloudflareでの設定

Cloudflareでの設定を含めてSSL化までは以下のブログを参照した。
https://qiita.com/serinuntius/items/f7f08b2221f5ad068f5d

Cloudflareでアカウントを作成し、上記のサイトを参考にドメイン登録、登録したドメインのCNAMEの設定などを行う。（プランは無料の物を選択）CNAMEのValue部分にはHerokuのアプリの設定で独自ドメインを設定した際に指定されたDNS Targetを入力。

左にある"SSL/TLS"のタブを選択し、チェックボックスがフレキシブルになっている事を確認。よりセキュリティーを強める場合フルなどを選択するが、一旦フレキシブルのまま。

その後ドメインサービス側でネームサーバーの変更をCloudflareで指定されたDNSへの変更を求められるためドメインサービスにアクセスして以下の処理を行う。

4.ドメインサービス側での設定

各ドメインサービスにログインして、ネームサーバーを変更する。ネームサーバー情報にCloudflareで指定されたDNSを入力する。

追記

httpsを指定せずアクセスがあった場合暗号化通信がされないため、下記のブログを参考にしてリダイレクトの設定。https://dev.classmethod.jp/articles/cloudflare-rules-settings/

左のタブから"ルール"を選び新しいルールを作成する。（所定のURLにアクセスがあった場合常にhttpsを利用するように設定）