WordPressのブログをherokuで立ち上げて、何かメリットあるの?

ブログ運営

blog.mah-lab.comはWordPressに移行した上に、現在みんな大好きherokuで運用しております。

「なんでわざわざherokuなんかで運用するんですか? マゾなんですか?」

いえいえ、ライトに立ち上げるなら、わざわざVPSなんて借りなくてもいいんですよ! herokuで立ち上げるメリットは、たくさんあるんです。なんといっても、無料だしね。

WordPressのブログをherokuで立ち上げて、何かメリットあるの?

以下のような人に多大なメリットがあります。

  • 無料で運用したい。
  • FTPなんて前時代的なものは使いたくない。git push heroku masterとか、コマンド一発でリリースしたい。
  • WebサーバやMySQLの面倒を自分で見たくない。誰か代わりに運用して!
  • ものすごい負荷が来たときでも(金さえ払えば)落ちないようにしたい。

無料で運用したい。

herokuは無料からはじめられます。上手くいくかどうか分からないものを、お金を払ってはじめたくないですよね。

FTPなんて前時代的なものは使いたくない。git push heroku masterとか、コマンド一発でリリースしたい。

wp-config.phpやら、テーマのカスタマイズやら、WordPressには変更するべきポイントがたくさんありますよね。そういったファイルはちゃんとバージョン管理したいし、リリースするときはコマンド一発でやりたい。

そういう環境をVPSで自分で作ろうと思うと結構大変なのですが、herokuなら最初から用意してあります。素敵!

WebサーバやMySQLの面倒を自分で見たくない。誰か代わりに運用して!

自分でサーバ立てて運用しようとすると、各プロセスが正常に稼働しているか監視を入れたり、落ちてたら再起動する仕組みを入れたり、DBバックアップの仕組みをいれたり・・・など、あれやこれやする必要がありますね。

ちゃんとしてないと、

「@mah_labさんのブログ、落ちてますよ」「え、まじで(恥)」

ということになりかねず、思わぬところで恥をかいてしまいます。

その点、herokuなら勝手に監視して再起動してくれるし、DBはアドオンという形で、それぞれのベンダーがしっかり管理してくれます。

万が一再起動がかかっていなくても、herokuアプリをiPhoneから再起動できるアプリを入れれば、出先からでも再起動できます。ログも見れます。外で飲んでても安心ですね!

ものすごい負荷が来たときでも(金さえ払えば)落ちないようにしたい。

herokuの無料範囲だと、1プロセス(herokuではdynoと呼びます)しかWebサーバが立ち上がりません。これだとさすがに、たくさん負荷が来たときには耐えられません。

でもプロセスはいつでもいくらでも増やすことができます。お金さえ払えばね! そんなにあることではないですが、万が一のときでも安心、というのは気が楽ですね。ちなみにこのプロセスも、先ほどのアプリで簡単に増やすことができます。

でも1点だけ問題が・・・

gitを使えない人には使えません。。この機会にgitを覚えよう!という方には最適ですね!

herokuにまつわる誤解

  • DBはPostgreSQLしか使えない。
  • Webサーバの選択の余地がない。
  • PHPのmbstringが使えないから日本語化できない。

全部誤解なんだからね! DBはアドオンで選べますし、その他はビルドパックという仕組みで解決できます。

ビルドパックというのは、「こういう設定でアプリを作るから、よろしくね!」という設定をパッケージにしたものです。自分で作る必要はあまりなくて、大概デキる人が公開しているものを使わせていただくことで事足ります。今回もデキる人のビルドパックを使いますよ。

さあ、herokuでWordPressをはじめよう!

では、チュートリアル的に始め方を書いていきたいと思います。

(heroku未設定の方へ)

Herokuでアプリを公開する直前までのチュートリアルの設定が終わったら、このページに戻ってきてください!

2013.5.3 注記

ちゃんとした翻訳が下記のURLにありましたので、こちらもあわせてご覧ください!

https://github.com/herokaijp/devcenter/wiki/quickstart

2013.5.15 注記

アドオンを使う際にクレジットカード情報も設定しておく必要があるため、クレジットカード情報の登録もお願いします。(無料のものだけ使っていれば請求されないので、ご安心を!)

herokuのアプリを作ろう

ターミナルを開いて、以下のコマンドを入力していきます。[アプリ名]にはアルファベットでお好きなアプリ名を設定してください。

Step 1: herokuにアプリを作成する

まずはherokuにアプリを作成します。以下のコマンドを打ち込んで下さい。

heroku create [アプリ名] -s cedar -b git://github.com/iphoting/heroku-buildpack-php-tyler.git

PHPの設定を簡単に済ませてくれるheroku-buildpack-php-tylerというビルドパックを使用しています。

Step 2: MySQLのアドオンを追加する

無料で5Mまで使えるMySQLアドオン(ClearDB)を追加します。毎日バックアップを勝手にとってくれるので、安心なアドオンです。

heroku addons:add cleardb:ignite -a [アプリ名]

Step 3: herokuアプリにMySQLのアドオンのURLを設定する

以下のコマンドでURLを調べて、

heroku config -a [アプリ名] | grep CLEARDB_DATABASE_URL

以下のコマンドを打ち込みます。

heroku config:add DATABASE_URL='[↑で調べたURLを mysql://〜 から、ここに書きます]' -a [アプリ名]

これで一通りのHerokuアプリの設定は終了です。おつかれさまでしたー。

ねんのため、現時点でHerokuアプリにアクセスできるかどうか試しておきましょう。

heroku open -a [アプリ名]

これでブラウザが立ち上がって、「まだ何も設定されていないよ」という画面が立ち上がっていれば、ここまでの設定は成功です!

WordPressの設定をしよう

まずはWordPressの日本語版をこちらからダウンロードします。

ZIPファイルを展開すると、以下のようなディレクトリ構成になっていると思います。

wordpress-3.5.1-ja
├── /wp-admin
├── /wp-content
├── /wp-includes
├── index.php
├── license.txt
├── readme-ja.html
├── readme.html
├── wp-activate.php
├── wp-blog-header.php
├── wp-comments-post.php
├── wp-config-sample.php
├── wp-cron.php
├── wp-links-opml.php
├── wp-load.php
├── wp-login.php
├── wp-mail.php
├── wp-settings.php
├── wp-signup.php
├── wp-trackback.php
└── xmlrpc.php

Step 1: ディレクトリの名前を変更する

wordpress-3.5.1-jaというディレクトリ名をHerokuのアプリ名と同じディレクトリ名に変えておきましょう。

Step 2: git initinitial commit

git initというコマンドで「ここはGitで管理するディレクトリなんだぜ」という登録をおこない、一番初期の状態をGitにコミットしておきましょう。

git init
git add .
git commit -m 'initial commit'

また、このあとherokuにpushをおこなうために、git remote addというコマンドで、heroku上のGitリポジトリを記録しておきましょう。

heroku git:remote -a [アプリ名]

`git remote -v`と打ち込むと、herokuというリモートリポジトリが登録されていることが確認できます。

git remote -v
heroku  [email protected].com:[アプリ名].git (fetch)
heroku  [email protected]:[アプリ名].git (push)

Step 3: wp-config.phpの設定を行う(MySQLとの接続)

この時点ではまだwp-config.phpの設定が完了していないので、設定をおこないます。以下のコマンドでwp-config.phpを作成しましょう。

cp wp-config-sample.php wp-config.php

wp-config.phpの作成が終わったら、MySQLと接続する設定をおこないましょう。

Herokuアプリを作成する「Step 3: herokuアプリにMySQLのアドオンのURLを設定する」で調べたURLをここでも使います。

URLは以下のようなアドレスだったと思います。

mysql://username:[email protected]/heroku_00000000000?reconnect=true

この内容を分解して、wp-config.phpに設定します。

// ** MySQL 設定 - こちらの情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define('DB_NAME', 'heroku_00000000000');

/** MySQL データベースのユーザー名 */
define('DB_USER', 'username');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', 'password');

/** MySQL のホスト名 */
define('DB_HOST', 'us-cdbr-east-XX.cleardb.com');

Step 4: wp-config.phpの設定を行う(認証用のキー設定)

以下のソースコードをhttps://api.wordpress.org/secret-key/1.1/salt/にアクセスして表示されたソースコードで上書きします。

/**#@+
 * 認証用ユニークキー
 *
 * それぞれを異なるユニーク (一意) な文字列に変更してください。
 * {@link https://api.wordpress.org/secret-key/1.1/salt/ WordPress.org の秘密鍵サービス} で自動生成することもできます。
 * 後でいつでも変更して、既存のすべての cookie を無効にできます。これにより、すべてのユーザーを強制的に再ログインさせることになります。
 *
 * @since 2.6.0
 */
define('AUTH_KEY',          '');
define('SECURE_AUTH_KEY',   '');
define('LOGGED_IN_KEY',     '');
define('NONCE_KEY',         '');
define('AUTH_SALT',         '');
define('SECURE_AUTH_SALT',  '');
define('LOGGED_IN_SALT',    '');
define('NONCE_SALT',        '');

ここまで終わったら、

git add .
git commit -m 'wp-config.phpの設定'

とコマンドを打ち込んで、Gitにコミットしておきましょう。

Step 5: (パーマリンクをカスタマイズしたい人向け)Webサーバの設定を行う

WordPressデフォルトのURLではなく、カスタマイズしたURLにしたい人向けの設定です。

WordPressのディレクトリ直下に.htaccessというファイルを作成します。ファイルの内容は以下のようにします。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

つぎに、WordPressのディレクトリ直下にconfというディレクトリを作成し、その中に以下のようなファイルをnginx.conf.erbというファイル名で配置します(このままコピペしてしまってOKですよ)。

# setting worker_processes to CPU core count
worker_processes      1;
daemon off;

events {
  worker_connections  1024;
}

http {
  include             mime.types;
  default_type        application/octet-stream;
  sendfile            on;
  server_tokens       off;
  keepalive_timeout   65;
  access_log          off;
  error_log           logs/error.log;
  proxy_max_temp_file_size  0;
  #fastcgi_max_temp_file_size  0;
  limit_conn_zone $binary_remote_addr zone=phplimit:1m; # define a limit bucket for PHP-FPM
  # don't use server listen port in redirects.
  port_in_redirect off;

  # set $https only when SSL is actually used.
  map $http_x_forwarded_proto $my_https {
    default off;
    https on;
  }

  upstream php_fpm {
    server unix:/tmp/php-fpm.socket;
  }

  root              /app/;
  index             index.php index.html index.htm;

  server {
    listen            <%= ENV['PORT'] %>;
    server_name       _;

    # Some basic cache-control for static files to be sent to the browser
    location ~* \.(?:ico|css|js|gif|jpeg|jpg|png)$ {
      expires         max;
      add_header      Pragma public;
      add_header      Cache-Control "public, must-revalidate, proxy-revalidate";
    }

    # Deny hidden files (.htaccess, .htpasswd, .DS_Store).
    location ~ /\. {
      deny            all;
      access_log      off;
      log_not_found   off;
    }

    # Deny /favicon.ico
    location = /favicon.ico {
      access_log      off;
      log_not_found   off;
    }

    # Deny /robots.txt
    location = /robots.txt {
      allow           all;
      log_not_found   off;
      access_log      off;
    }

    # Status. /status.html uses /status
    location ~ ^/(status|ping)$ {
      include         fastcgi_params;
      fastcgi_param   HTTPS $my_https if_not_empty;
      fastcgi_pass    php_fpm;
      fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }

    location /server-status {
      stub_status on;
      access_log   off;
    }

    location / {
      # wordpress fancy rewrites
      if (-f $request_filename) {
        break;
      }
      if (-d $request_filename) {
        break;
      }

      rewrite         ^(.+)$ /index.php?q=$1 last;

      # Add trailing slash to */wp-admin requests.
      rewrite         /wp-admin$ $scheme://$host$uri/ permanent;

    #  # redirect to feedburner.
    #  # if ($http_user_agent !~ FeedBurner) {
    #  #   rewrite ^/feed/?$ http://feeds.feedburner.com/feedburner-feed-id last;
    #  # }
    }

    include /app/conf/nginx.d/*.conf;

    location ~ .*\.php$ {
      try_files $uri =404;
      limit_conn phplimit 5; # limit to 5 concurrent users to PHP per IP.
      include         fastcgi_params;
      fastcgi_param   HTTPS $my_https if_not_empty;
      fastcgi_pass    php_fpm;
      fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
  }
}

これでパーマリンクをカスタマイズできるようになりました!

ここまで終わったらGitにコミットしておきましょう。

git add .
git commit -m 'WordPress内でパーマリンクをカスタマイズできるように'

Step 6: Herokuで公開!

git push heroku masterとコマンドラインで打ち込むと、Herokuにアプリのソースコードが転送されます。

ソースコードが転送されたあとは、heroku open -a [アプリ名]と打ち込んで、WordPressが無事立ち上がっていることを確認しましょう。

よくあるエラー

「データベース接続確立のエラー」

「Step 3: wp-config.phpの設定を行う(MySQLとの接続)」の設定が上手くいっていないと、このエラーが表示されます。以下の項目を確認してみてください。

  • ClearDBアドオンがインストールされているか?
  • wp-config.phpに設定したDBの内容に誤りはないか?
  • ファイルの文字コードがUTF-8に設定されているか?

Application Error

「Step 5: (パーマリンクをカスタマイズしたい人向け)Webサーバの設定を行う」の設定をしたときに、上手くいっていないと、このエラーが表示されます。以下の項目を確認してみてください。

  • ファイル名に誤りはないか?
  • ファイルの内容はこの記事に記載されているとおりになっているか?
  • ファイルの文字コードがUTF-8に設定されているか?

git push heroku master時にエラーが出る

`fatal: ‘heroku’ does not appear to be a git repository`というエラーが出てしまう場合は、以下の設定を行なって下さい。

heroku git:remote -a [アプリ名]

Thanks @yohhatuさん!

これでWordPressが立ち上がりました!

Heroku特有の設定を除けば、通常のWordPressの設定をするだけでWordPressを立ち上げることができました。

「ちょっと試してみようかなー」というときでも、Herokuの無料枠なら安心ですね。ゴールデンウィーク中の余暇にでもお試しいただければと思います。

あわせて読みたい

テーマ/プラグインは画面から新規登録できないです

できてもHeroku再起動時に消えてしまいます。

テーマ/プラグインを追加するときは、ローカルで直接wp-content/pluginswp-content/themesディレクトリ直下にディレクトリごとコピーしてしまいましょう。

画像アップロードはプラグインを使う必要アリ

Herokuにファイルをアップロードしても、Herokuの再起動時に消えてしまう(!)ので、他のサービスに保存しておく必要があります。

blog.mah-lab.comでは「WP Read-Only」というプラグインを入れています。S3の設定方法含めて、使い方はまたブログを書こうとおもいます(「すぐに書いてよ!」という方がもしいらっしゃれば、右下のMessageleafより応援のメッセージをお願いします!)。

DBの残り容量には少し気を使ったほうが良いです

ClearDBの無料枠は5Mなので、気を抜くとすぐにアラートがきてしまいますね。

そんなときに役に立つプラグインが「WP CleanFix」。余計なレコードをガリガリ削除してくれます。定期的にお掃除したいですね。