【WordPress】開発環境を構築する方法

Wordpress
この記事は約22分で読めます。

今回はローカルPCの中に、WordPressの開発環境を構築する方法について調べました。

「local by Flywheel」というツールを使うと簡単に環境を構築できるという情報もありましたが、頓挫しました。

今回の記事で使用するVirtualBoxは、PC上に仮想マシンを構築することが可能です。

例えば今回構築するローカルのWordPress開発環境としても構築できますし、それ以外にもさまざまな役割の仮想マシンを複数でも構築することが出来ます。そのため、汎用性も高く、再構築、再設定も簡単と考えました。

書籍やWebサイトなど様々な情報を見て調べながら進めたので、手順や内容が煩雑しているかも知れませんが、実際に作成できたところで備忘を兼ねてメモを残しておきます。

もっと改善点もあれば、内容を更新していきたいと思います。

VirtualBoxとは?

まずはじめに「VirtualBox」とは、「現在使用しているパソコンの中に、別のOSを起動実行できるようにする仮想化ソフトウェア」のことです。パソコンのハードウェアをエミュレートできる技術を持っているので、仮想環境が構築できるようになります。

今回は、ひとつの仮想マシンに「KUSANAGI」というディスクイメージで環境を構築していくので、OSはRHEL系のLinux(ディストリビューションはCentOS)になります。

ディストリビューションとは、LinuxのOSの配布形態のことです。

VirtualBoxのダウンロード/インストール

こちらのリンクから、ダウンロードをします。
Windowsの場合は、「Windows hosts」
Mac OSの場合は、「OS X hosts」のリンクをクリックします。

Download_Old_Builds_6_1 – Oracle VM VirtualBox

VirtualBoxのインストール(Windowsの場合)

ダウンロードした以下のインストーラを起動します。
「VirtualBox-6.x.x.-xxxxxx-Win.exe」
※xxはインストール時の最新版となります。

[Next >]ボタンをクリックして進めます。

Custom Setupの項目はデフォルトのまま進めます。

こちらも任意の設定で進めます。

ネットワークがインストール中に切断される旨の警告が表示されますが「Yes」ボタンをクリックします。

最後に[Install]ボタンをクリックし、インストールを開始します。

「このデバイスソフトウェアをインストールしますか?」もインストールをクリックします。

インストール完了画面が表示されたら、チェックボックスのチェックを外して、「Finish」ボタンをクリックします。

(この後の手順でVagrantで環境を構築した後は、VirtualBoxを起動してからのインタフェース操作は、基本的に今後は使いません。なぜなら、VirtualBox側から直接操作しなくても、Vagrant側から仮想マシン作成やOS起動などの操作ができるからです。ですが、動きのイメージを掴むには、VirtualBoxを起動しておいて、実際に動作の状況が見られるとイメージが掴みやすいかも知れません)

続いてVagrantをインストールする手順に入ります。

VirtualBoxのインストール(Macの場合)

「VirtualBox-6.x.x-xxxxxx-OSX.dmg」をダブルクリックします。
※xxはインストール時の最新版となります。

「VirtualBox.pkg」をダブルクリックして、インストーラを起動します。

セキュリティの確認画面が表示されるので、「続ける」をクリックします。

「ようこそOracle VM VirtualBoxインストーラへ」画面で、「続ける」をクリックします。

「インストールの種類」の画面では、インストール先は変更せずに「インストール」をクリックします。

インストールが完了したら「閉じる」をクリックします。

続いてVagrantをインストールする手順に入ります。

Vagrant のダウンロード/インストール

「Vagrant」とは、「仮想マシンの構築を自動化できるソフトウェア」です。

VirtualBoxの操作を、コマンドライン上で表現することが出来ます。
(仮想マシンの起動、停止、設定、削除)

以前は開発環境をローカルで準備する場合、XAMPPなどを使ってパソコンの中でApache、PHP、MySQLを起動させ、WordPressを動作させる手法が多かったです。

ですが、Vagrantを導入することで、実際に本番稼働する状態に近い環境(OS、ミドルウェア、使用言語バージョンなど)でテスト環境構築や開発を行えるので、その手法がとられるようになりました。

Vagrantのインストール(Windowsの場合)

こちらのサイトからダウンロードできます。

https://releases.hashicorp.com/vagrant/2.2.10/ ←※私と同じVerはこちら。
https://www.vagrantup.com/ ←※最新のVerがある公式サイトはこちら。

利用している端末によってインストーラのダウンロードが異なります。

・Windowsの場合は、「Windows64-bit」
・Mac OSの場合は、「macOS 64-bit」をクリックして、ダウンロードします。

Vagrantのインストール(Windowsの場合

「vagrant_2.2.xx_x86_64.msi」を起動し、「Next」をクリックして進めます。
※xxは、インストール時の最新版となります。

最初の画面が表示されるので「Next」で先に進めます。

ライセンスの同意画面が表示されるので、チェックを入れて「Next」をクリックします。

インストールフォルダの選択画面が表示されるので 「Next」をクリックします。

「Install」をクリックし、終わったら「Finish」をクリックします。

OS再起動が催促されるので、「Yes」をクリックして再起動しておきましょう。

Vagrantのインストール(Mac OSの場合)

ダウンロードしたディスクイメージ(vagrant_2.2.x_x86.dmg)をダブルクリックします。
※xxはインストール時の最新版となります。

インストーラ「vagrant.pkg」をダブルクリックします。

「はじめに」の画面で「続ける」をクリックします。

「インストールの種類」画面では、デフォルト設定のまま「インストール」をクリックします。

インストール完了後に、「閉じる」をクリックします。

VagrantからVirtualBox上のOSを起動する

VagrantでCentOS(KUSANAGI)を起動します。

Vagrantによる仮想マシンは、コマンドを入力していくことで作成・操作します。

Windowsならコマンドプロンプトを起動、Macならターミナルを起動します。

Vagrantのバージョンを確認する

コマンドプロンプトもしくはターミナル上でインストールしたVagrantのバージョンを確認してみます。

vagrant --version ←※入力する(もしくは vagrant -v)
Vagrant 2.2.10  ←※インストールされていればバージョンの数字が表示されます

仮想マシンを起動する

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

Vagrantは、「Vagrant Box」というイメージファイル(仮想マシンをテンプレート化したもの)を基にして、仮想マシンを作成します。

通常は、VirtualBoxのGUI(グラフィカルユーザインタフェース)画面上から、仮想マシンの作成ボタンをクリックし、ダウンロードしたOSメディアを選択してから、インストーラの指示に従って・・・という手順を踏んで操作していきます。

ですがVagrantでは、それらVirtualBoxでの手動の手順を自動化することが出来ます。

1.作業用ディレクトリ(フォルダ)への移動
cd C:/Users/user_name/

※user_nameは、パソコンでログインしているユーザー名を置き換えます。
(user_nameは、whoamiコマンドを入力しても確認できます)
2.kusanagiディレクトリを作成する(フォルダの名前は何でも良いですが、今回はkusanagiで進めます)
mkdir kusanagi
3.作成したkusanagiディレクトリに移動する
cd kusanagi
4.Vagrantの初期化
vagrant init primestrategy/kusanagi -wp5 --box-version 1.0

※「Vagrant init」コマンドはVagrantを初期化して、vagrantfileを生成するコマンドです
※初期化コマンドが正常に終わると、カレントディレクトリにvagrantfileというファイルが生成されます(dirコマンドのフォルダ一覧表示でも、存在有無を確認できます)
※今回使用するVagrant Boxは、こちらで配布されているものです
※「https://app.vagrantup.com/prime-strategy/boxes/kusanagi-wp5」

仮想マシンを設定する

Vagrantfileをテキストエディタで編集することで、使用する仮想マシンの設定をすることが出来ます。

テキストエディタはメモ帳でも、他の普段使用しているものでも構いません。

vagrantfileを開き、「vagrant init」コマンドで先ほど指定したVagrant Boxと、使用するバージョンが記述されているのを確認します。

以下では、テキストエディタのsakuraで開いています。

つぎに、Vagrantfileに設定されている、以下の1行と5行を差し替えて保存します。

差し替え前:

  # 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

この記述は仮想マシンに割り振るプライベートIPアドレスを、 “192.168.33.10” と設定している箇所です。また、”1024″の部分はパソコンのメモリーを逼迫しない程度に調整するので何でも良いですが、1024にしておきます。単位はMB(メガバイト)です。

Vagrantの起動をする

Vagrantを起動するには「vagrant up」コマンドを実行します。

vagrant up

※vagrant upは、カレントディレクトリをvagrantfileが入っているディレクトリ(今回はkusanagiディレクトリ)にして実行します。
失敗する場合は、カレントディレクトリ(現在居るディレクトリ)を確認します

数分経過し、ダウンロードが完了後、仮想マシンの生成が完了すると、仮想マシンは自動的に起動状態になっています。

最初の「vagrant up」は、比較的時間がかかる事が多いです。

「vagrant status」コマンドで、仮想マシンが稼働しているかを確認できます。running(稼働中)になっていれば稼働しています。

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

※PCをシャットダウンや再起動すると、作成したローカル開発環境にアクセスできなくなりますが問題ありません。再度コマンドプロンプトおよびターミナル上で「vagrant up」コマンドを実行すれば、開発環境が立ち上がります。
(コマンドプロンプを起動して、まずカレントディレクトリを「kusanagi」ディレクトリへ移動してから「vagrant up」は実行しましょう。自分の現在居る階層がずれていると失敗します)

参考:【まとめ】Vagrant コマンド一覧

仮想マシンに接続する

「vagrant ssh」コマンドで仮想マシンにSSH接続します。

管理者権限であるrootユーザーに昇格する場合は、「sudo su -」コマンドを実行します。

※rootユーザーは、サーバーの設定・削除までもができてしまう強い権限なので、取り扱いには十分に注意しましょう。

起動した仮想マシンにSSHでログインするためには、「vagrant up」を実施したPCで、次の方法をとります。

仮想マシンに接続 (Windowsの場合)

「Tera Term」などのSSHクライアントを利用して接続します。

IPアドレスは「 192.168.33.10 」

初めてのログイン時はセキュリティ警告が表示されるので「続行」をクリックします。

ユーザー名とパスフレーズは「vagrant」を入力します。

仮想マシンに接続 (Macの場合)

pacificmailディレクトリで「vagrant ssh」とコマンドを実行すると、SSHでログインができます。

仮想マシン接続後の設定をする

root権限へ切り替えます。

sudo su -

kusanagiのアップデートを実施します。

yum update kusanagi -y

CentOSのアップデートを実施します。

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

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

reboot

CentOSが起動したらもう一度TeraTermで接続してください。
(再起動の実施により、サーバとの接続が一度切断されるためです)

KUSANAGIの初期設定をする

「kusanagi」とは簡単に言うと、「仮想マシンのイメージファイルで、高速で動作するWordPress環境(サーバー)を作れる元のもの」と言えます。

kusanagiの初期設定には、専用のkusanagiコマンドを使用します。

再起動したので、もう一度root権限へ切り替えます。

sudo su -

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

kusanagi init --tz tokyo

このあたりは、以下のサイトを参考に進めました。

参考:KUSANAGIの初期設定

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

innodb_buffer_pool_size = 384M
query_cache_size = 128M
(略)
KUSANAGI initialization completed
(略)

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

kusanagiのプロビジョニング

プロビジョニングとは?

プロビジョニング 【provisioning】
情報システムの分野では、システムの需要に応じてサーバコンピュータへOS(オペレーティングシステム)や必要なソフトウェアを導入し、システムやネットワークなどについての設定を行い、実運用に投入するまでの作業や操作をサーバプロビジョニングという。

IT用語辞典e-Words

以降は例として「wptest」というドメインで想定して作成します。

kusanagi provision --WordPress wptest
画像に alt 属性が指定されていません。ファイル名: image-22.png

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

続いてホスト名の設定をします。ホスト名はFQDN形式で入力します。

FQDN 【Fully Qualified Domain Name】 完全修飾ドメイン名 / 絶対ドメイン名
サブドメイン名やホスト名など各階層を省略せずにすべて指定した形式のこと。他の表記法と区別してFQDNであることを明示したい場合は「www.example.co.jp.」のように末尾にドット「.」をつける。

IT用語辞典e-Words
画像に alt 属性が指定されていません。ファイル名: image-23.png

上記のようにホスト名(FQDN) を尋ねられます。

ここでは「wptest」と入力します。

次に上記のように、「Encryptの設定(SSL証明書の発行)」を尋ねられますが、今回は何も入力せずにEnterで先に進めます。

上記のように、「DB名の設定」を尋ねられます。

ここでは「wpdb」という名前でDBを設定します。

続いて上記のように、「DBの一般ユーザー名の設定」となります。

ここでは「wpuser」という名前のユーザーを作成します。

下記のメッセージでは、作成した「 DBの一般ユーザーパスワードの設定 」をします。

下図のように、「Provisioning of wptest completed. Access wptest and install WordPress!」と表示されたら、プロビジョニングは完了です。

hostsファイルに追記して名前解決をする

VagrantのデフォルトのIPアドレスは「192.168.33.10」です。ですが、このままブラウザのURLに入力してもWordPressのページへ繋がりません。

そこで、ローカル端末のWindowsの「hosts」ファイルに追記して、名前解決をします。

まずコマンドプロンプトを右クリックなどから、管理者権限で実行します。

【参考:hostsファイルは上書きできない?上書き禁止のhostsファイルの更新方法と書き方

次に、下記のように「hosts」ファイルを開きます。

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

hostsファイルが開けたら、一番下の行に、下記の一行(「192.168.33.10 wptest」)を追加します。
(この手のファイル編集は、念のため元のファイル名をリネームしたバックアップをコピーしておいてから編集を進めると安心です)

追記後にhostsファイルを保存し、再度chromeなどのブラウザから、URLにドメイン名(今回はhttp://wptest)を入力すると、「さあ始めましょう」のページが開けます。

WordPressのインストール前の設定をする

chromeなどのブラウザから、URLにドメイン名(今回はhttp://wptest)を入力すると、「さあ始めましょう」のページが開けるので、[さあ、始めましょう]ボタンをクリックします。

すると以下の画面が表示されます。

下記5つの項目を設定します。

  1. データベース名
  2. データベースのユーザー名
  3. データベースのパスワード
  4. データベースホスト
  5. テーブル接頭辞

今回はそれぞれ以下のように入力しました。

1は、「DB名の設定」で指定した名前を指定します。
2は、「DBの一般ユーザー名の設定」で指定した名前を指定します。
3は、「DBの一般ユーザーパスワードの設定」で指定したパスワードを指定します。
4は、localhost
5は、wp_

入力後に「送信」ボタンをクリックします。

WordPressのインストール

「インストール実行」ボタンをクリックすると、WordPressの情報を入力する画面になります。

入力後に「WordPressをインストール」ボタンをクリックすると、WordPressのインストールが始まります。

上記の画面が表示されます。

WordPressのログイン確認をする

以上でローカルパソコンにWordPressをインストールする手順が完了となり、WordPressのログイン画面からログインできるようになります。

最後に:

VirtualBox上の仮想マシンにWordPressのローカル開発環境を構築することは、最初は時間が掛かりましたが、やり方を覚えて慣れれば簡単に構築できるようになります。

もし環境構築や設定に失敗しても、仮想環境なので再構築が簡単にでき、安心して操作できるようになります。

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

sudo shutdown now

【続きの記事:FileZillaからサーバーへ接続してファイルを転送する方法