Heroku / 無料でサイトをSSL化してルートドメインも使用できるようにする
結論
CloudFlareでやります。
あと、無料と書きましたが Heroku の無料DynoではSSL化できません。ので、サイト自体の運営にはUS$8くらいかかるのかな。SSL化は無料です。
経緯
AWS Route53とS3でルートドメイン対応していたけども、
そろそろSSL化せねばということで頑張ったけど、なんかできなかった。
Herokuのルートドメインに関しての公式記事はこちら
https://devcenter.heroku.com/articles/apex-domains
いくつか候補があるけど、使ったことのある CloudFlare でやってみた。
手順
まず、前提として heroku のSSLは使いません。
HerokuもAddonなしでSSL対応が簡単になっているんだけど、やはりルートドメインには対応できていない。 www.my-domain.com とかで良いケースではかなり簡単でありがたいけどね。
今回は https://my-domain.com でアクセスしたかったので、Herokuのお手軽SSLは使えない。
サイト登録
何はともあれ、とりあえず自分のドメインを登録。
一番左の無料プランを選択。
すでにDNSが設定されている場合はこんな感じで自動的にレコードつくってくれる。便利すね。今回はRoute53の設定値を引き継ぎたいのでとても楽です。
ただ、すべてこのままで良いわけではないので注意。
下記のように修正します。
1
2
3
- Aレコード削除
- CNAME追加 `www` => `my-domain.herokuapp.com`
- CNAME追加 `@` => `my-domain.herokuapp.com`
my-domain.herokudns.com ではなく my-domain.herokuapp.com らしい。
Herokuがデフォルトで用意してくれるドメインですね。
CNAMEは本来ルート（@）は使えないんですが、CloudFlare では CNAME flattering というものが適応されて、ルートも CNAME のように振る舞うことができるらしい。
もしかしたら最初は雲のマークがグレーになっているかも。
2つのCNAMEのステータスがオレンジ色になるように、雲マークをクリックしましょう。
DNS切り替え
と、こんな感じにDNSを変えろと言われます。
ドメインを購入したサイトにログインして、ドメインの設定画面からDNSを変更しましょう。
ムームードメインだとこんな感じ。
DNSの変更には時間がかかります。
24時間とか48時間とか言われますが、だいたい30分くらいで変更される印象。 と思ったらこのブログ書きながら行った作業では1日待たされた。。。
https://mgt.jp/t/dns# こちらとかを使わせてもらって確認してみましょう。
切り替わったら Overview メニューにいって、Recheck Nameserver ボタンを押します。これをしないと多分SSL証明書がつくれないはず。
うまくいくと、下のような画面になります。
SSL証明書作成
DNSが切り替わって、なおかつステータスがActiveになってからでないと、
CloudFlareで証明書が作れないっぽいので注意。
ドメインの所有権が確認できてないので当然か。
DNSが切り替わったら、ページ上部にある Crypto メニューを選択。
ちなみに先程のレコードを編集する画面は DNS メニューから行けます。
Origin Certificates のセクションで Create Certificate をクリック。
オプションはそのままでOK。
1
2
3
4
- Let Cloudflare generate a private key and a CSR
- RSA
- 15 Years
- ルートドメインとワイルドカードサブドメイン
そして Next ボタンを押す。
DNS切り替え前だと、下記のようなエラーが出ます。
1
Failed to validate requested hostname *.workabroad.jp: This zone is either not part of your account, or you do not have access to it. Please contact support if using a multi-user organization. (Code: 1010)
成功すると、Certificate と Private Key が取得できるので、
この画面を開いたまま、HerokuのSettingsを開きます。
Configure SSL を選択して Manually configure using my own certificate を選択。
CloudFlareで取得した Certificate と Private Key をそれぞれ貼り付けます。
ここでエラーになる時は、DNSが完全に切り替わってないかもしれません。
しばらく時間をおいて試してみましょう。
しばらくまって、DNSが切り替わってもエラーになる場合があるみたい。
その場合は下記のコマンドでアップしてみると良いかもです。
※ Heroku CLIツールのインストールが必要
bash
1
2
3
4
$ heroku certs:add /path/to/my_certificate.pem /path/to/my_private.key -a my-app
# アップされたかどうか確認する
$ heroku certs:info -a my-app
Herokuの管理画面がこうなったらOK。
Always Use SSL
Herokuに証明書を登録できたら、CloudFlare に戻って 再度 Crypto メニューに行き、Always Use SSL オプションを ON にします。
Automatic HTTPS Rewrites
もし http と https 混合のサイトになっている場合は、このオプションを有効にしておくと良いかもです。手作業でやると大変ですからね。
Page Rules
ここまでで普通は終わりですが、
このブログでは image.workabroad.jp を AWS S3 に向けていたので、Page Rule の設定を行いました。
こんな感じで良いと思います。
以上です。
AWS と Heroku だけじゃ完結しなくなっちゃいますが、仕方ないですね。
簡単ですし、証明書の更新も15年いらないので楽。