Heroku ワードプレス構築手順

Heroku ワードプレスの続編になります。

Heroku ワードプレス構築手順

1. Herokuへの登録

登録は事前に完了しておいてください。

2. Herokuの環境構築

3. WordPressインストール&設定

Herokuの環境構築

Herokuアプリの作成

Herokuアプリの作成はコマンドラインからも可能ですが、今回はブラウザ上から実施します。

Heroku登録後、アプリの画面に移動します。

画面右上の「Create new app」を選択してアプリを作成します。

以下必要事項を記載して、アプリを作成します。
Regionは、現時点では日本が選べないので、United States でいいでしょう。

アドオンClearDB(MySQL)のインストール

ClearDBのインストールもコマンドラインから可能ですが、今回はブラウザ上から実施します。

まず、先程作成したアプリをクリックしたら、上部に以下のようなタブが現れるので、「Resources」を選択してください。

「Add-ons」の項目の検索欄に「cleardb」と入力すると、検索結果が表示されるので、「ClearDB MySQL」を選択しましょう。

インストールのポップアップが表示されるので、「Plan name」でClearDBのプランを選択して、「Provisoin」を選択してください。
無料で使用したい場合は、「Ignite – Free」を選択してください。
※記事掲載時点

ClearDBの料金表は、こちらをご確認ください。

以上でClearDBのインストール完了となります。

WordPressインストール&設定

まずは、日本語 « ダウンロード — WordPressからワードプレスをダウンロードして、任意の場所へ解凍します。(ここでは、wgetでダウンロードしていますが、最新のものをダウンロードした方がいいでしょう。)
解凍後、不要な圧縮ファイルは削除し、解凍したワードプレスディレクトリ移動してください。

# wget https://ja.wordpress.org/wordpress-4.8.3-ja.zip

# unzip wordpress-4.8.3-ja.zip

# rm -i wordpress-4.8.3-ja.zip

# cd wordpress/

ワードプレスの設定に必要なClearDBの情報を確認しておきましょう。
以下コマンドを実行すると、以下の形式で表示されるのでメモっておいてください。

$ heroku config:get CLEARDB_DATABASE_URL
mysql://[ユーザー名]:[パスワード]@[ホスト名]/[データベース名]?reconnect=true

以下のコマンドで個別に表示できるようにしてみました。awkだけでいける気がしますが直すの面倒なので、気にしないで、、

ユーザー名：
$ heroku config:get CLEARDB_DATABASE_URL|awk -F "//" '{print $2}'|cut -d ":" -f1

パスワード：
$ heroku config:get CLEARDB_DATABASE_URL|cut -d ":" -f3|awk -F "@" '{print $1}'

ホスト名：
$ heroku config:get CLEARDB_DATABASE_URL|awk -F "@" '{print $2}'|awk -F "/" '{print $1}'

データベース名：
$ heroku config:get CLEARDB_DATABASE_URL|awk -F "/" '{print $4}'|awk -F "?" '{print $1}'

上記、確認した情報でClearDBに接続できることを確認してみましょう。
そうです、、、普通にどこからでもユーザ名とパスで繋ぐことができてしまいます。。。。
コレについては後程言及するとして、今はインストール作業を進めるとします。

$ mysql -h [ホスト名] -u[ユーザー名] -p[データベース名]

ワードプレスのサンプル設定ファイルから設定ファイルをコピーで作成して、先程確認したClearDBの情報を入力しましょう。
ちなみに通常であれば、wp-config.phpをコピーで作成しなくても、ワードプレスをブラウザからインストールすれば自動で作成されますが、Herokuはgitでアップロードしたもの以外は再起動すると消えてしまいます。(ワードプレスインストール後、ワードプレス管理画面からアップロードした画像やインストールしたプラグインなども消えます。)
なので、わざわざwp-config.phpをコピーで作成しています。画像やプラグインが消えないようにする方法は後程ご紹介します。

# cp -p wp-config-sample.php wp-config.php 

# vi wp-config.php
define('DB_NAME', '[データベース名]');
define('DB_USER', '[ユーザー名]');
define('DB_PASSWORD', '[パスワード]');
define('DB_HOST', '[ホスト名]');

Herokuへログイン後、Herokuアプリに作成したワードプレスをgitを使ってpushしていきましょう。
※heroku loginコマンドを使うには、Herok CLIをインストールする必要があります。
※gitコマンドを使うにはgitをインストールする必要があります。

# heroku login
# git init
# heroku git:remote -a [herokuのアプリ名]
# git add .
# git commit -am "make it better"
# git push heroku master

ブラウザから、Herokuアプリの画面を開くと、右上に以下のタブがあるので、「Open app」を選択してください。
※gitコマンドでHerokuへアップロード後、初回は反映に時間がかかり、エラー画面となることがあると思います。待つしかありません。

正常にアプリが開いたら、以下のURLを入力してください。
ワードプレスのインストール画面が表示されるかと思います。

「http://[herokuアプリ名].herokuapp.com/wp-admin/install.php」

先程入力したDBの設定が正常であれば、以下の情報をインストール画面で求められるかと思うので、入力してください。

サイトのタイトル

ユーザー名

パスワード

メールアドレス

正常にインストールまで完了したら、最後に「wp-config」を再度編集して認証キーを入れておきましょう。
ワードプレスが提供してくれているオンラインジェネレータから認証キーを取得して入力してください。

# vi wp-config.php
define('AUTH_KEY',         '5z|WEki@p20');
define('SECURE_AUTH_KEY',  'NMXp2p2');
define('LOGGED_IN_KEY',    '-f[+p2p2W');
define('NONCE_KEY',        'b;f70vop2p2J');
define('AUTH_SALT',        '>xp?+.L2p2p2');
define('SECURE_AUTH_SALT', ' mUp2bU');
define('LOGGED_IN_SALT',   '<Vp2p2N5');
define('NONCE_SALT',       '0!69pp2p22]');

gitコマンドで変更をコミットして、Heroku側にpushしましょう。

# git add .
# git commit -am "add key"
# git push heroku master

以上でWordPressのインストールは完了としましょう。