超簡単！herokuで独自ドメインを使用する2ステップ (＋WPの1ステップ）

herokuの良いところの１つが、無料プランでも独自ドメインを使用できることだ。

よくある無料ブログサービスなどでは、だいたい独自ドメインは有料プランでないと使えない。
まあサービス会社にして見りゃ、ドメイン登録料に金を払うならウチにも払えるだろ的な感じなんだろうね多分（憶測)。

というわけで「herokuで公開しているWEBアプリを独自ドメインで運用する方法」だが、

以上2ステップである。

heroku自身のドキュメントにいろいろ書いてあるが、ややこしい事をしなくていいなら上記２ステップを軽くこなすだけで簡単に独自ドメインを適用できる。

これだけじゃアレなので、具体例をふまえて少し詳しく書こう。

(1) DNSサーバに独自ドメインを登録する

まずは、取得した独自ドメインをどこかのDNSサーバへ登録しないと始まらない。
通常はドメインを買ったレジストラ(お名前.comやムームーなど)が、登録用のDNSサーバを用意してくれているはずだ。

そこへ登録するのは「CNAME レコード」。
いわゆる「別名」である。

このサイトだと https://blog.amanesiku.com/ とユーザーが入力したら、それは本当は http://sakai-wp.herokuapp.com/ だからそっちに行ってね。と指示するための設定だ。

詳しい登録方法はレジストラの設定を参考にしてもらって、
あなたのドメイン.com や www.あなたのドメイン.com を
xxxx.herokuapp.com (あなたのサイトのホスト名) へ紐付ければOK。

なお、DNSの設定が反映されるまで半日ぐらいかかることがあるので注意。

この時点で独自ドメインのURLをブラウザに入れてみると、正しくDNSが設定されていればこの記事上部にあるアイキャッチ画像のようなページ(No such app)が表示されるはずだ。

もしブラウザが「サーバーが見つかりません」というエラーを返すなら、DNSが(まだ)設定されていないことになる。

続いて heroku 側に、新しいドメインを教えてあげよう。

コマンドライン・ツールの方の heroku を使って、以下のコマンドを叩くだけである。

heroku domains:add www.example.com

www.example.com のところをあなたのドメインに変えるのを忘れずに。

コマンドが成功したら、ブラウザに独自ドメインのURLを入力してみよう……。
No such app にならず、あなたのWEBサイトが正しく表示されていれば完了だ。

ただし。

一般のWEBアプリならそれで終了なのだけれど、herokuで動かしているのがワードプレスの場合はもう1ステップが必要となる。

ワードプレスだと、最初にアクセスしたページからリンクをクリックして他のページへ移動すると、せっかくのURLがオリジナルの(herokuappの)ドメインに戻ってしまう。

さらにテーマによるのかもしれないが、一部の画像が正しく取得できず、alt要素のテキストが表示される状態となっていた。

なのでもう一手間。

設定 -> 一般設定の「wordpressアドレス(URL)」と「サイトアドレス(URL)」の２つも独自ドメインのURLに変えよう。

これで本当に全て完了。
簡単すぎ～。