Vagrantでローカル環境にWordPressを構築する方法

WordPressの操作を試してみたり、新しいプラグインの検証をしてみたいと思った時に無料で使える環境がないか考えたことはありませんか？

私は以前WordPressの勉強をしたいと思い、自分のパソコンに入れる方法を探していました。例えば「local by Flywheel」というツールを使うと簡単に環境を構築できそうなので試したことがあります。
でも私の環境では、パソコンのセキュリティの強度を下げないと使えないことが分かって諦めました。

他に方法がないか探したところ、KUSANAGI for VagrantというWordPressの仮想マシンを使えば自分のパソコンに入れられるということが知りました。
ちょっと準備しないといけないことが多いですが、面倒なのは最初だけです。
一度構築してしまえば操作はWordPressと変わりませんし、無料で使えるのは大きな利点になると思います。

KUSANAGIの環境の導入方法については下記に公式サイトがあります。

KUSANAGI for Vagrant

ただ、この通りに進めても上手くいかなかったので、備忘録も兼ねて手順を残しておくことにしました。

事前準備

先に以下のものを先に準備しておくとスムーズに作業が進められます。

VirtualBoxのインストール

Vagrantのインストール

TeraTermのインストール

パスワード

パスワードは下記のサイトを使うと便利です。
パスワード生成（パスワード作成）ツール

Vagrant Boxのインストール手順

VirtualBoxを起動します。
すぐに使うわけではないのですが、どのタイミングでCentOSが起動するか確認しやすいので、あらかじめ起動しておきます。

これから行う作業はVagrantを使って、VirtualBoxにCentOSというLinuxのOSをインストールします。
基本的にはWIndowsのコマンドプロンプトを使って、コマンドのみで環境を構築します。
CUI操作に慣れていないと難しく感じるかもしれませんが、コマンドは数回ですし、コピペで対応できるので気負わなくても大丈夫です。

Vagrantfileの作成

コマンドプロンプトを起動します。
起動したらcdコマンドで任意の場所に移動してください。
例えば下記ではPCのユーザー名のフォルダ（ここではuser_name）に移動します。

cd C:/Users/user_name/

ここにVagrantfileファイルを作成するために、下記コマンドを実行してフォルダを作成します。
今回はkusanagiという名前のフォルダを作成しますが、何でも構いません。

mkdir kusanagi

次にcdコマンドでカレントディレクトリをkusanagiフォルダに移動します。

cd kusanagi

Vagrantfileファイルを生成するコマンドを実行します。

vagrant init primestrategy/kusanagi

実行が完了すると下記メッセージが表示されます。

これでkusanagiフォルダにVagrantfileファイルが作成されました。
同時にkusanagiフォルダと同じ階層に「.vagrant.d」フォルダが作成されます。

Vagrantfileの編集

Vagrantfileファイルを編集したいので、startコマンドを実行してファイルを開きます。
この時、どのアプリで開くか聞かれると思いますので、メモ帳を選んで開いてください。

start Vagrantfile

ファイルを開いたら下記の編集前の行を編集後の5行に置き換えます。
また、"1024"の部分はパソコンのメモリーを逼迫しない程度に調整してください。単位はMB（メガバイト）です。
修正が終わったら保存して、ファイルを閉じます。

編集前：

# config.vm.network "private_network", ip: "192.168.33.10" 

編集後：

config.vm.box_download_insecure = true
config.vm.network "private_network", ip: "192.168.33.10"
config.vm.provider "virtualbox" do |vb|
  vb.customize ["modifyvm", :id, "--memory", "1024"]
end

仮想マシンの起動

下記コマンドを実行すると仮想マシンが起動しますが、完了まで数分かかります。

vagrant up

起動が成功すればVirtualBoxの画面左側にCentOS実行中が表示されます。

このタイミングでkusanagiフォルダと同じ階層に.vagrant.dフォルダが作成されます。
もし、エラーが表示されて失敗した場合にはVagrantfileファイルに誤りがないか確認してください。
修正したらuser_name(アカウント名)の下にある「.vagrant.d」フォルダを削除してから、再度vagrant upコマンドを実行すれば大丈夫です。

VagrantBoxフォルダの構成

※[]はフォルダ、・はファイルを意味します。

kusanagi

.vagrant.d

ここまででVirtualBoxへのCentOSのインストール作業は完了です。

KUSANAGIのインストール

次にこのCentOSにWordPressをインストールします。

コマンドプロンプトのコマンドで「Vagrant ssh」で接続することも可能ですが、ここではTeraTermというツールを使って解説します。

SSH接続

まず、TeraTermを起動します。
ここではIPアドレスとTCPポートを設定します。
IPアドレスは「127.0.0.1」(自分の端末を意味するIPアドレス)
TCPポートは「2222」を入力してください。
入力が完了したら[OK]ボタンをクリックします。

初めてログインする時はセキュリティ警告が表示されますので、そのまま[続行]ボタンをクリックします。
既存のカギを新しい鍵で上書きするにチェックを入れると次回以降、このセキュリティ警告は表示されなくなりますので、入れておいてもいいです。

ユーザー名とパスワードには「vagrant」と入力して[OK]ボタンをクリックします。

CentOSやKUSANAGIのアップデート

最初にroot権限を取得するために、下記コマンドを実行します。

sudo su -

KUSANAGIとCentOSのアップデートを実施します。
下記コマンドを1行ずつ実行してください。

yum update kusanagi -y
yum --enablerepo=remi,remi-php56 update -y

「Complete！」が表示されたら下記コマンドでCentOSを再起動します。

reboot

CentOSが起動したらもう一度TeraTermで接続してください。
まずはKUSANAGIの初期設定をします。
下記コマンドでroot権限を再度取得します。

sudo su -

サーバータイムゾーンの設定

下記コマンドを実行するとサーバーのタイムゾーンの設定が開始されるのですが、以降、設定選択して進める形式になります。
途中で設定を止めた場合は、もう一度このコマンドから実行するか、下記サイトを参考に残りの設定をコマンドで設定してください。
https://kusanagi.tokyo/document/kusanagi-init/

kusanagi init --tz tokyo

処理が終わりましたら、下記のようにメッセージにFinishが表示されます。

使用言語の選択

続けて使用言語を選択します。日本語の場合は「2」を選んでEnterを押下します。

キーボードタイプの選択

次はキーボードの設定です。英語配列キーボードでなければ「2」の日本語配列キーボードを選んでください。

ユーザーkusanagiのパスワード設定

次はユーザー kusanagiのパスワードを設定します。
「Retype new password:」が表示されたら同じパスワードをもう一度入力します。

鍵認証の設定

ユーザーkusanagiのSSHユーザ鍵のパスワードを設定します。（何も入力せずに進めることも可能です。）
「passphrase again:」が表示されたら同じパスワードをもう一度入力します。

Webサーバーの選択

WebサーバーをNGINXかApachかを選びます。ここではNGINXを選択します。

アプリケーションサーバーの選択

次に起動するアプリケーションサーバーを選択します。
PHP7を選択して進めます。

データベースの選択

使用するDBを選択します。
ここではMariaDBを選択します。

DBのrootユーザーパスワードの設定

続いてDBのユーザー rootのパスワードを設定します。
8文字以上で任意のパスワードを入力してください。
「Re-type MySQL root password.」が表示されたら同じパスワードをもう一度入力します。

下記のメッセージが表示されればKUSANAGIの処理設定は完了です。（sizeは環境によって変わります。）

KUSANAGIのプロビジョニング

続いてKUSANAGIでWordPressなどを使用するためのプロファイルを作成します。

以降は例としてwptestというドメインを想定した内容で作成します。

まず、下記コマンドを実行してプロビジョニングを開始します。

kusanagi provision --WordPress wptest

WordPressインストールの言語設定

下記ではWordPressのインストールで使用する言語を選択します。
ここではja「日本語」を選択して進めます。

ホスト名の設定

ホスト名(FQDN) を入力します。
ここでは「wptest」という名前で設定します。
「Re-type hostname(fqdn) for your website.」が表示されたらもう一度入力します。

Let’s Encryptの設定

次にLet’s Encryptの設定(SSL証明書の発行)ができるのですが、今回は省略して何も入力せずにEnterで先に進めます。
もう一度入力を求められますが、そのままEnterで先に進めます。

DB名の設定

データベース名を設定します。
ここでは「wpdb」という名前でDBを設定します。
確認用を含めて2度入力します。

DBの一般ユーザー名の設定

データベースのユーザー名を設定します。
ここでは「wpuser」という名前のユーザーを作成します。ここでも同じく確認用を含めて2度入力します。

DBの一般ユーザーパスワードの設定

作成したデータベースのユーザーのパスワードを設定します。
確認用を含めて2度入力します。

下記が表示されたらプロビジョニングは完了です。

WordPressのインストール

hostsファイルの編集

VagrantのデフォルトのIPアドレスが「192.168.33.10」なので、URLにそのまま入力したのですが繋がりませんでした。
VagrantfileかCentOSの設定を変更すれば接続できると思うのですが、今回はWindowsのhostsファイルに追記して名前解決する手順で進めたいと思います。
まずコマンドプロンプトを管理者権限で起動します。

start C:/Windows/System32/drivers/etc/hosts

開くプログラムを聞かれると思いますのでメモ帳で開きます。
一番下の行に下記を追加します。

192.168.33.10 wptest

追記したら保存します。
保存できない場合はコマンドプロンプトを管理者権限で開けているか確認してください。

WordPressをブラウザで開く

保存できたら、chromeなどのブラウザを起動して、URLにドメイン名（今回はhttp://wptest）を入力します。
すると下図のような画面が開きますので、[さあ、始めましょう]ボタンをクリックします。

以下の画面が開いたら、下記情報を入力します。
データベース名：「DB名の設定」で指定した名前を指定します。
ユーザー名：「DBの一般ユーザー名の設定」で指定した名前を指定します。
パスワード：「DBの一般ユーザーパスワードの設定」で指定したパスワードを指定します。
データベースのホスト名：localhost
テーブル接頭語：wp_

WordPressのインストール

次にWordPressの情報を入力して[WordPressをインストール]ボタンをクリックします。
サイトタイトル：任意のタイトル
ユーザー名：WordPressにログインするユーザー名
パスワード：WordPressにログインするパスワード
メールアドレス：ローカルパソコンで使う場合はメールは飛んでこないので、適当なメールアドレスを入力します。

[インストール実行]ボタンをクリックして進めます。

下記の画面になったら[ログイン]ボタンをクリックして、WordPressにログインします。

以上でローカルパソコンにWordPressをインストールする手順は完了です。

WordPressの停止

TeraTermで下記コマンドを実行することで、CentOSをシャットダウンできます。

sudo shutdown now

まとめ

いかがでしたでしょうか。

最初は手順を見ながら進めるので時間がかかりますが、やり方を覚えると簡単に環境を構築できるようになります。
また、構築に失敗してもやり直しが簡単にできるので安心です。
もちろん大事なのは構築した後ですが、その前の段階で時間をあまり消費しなくなるのはすごいメリットに感じます。

今後はこの環境を使ってWordPress関連やPHP、javascriptなどの情報を記事にしていきたいと思います。