あまねしく

砂海のブログ

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

time 2015/07/13

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

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

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

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

  1. DNSサーバに独自ドメインを登録する
  2. heroku domains:add コマンドを叩く

以上2ステップである。

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

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

sponsored link

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

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

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

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

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

(参考) ムームーでの設定方法

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

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

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

(2) heroku domains:add コマンドを叩く

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

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

heroku domains:add www.example.com

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

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

ただし。

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

(3) ワードプレスURLを変更する

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

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

なのでもう一手間。

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

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

sponsored link