Wordmove を利用したWordPressローカル環境の構築

前回XAMPPを利用したローカル環境を構築したが、本番環境との同期が全くできなかったので、

  • VirtualBox
  • Vagrant
  • VCCW
  • Wordmove
  • git

これらのツールを組み合わせてローカル環境を構築する。

環境

  • OS:Windows10 1909
  • CPU intel Core i7 3632QM
  • RAM DDR3 16GB
  • ROM HDD 1TB(早くSSDに換装したい・・・(T_T))

各ツールのバージョン

  • VirtualBox 6.1.4
  • Vagrant 2.2.7
  • VCCW 3.21.1
  • Wordmove 2.4.0(VCCWにパッケージング済み)
  • git 2.26.0

BIOSの設定で仮想化が有効になっているか確認

後述するVirtualBoxで仮想化を行う関係で、BIOSの設定で「intel virtualization technology」が有効になっている必要がある。

有効になっているか確かめる方法は「shift+ctrl+Esc」キーで起動するタスクマネージャーの「パフォーマンス」タブでCPUの欄を選択。

「仮想化」の欄が「有効」になっていればOK

無効になっている場合は残念ながら各メーカーによって設定方法が異なるのでここでは設定方法の解説は割愛させていただく。

環境構築の手順

各種インストール、設定の方法を紹介する。

なお、Yamlファイルの編集や、Linuxをターミナルで操作する等の操作が必要とされるので、若干のプログラムと Linux の知識が要求されることは覚悟願いたい。

1.各種ツールのインストール

各種必要なソフトウェアをインストールする。基本的にデフォルト設定でインストールして構わない。

VirtualBox

PC内に仮想マシンを作成するのに必須のツール。

ダウンロードサイトはこちら↓

Oracle VM VirtualBox

真ん中のドデカイボタンをクリック

Windows hosts をクリックしてインストーラーをダウンロード

→インストーラーを実行してインストール

デフォルトでおけ

各種ショートカットを作成するか任意で選択

一度ネットワークが切れるとの警告
他に動いているソフトがないか確認してYes

一度ネットワークが切れるとの警告
他に動いているソフトがないか確認してYes

インストール

ここで起動する必要はないのでチェックを外してFinish

Vagrant

VirtualBox をターミナルからコマンドで操作できようにするソフトウェア

ダウンロードサイトはこちら↓

Vagrant by HashiCorp
Vagrant enables users to create and configure lightweight, reproducible, and portable development environments.
Downloadをクリック

環境に合わせて選択。今回はWindows 64bit を選択した。

Windows Defencer が弾いてくるが、詳細情報をクリックして実行。

Next

同意してNext

インストールするディレクトリの確認。特に問題なければデフォルトでOK

インストール終了後に再起動を求められるので他にソフトウェアが動いていないことを確認して再起動する。

VCCW

VCCWはソフトウェアというより、ファイルの塊なので特にインストールする等の作業は必要ない。

VCCW - A WordPress development environment.
VCCW is a Vagrant based development environment for WordPress plugins, themes, or websites.

↑のぺージにアクセス

Download.zip のボタンをクリックしてZipファイルを任意のファイルにダウンロードする。

git

定番のバージョン管理ツール

今回は本番サーバとの接続時にSSH接続を使用するのだが、その際、Unixのコマンドを使用する必要がある。

しかし、Windows標準のコマンドプロンプトではUnixコマンドを使用できないので、Gitをインストールすると自動的に付随してインストールされる Git bash を使用する。

Git for Windows
We bring the awesome Git VCS to Windows

インストーラーのダウンロードはこちら↑

Gitのインストールはオプションが多すぎるので、今回は自分が参考にさせて頂いたページを紹介にて割愛させて頂く。

私家版 Git For Windowsのインストール手順
私の独断と偏見によるGit for Windowsのインストール手順です。 Git for Windowsのダ…

プロジェクトフォルダの作成

任意の場所に仮想マシンを作成するフォルダを作成する。

Webサイトのデータがすべてこのフォルダに入るので容量にゆとりのあるドライブに作成したい

今回のプロジェクトフォルダの場所は

D: VirtualBox/wplocal

とした

プロジェクトフォルダのパスに日本語が入ると様々な問題の原因となるので作業用ディレクトリの作成場所に注意し、パスが英字のみになるようにする。

VCCWの解凍→プロジェクトフォルダにコピー

先程ダウンロードしたvccw-(バージョン名).zipを解凍し、2階層下にある中身を先程作成したプロジェクトフォルダにコピーする

vccw の中身を作業用ディレクトリにコピー

default.yml の編集

コピーしたファイルの「provision」フォルダの中にある default.yml を編集する。

編集には Microsoft のフリーソフト 「Visual Studio Code」を使用する。

最低限設定する項目が lang の項目

デフォルトでは「en_US」となっているところを「ja」に変更する。

これでWordPressの日本語版がダウンロードされるようになる。

hostname はローカルに立ち上げたWebサイトにアクセスする際のアドレスを指定する。これは任意でOK

ip は初めて仮想マシンを作成する場合はデフォルトでOKなのだが、2つ3つと仮想マシンを増やす場合には末尾の10を11,12等に変更する必要がある。

#Virtual Machine Settings で仮想マシンに割り当てるPCのリソースを設定できる。

memoryで割り当てるメモリ容量をメガバイト単位で設定する。

cpus は割り当てるCPUの論理コア数を設定する。

PCのスペックに余裕があるのであれば割り当てるリソースを増やすことで仮想マシンの処理速度を若干早くできる。しかし、割り当て量を増やしすぎるとホストOSである Windows の動作が不安定になることがあるので要注意だ。

他にもサイト名やデータベース等の設定が可能だが基本デフォルトで構わない。

Vagrant にプラグイン vagrant-hostsupdater をインストール

ここからの操作には Git をインストールすると自動的に付随してインストールされる Git bash を使用する。

スタートメニューのGitフォルダに格納されているハズだ

まず

vagrant -v

のコマンドを入力し、vagrant (バージョン名) と返ってきたら OK

次にプラグインとBoxのインストールに入るのだが、その前にセキュリティソフトの保護を停止する。

今回の環境には Kaspersky がインストールされていたのだが、保護がONのままだと、Box等のインストールがうまくいかなかった。

下記のコマンドでプラグインをインストールする。

vagrant plugin install vagrant-hostsupdater

このプラグインはホストOSの設定ファイル(/etc/hosts)へゲストOS情報の追加や削除を行うのに必要となる。

インストール後、次のコマンドでインストールが成功しているか確認する

vagrant plugin list

vagrant-hostsupdater が表示されればOK

Vagrant に Box を追加

次のコマンドで Vagrant に仮想環境のイメージとなる BOX を追加する。

vagrant box add vccw-team/xenial64

そこそこの容量があるので回線の状況等にもよるが少し時間がかかる。

vagrant box list

のコマンドで vccw-team/xenial64 と返って来ればOK

仮想マシンを起動してローカル環境に接続

Git bash でプロジェクトフォルダに移動し、仮想マシンを起動する。

ここで Git bash を管理者権限で再起動する。

右クリックで管理者として実行する

管理者権限で実行しておかないと、仮想マシンの初回起動時に実行されるホストOSの設定ファイルへの書き込みがブロックされてしまうようだ。

管理者権限で Git bash を起動したら

cd 作業用ディレクトリのパス

で作業用ディレクトリに移動する。自分の作業環境では

cd /d/VirtualBox/wplocal

となる。

 vagrant up

のコマンドで仮想マシンを起動する。初回の起動では様々なソフトウェアをインストールするため時間がかかる。

処理が一通り終わったら

vagrant status

で仮想マシンが起動しているか確認する。

自分の環境では

matsu_000@pchan MINGW64 /d/VirtualBox/wplocal
$ vagrant status
Current machine states:

wplocal                  running (virtualbox)

The VM is running. To stop this VM, you can run `vagrant halt` to
shut it down forcefully, or you can run `vagrant suspend` to simply
suspend the virtual machine. In either case, to restart it again,
simply run `vagrant up`.

となった。

仮想マシン名         running (virtualbox)

と表示されれば仮想マシンは起動している。

ブラウザを起動し、default.yml で設定したホスト名をアドレスバーに打ち込めば接続できる。(デフォルトでは vccw.test)

WordPress 初期の画面にアクセスできる

本番サーバーとSSH接続する

仮想マシンから本番用サーバにSSH接続する。

ここからは次のコマンドで仮想マシンに接続し、仮想マシンを操作する

$ vagrant ssh  ←コマンドを入力
Welcome to Ubuntu 16.04.3 LTS (GNU/Linux 4.4.0-87-generic x86_64)

 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage

2 packages can be updated.
0 updates are security updates.


vagrant@vccw:~$ ←仮想マシンに接続完了

SSH鍵ペアの生成

次のコマンドでSSH鍵ペアを生成する

ssh-keygen
「オイ、その画面みせてええんか!」ってツッコミが飛んできそうやが、この鍵は実際には使ってないから安心せぇ
ハッカーどもこの鍵で俺のサーバに侵入しようとしてもムダやぞー

Enter file in which to save the key で鍵を生成するパスを指定する。
デフォルトで /home/vagrant/.ssh/id_rsa が指定されており、そのままでOK。なにも入力せず Enter

次に Enter passphrase (empty for no passphrase):で鍵のパスフレーズの入力が求められる。
任意のパスフレーズを入力しEnter

Enter same passphrese で同じパスフレーズを入力して完了。

ssh公開鍵をサーバに登録する

サーバのSSH設定を有効にし、生成されたSSH公開鍵をサーバに登録する。

今回はXserverの場合で説明する。

まず、アカウントのSSH設定の欄からONにする。

次に仮想マシンに生成されたSSH公開鍵をサーバーに登録する。

仮想マシンに接続した状態から

vagrant@vccw:~$ cd .ssh ←鍵ペアが生成されたディレクトリに移動
vagrant@vccw:~/.ssh$ ls ←ディレクトリの中身を確認
authorized_keys  id_rsa  id_rsa.pub ←ディレクトリの中身
vagrant@vccw:~/.ssh$ cat id_rsa.pub ←公開鍵の中身を出力

cat コマンドで出力された公開鍵をSSH設定の 公開鍵登録・更新 の欄に貼り付け更新する。

SSH鍵のパーミッションを変更する

秘密鍵のアクセス権を変更しないとセキュリティ上のエラーが発生してしまう。

まず、chmod コマンドで秘密鍵と .ssh ディレクトリのアクセス権を変更する。

vagrant@vccw:~$ chmod 700 .ssh
vagrant@vccw:~$ chmod 600 .ssh_id_rsa

chmod コマンドの詳細は↓を参考

パーミッションなどを設定する!chmodコマンドの詳細まとめ【Linuxコマンド集】
このページではchmodコマンドの詳細をお伝えする。また、chmodの操作方法を通してパーミッションに関してもまとめた。

次にchgrp コマンドで.ssh ディレクトリとそれ以下のファイルにアクセスできるグループを変更する。このコマンドは管理者権限を利用しないとできない場合が多く sudo で管理者権限を付与して実行する。

vagrant@vccw:~$ sudo chgrp -R users .ssh

同じく chgrp コマンドの詳細は↓を参考

グループ情報を変更するchgrpコマンドの使い方【Linuxコマンド集】
chgrpはファイルやディレクトリの管理グループを変更するコマンドだ。このページではchgrpを使ったファイルやディレクトリの管理グループの変更方法を解説する。ぜひ、この機会に覚えておいてほしい。

ssh コマンドで本番用サーバと接続してみる

下記のコマンドで本番用サーバと ssh 接続する

vagrant@wplocal2:~$ ssh ユーザー名@サーバのホスト名 -p ポート(xserverの場合10022)
Enter passphrase for key '/home/vagrant/.ssh/id_rsa': ←設定した秘密鍵のパスフレーズを入力
[ユーザー名@サーバのホスト名 ~]$ ←サーバにログイン完了

サーバーにログインできれば

[matsushin36@sv8043 ~]$ exit

でログアウトする。

Wordmove を利用して WordPress を同期する

仮想マシンの初回起動時に Movefile.yml というファイルがプロジェクトフォルダに生成される。

この Movefile に本番用サーバとの接続に関する設定を書き込む。Visual Studio Code で開く。

local の項目は自動で設定される。

local の項目はデフォルトでOK

production の項目に本番用サーバの情報を書き込む

production に本番用サーバのアドレスやデータベースの情報を書き込む。

本番環境のパスを書き込む

  • vhost:本番用のアドレス
  • wordpress_pass:本番用サーバの wordpress 本体が格納されているディレクトリのパス

vhost はそのまま運営しているサイトのアドレスを入力すればよい。

wordpress_pass はxserver の場合

/home/ユーザー名/ドメイン名/public.html

サブドメイン等を設定している場合は public.html の後でサブドメインごとに分けられる。
詳細はFTPソフト等で確認してほしい。

データベース

database の欄に

  • name:データベース名
  • user:データベースのアクセス権を持つユーザー名
  • password:データベースユーザーのパスワード
  • host:データベースのipアドレス
  • port:データベースのポート (Xserverの場合3306)

を入力する。host はホスト名を入力するハズなのだが、ipアドレスを直接入力したほうがエラーが起りにくい模様。

exclude で同期しないファイルを設定

.htaccess の設定を本番サーバと同期してしまうとローカルでページが表示されないことがあるので、追記して同期されないように設定する。

一度同期した後は

  • – “themes/*”
  • – “plugins/*”

などを追記して同期にかかる時間を短縮するのもよい。

また、BuckWPup などのバックアッププラグインを導入している場合、バックアップファイルの容量が大きいため、

  • – “uploads/backwpup*”

などを追記してバックアップファイルが同期されないようにしておくと良い。

wordmove コマンドでローカルにサーバの中身を同期する

2階層上のフォルダにある vagrant フォルダがホストOSのプロジェクトフォルダと共有されている。

次のコマンドで設定したMovefile.yml が共有されているフォルダに移動する。

vagrant@vccw:~$ cd ../../vagrant
vagrant@vccw:/vagrant$ ls 
ansible.cfg  Movefile.yml  README.md    wordpress  wp-cli.yml
LICENSE      provision     Vagrantfile  wp-cli

ディレクトリに Movefile.yml が入っていることを確認した後

vagrant@vccw:/vagrant$ wordmove pull --all

で同期を開始する。

ローカル環境に設定したホスト名 (デフォルトでは vccw.test) をブラウザのアドレスバーに打ち込んでアクセスし、編集する。wordpress管理画面には ホスト名/wp-admin でアクセスできる。ログインユーザー名とパスワードは本番と同じになっている。

編集したたら次のコマンドで本番サーバに送信する。

vagrant@vccw:/vagrant$ wordmove push --all

なお、編集内容が文字だけの記事の追加や編集であればデータベースのみの同期で反映される。

データベースのみだけの同期など wordmoveコマンドの詳しいオプションなどはこちら↓を参考

Wordmoveの基本操作 - Qiita
Wordmoveとは Wordpressのデータをサーバー〜ローカル間で転送できるツール ex: 前提 Mac / 10.12.4 Sierr...

同期する項目ごとに秘密鍵のパスフレーズの入力を求められるので入力する

ssh-agent を利用してパスフレーズの入力を省略する

同期する項目ごとにイチイチパスフレーズを項目してもよいのだが、ssh-agent を利用すれば省略できるので利用する。

eval `ssh-agent`

で ssh-agent を起動する。ssh-agent はアポストロフィ「’」ではなく、グレイヴ・アクセント「`」(shift+@)なので注意

次のコマンドで秘密鍵のパスを指定し、秘密鍵のパスフレーズを入力する

vagrant@wplocal:~$ ssh-add .ssh/id_rsa
Enter passphrase for .ssh/id_rsa: ←パスフレーズを入力
Identity added: .ssh/id_rsa (.ssh/id_rsa)

デフォルトの場合上記の通りでおけ

仮想マシンをシャットダウンするとssh-agent の設定も消えるので起動するたびに設定する必要はあるが、同期の度に何度もパスフレーズを打ち込まずに済むので楽。

テスト用サーバーの構築

まれにpushする際にテーマ等が破損したり、間違ってpushすると取り返しがつかないため一度テスト用のサーバ(stagingサーバと呼ぶ)でテストしてから本番サーバにpushすることを強く推奨する。

テストサイト用のドメインを設定

テスト用サーバは新しくレンタルサーバを契約しなくても、既存のサーバに割り当られている初期ドメインや、サブドメイン等を利用することで構築可能だ。

僕はXserverでこのブログを含め、2サイトを運営している。

Xserver契約時に割り当てられた初期ドメインにサブドメインを2つ設定し、それぞれにWordpress をインストールすることで、2サイト分のテスト用サイトとした。

ここで1つ注意点だ。

テスト用サーバにはレンタルサーバの管理画面等からあらかじめWordpressをインストールしておくこと。

全くからのサーバにpushしても設定やデータベースの関係から表示されない。

Movefile の項目に staging を追加する

Movefile のproduction の欄の下にstaging を作成し、-e オプションで同期先を指定できるようにする。

production から下の項目をコピーし、一番下に貼り付ける。このときインデントがズレると読み込めなくなるため、productionと同じインデントに配置する。

次にコピーしたproduction をstagingに書き換える。

あとはstagingの内容をproductionの時と同じ要領でテスト用サーバの設定を書き込んで完了。

本番サーバにpushする前に

wordmove push -e staging --all

として、テスト用環境に一度pushしてエラーやバグの有無を確認してから本番環境にpushすればサイトが表示されなくなるリスクを大幅に軽減できる。

robots.txt ファイルを使って検索エンジンへのインデックスを阻止する

テスト用環境が検索エンジンにインデックスされてしまうと、テスト用サーバにユーザーがアクセスしてしまったり、スパム扱いで本番用サイトがGoogleからペナルティを受けてしまう可能性がある。

そこで、テスト用環境の public.html にrobots.txt を設置し、中に

User-Agent:*
Disallow:/

と指示を書き込むことで検索エンジンにインデックスされるのを防ぐ。詳しくは↓を参考。

サイト最適化の為のrobots.txtの書き方と効果的な活用方法
robots.txtはSEO内部対策の1つだ。この記事では、robots.txtとは一体何なのか?という初歩の部分から、robots.txtを利用するべきシーン、そして実際の設定方法について詳しくお伝えする。

まとめ

クソめんどくさかったがコマンド一発で本番と同期できる環境が完成した。

WordPressのメジャーアップデートや新しいプラグインを試したいとき、今回作成したローカル環境がおおいに役立つ。

WordPress・テーマ・プラグイン それぞれの相性の問題でサイトが表示されなくなる等の問題はよくあることで、それが本番サイトで発生させてしまうと収益が吹き飛んだり、ずっと404エラーのままだったりすると検索順位の後退の原因にもなるので、WordPress本体をイジるときは是非活用してほしい。

コメント

タイトルとURLをコピーしました