WordPressでサイトを作っていくうえで必要となるプラグインが多くあります。
プラグインの設定方法やどのように動くかを確認するためには、インストールして、実際の動きをいろいろ試す必要があります。
その時にインターネット上に公開している環境しかないとその環境で確認作業を行うしかありません。
ただ、これほど恐ろしいことはありません。万が一、プラグインの設定方法を間違えたり、何かを削除してしまったりして折角作ったサイトが動かなくなってしまうかもしれません。
そこで、プラグインの設定や動作を試す環境があれば自由に確認することができます。
検証用の環境として別環境をローカルに環境に作ることをお勧めします。
仮想ソフトにVirtualBox、仮想化ソフトにVagrant、ローカル環境としてVCCWを使用してローカル環境を構築する方法を説明します。
- VirtualBoxでは、各種OSの仮想環境を簡単に作成できる
VirtualBoxではなくて、VMVareを使っても同様のことができます。 - Vagrantは、共有されている仮想環境を簡単に利用できる
共有された仮想環境の中にVCCWというWordPressの仮想環境があります。
WordPressのローカル環境の種類
WordPressで簡単にローカル環境を作るためには、いくつかの方法があります。
それぞれ、作成する人のスキルや用途によって選択するものが変わり、必要なものを使ってみてください。
ローカル環境の種類
WordPressでローカル環境を作るために代表的に4つの方法があります。
Local by Flywheel(LOCAL)、VCCW、XAMPP、XAMPの仕組みを使うことでローカル環境を作れます。
- Local by Flywheel(LOCAL)
技術的なことが詳しくなくても、インストールするのみでWordPressのローカル環境が構築できるので初心者の方にお勧めです。 - VCCW
VirtualBoxやVMWare等の仮想化ソフトウェアとVagrantを使用してWordPressのローカル環境を作成します。
ちなみに、VCCWというのはV(Vagrant)C(Chef)C(CentOS)W(Wordpress)の略になります。 - XAMPP
Apache、MySQL、PHPをローカル環境で動かすための仮想化ソフトウェアです。
このソフトウェアをインストール後、WordPressをインストールします。 - MAMP
MAMPは、XAMPPのMac版という感じです。ただ、MAMPもWindowsで動かすこともできます。
Local by Flywheelが一番簡単にローカル環境が構築できます。
他の3つは、仮想化ソフトウェアをインストール後、いくつかの手順を踏む必要があることと、少し技術的な知識も必要になります。
VirtualBoxとVagrantとVCCWでローカル環境の作成
VirtualBoxとVagrantとVCCWでローカル環境を作成する手順は、4ステップになります。
- VirtualBoxのインストール
- Vagrantのインストール
- Vagrantプラグインのインストール
- WordPress(VCCW)のインストール
VirtualBoxのインストール
まずは、仮想化ソフトウェアのVirtualBoxのインストールをします。
インストールは、Windows10にVirtualBox(Ver6.1)をインストールする方法を参考にインストールしてください。
Vagrantのインストール
続いてVagrantのインストールを行います。
インストールは、仮想環境ツールvagrantのインストールと使い方を参考にインストールを行ってください。
Vagrantプラグインのインストール
Vagrantのインストールが完了したら、hostsファイルに作成した仮想環境のIPアドレスを自動的に追加してくれるプラグインをインストールします。
インストールするプラグイン:vagrant-hostsupdater
vagrant plugin install vagrant-hostsupdater
このプラグインは、システム管理者権限がないと、hostsファイルを更新できないのでエラーとなります。
vagrantを実行するコマンドプロンプトを管理者権限で実行してください。
WordPress(VCCW)のインストール
ローカルに作成するWordPressの環境は「wp-test.com」というサイトとして構築します。
- サイト名
wp-test.com - IPアドレス
192.168.33.10 - 日本語のWordPressのサイト
- 作業フォルダ
D:\vagrant
VCCWの配置するフォルダの作成
VCCWを配置するために任意場所にフォルダを作成します。
今回は、Dドライブに「vagrant」フォルダを作成します。
mkdir \vagrant\
cd \vagrant\
Boxの登録
Vagrantは、Boxという単位で仮想環境を管理しています。
このBoxというのは、仮想環境のベースとなる情報がとなっており、そのBoxをVagrantが使用して共有された仮想環境を作っていきます。
このBoxであるWordPressの環境を、VCCWサイトからダウンロードしてきます。
「vccw-3.21.1.zip」をダウンロードして、解凍します。
解凍すると「vccw」フォルダがあるので、先ほど作成したvagrantの作業フォルダへコピーし、フォルダ名を変更します。
「vccw」フォルダを「wp-test.com」へリネームします。
rename vccw wp-test.com
cd wp-test.com
次にBOXをvagrantに登録します。これでvagrantに仮想環境の枠ができます。
vagrant box add vccw-team/xenial64
※VCCWをZIPでダウンロードしていたら不要
vagrantに登録できました。
VCCWによるローカル環境のインストールと起動
「\wp-test.com\provision」フォルダの中にある「default.yml」をコピー、編集して「site.yml」を作成します。
作成した「site.yml」を「wp-text.com」フォルダ直下にコピーします。
この「site.yml」ファイルの中で、各自の環境に合わせて変更します。
変更箇所は、6ヶ所を変更します。
本番に近い形にする場合は、もう少し変更する必要があるかもしれませんが、プラグインの動作検証やWordPressの設定確認だけであれば、このぐらいで大丈夫です。
Virtual Machine Settings
この項目は、VitrualBoxに登録されるときの仮想環境に割り当てるメモリサイズ、CPU(コア数)を指定します。
memory: 1024
cpus: 1
Network Settings
この項目は、ホスト名とIPアドレスを指定します。
ローカルに作成するWordPressのホスト名(VCCWフォルダをリネームした名前)を指定します。
hostname: wp-test.com
ip: 192.168.33.10
Vagrant Hostsupdater Aliases
ホスト名のエイリアスを指定します。hostnameに「www.」をつけたものを指定します。
hostname_aliases: www.wp-test.com
WordPress Settings
設定するWordPressのバージョンと言語の指定をします。
言語は、デフォルトでは「en_US」になっているので「ja」(日本語)に変更します。
version: latest
lang: ja
WordPress User
WordPressへログインするユーザ、パスワード、メールアドレスを指定します。
ローカル環境なので、デフォルトでも問題ありません。
admin_user: admin
admin_pass: admin
admin_email: vccw@example.com
WordPress Database
WordPressのDBへのユーザ、パスワードを設定します。
こちらも、ローカル環境なのでデフォルトで問題ありません。
db_prefix: wp_
db_host: localhost
db_name: wordpress
db_user: wordpress
db_pass: wordpress
「site.yml」ファイルの設定が終わったら、「vagrant up」コマンドでVCCWを起動します。
初回は、VirtualBoxへのVCCWのインストールがありますので時間がかかりますが、2回目以降は、起動のみなのでそこまで時間はかかりません。
vagrant up
コマンドを実行します。
実行ログの表示が止まったら、VCCWのインストールと起動が完了です。
PS D:\vagrant\wp-test.com> vagrant up Bringing machine 'wp-test.com' up with 'virtualbox' provider...
==> wp-test.com: Importing base box 'vccw-team/xenial64'...
==> wp-test.com: Matching MAC address for NAT networking...
==> wp-test.com: Checking if box 'vccw-team/xenial64' version '20180107' is up to date...
==> wp-test.com: Setting the name of the VM: wp-test.com
==> wp-test.com: Clearing any previously set network interfaces...
==> wp-test.com: Preparing network interfaces based on configuration...
wp-test.com: Adapter 1: nat
wp-test.com: Adapter 2: hostonly
==> wp-test.com: Forwarding ports...
wp-test.com: 22 (guest) => 2222 (host) (adapter 1)
==> wp-test.com: Running 'pre-boot' VM customizations...
==> wp-test.com: Booting VM...
==> wp-test.com: Waiting for machine to boot. This may take a few minutes...
wp-test.com: SSH address: 127.0.0.1:2222
wp-test.com: SSH username: vagrant
wp-test.com: SSH auth method: private key
wp-test.com:
wp-test.com: Vagrant insecure key detected. Vagrant will automatically replace
wp-test.com: this with a newly generated keypair for better security.
wp-test.com:
wp-test.com: Inserting generated public key within guest...
wp-test.com: Removing insecure key from the guest if it's present...
wp-test.com: Key inserted! Disconnecting and reconnecting using new SSH key...
==> wp-test.com: Machine booted and ready!
==> wp-test.com: Checking for guest additions in VM...
wp-test.com: The guest additions on this VM do not match the installed version of
wp-test.com: VirtualBox! In most cases this is fine, but in rare cases it can
wp-test.com: prevent things such as shared folders from working properly. If you see
wp-test.com: shared folder errors, please make sure the guest additions within the
wp-test.com: virtual machine match the version of VirtualBox you have installed on
wp-test.com: your host and reload your VM.
wp-test.com:
wp-test.com: Guest Additions Version: 5.2.2
wp-test.com: VirtualBox Version: 6.1
==> wp-test.com: [vagrant-hostsupdater] Checking for host entries
==> wp-test.com: [vagrant-hostsupdater] Writing the following entries to (C:/Windows/system32/drivers/etc/hosts)
==> wp-test.com: [vagrant-hostsupdater] 192.168.33.10 wp-test.com # VAGRANT: b4d0d89d1a675fc7416c2bf23f20b044 (wp-test.com) / 491d7719-7427-4477-86dc-5fd3fca528f3
==> wp-test.com: [vagrant-hostsupdater] 192.168.33.10 www.wp-test.com # VAGRANT: b4d0d89d1a675fc7416c2bf23f20b044 (wp-test.com) / 491d7719-7427-4477-86dc-5fd3fca528f3
==> wp-test.com: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
==> wp-test.com: Setting hostname...
==> wp-test.com: Configuring and enabling network interfaces...
==> wp-test.com: Mounting shared folders...
wp-test.com: /vagrant => D:/vagrant/wp-test.com
wp-test.com: /var/www/html => D:/vagrant/wp-test.com/wordpress
==> wp-test.com: Running provisioner: ansible_local...
wp-test.com: Running ansible-playbook...
PLAY [all] *********************************************************************
TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]
TASK [Place a ~/.bash_profile] *************************************************
changed: [wp-test.com]
TASK [Place a ~/.bash.d/] ******************************************************
changed: [wp-test.com]
TASK [Place a ~/.bash.d/vccw.sh] ***********************************************
changed: [wp-test.com]
TASK [Download the Composer] ***************************************************
changed: [wp-test.com]
TASK [Run the Composer installer] **********************************************
changed: [wp-test.com]
TASK [Create a ~/.composer/] ***************************************************
changed: [wp-test.com]
TASK [Place a composer.json] ***************************************************
changed: [wp-test.com]
TASK [Install Composer libraries] **********************************************
changed: [wp-test.com] => (item=phpunit/phpunit:5.6)
changed: [wp-test.com] => (item=squizlabs/php_codesniffer:~2.0)
changed: [wp-test.com] => (item=wp-coding-standards/wpcs:*)
TASK [Install the WP-CLI] ******************************************************
changed: [wp-test.com]
TASK [Create a ~/.wp-cli/] *****************************************************
changed: [wp-test.com]
TASK [Install WP-CLI packages] *************************************************
changed: [wp-test.com] => (item=https://github.com/vccw-team/wp-cli-scaffold-movefile/archive/master.zip)
TASK [Setup a bash completion for the WP-CLI] **********************************
changed: [wp-test.com]
TASK [Create `wp-cli` dir] *****************************************************
ok: [wp-test.com]
TASK [Place a `wp browse` command.] ********************************************
changed: [wp-test.com]
TASK [Place a ~/.gemrc] ********************************************************
changed: [wp-test.com]
TASK [Install Wordmove] ********************************************************
changed: [wp-test.com]
TASK [Install Ruby gems] *******************************************************
changed: [wp-test.com] => (item=bundler)
skipping: [wp-test.com] => (item=wordmove)
TASK [Place a ~/.npmrc] ********************************************************
changed: [wp-test.com]
TASK [Install npm packages] ****************************************************
TASK [Check the `phpcs` exists.] ***********************************************
changed: [wp-test.com]
TASK [Setup the WordPress coding standard] *************************************
changed: [wp-test.com]
TASK [Checkout the WordPress i18n Tools] ***************************************
changed: [wp-test.com]
TASK [Remove unused files if exists] *******************************************
changed: [wp-test.com] => (item=.wget-hsts)
RUNNING HANDLER [wp-cli-config] ************************************************
changed: [wp-test.com]
RUNNING HANDLER [wp-cli-local-config] ******************************************
ok: [wp-test.com]
PLAY [all] *********************************************************************
TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]
TASK [Allow remote connections to MySQL] ***************************************
changed: [wp-test.com]
TASK [Place ~/.my.cnf] *********************************************************
changed: [wp-test.com]
TASK [Create SSL dir] **********************************************************
changed: [wp-test.com]
TASK [Create SSL keys] *********************************************************
changed: [wp-test.com]
TASK [Replacing the Apache User] ***********************************************
changed: [wp-test.com]
TASK [Replacing the Apache Group] **********************************************
changed: [wp-test.com]
TASK [Place /etc/apache2/sites-available/site.conf] ****************************
changed: [wp-test.com]
TASK [Disable keepalive] *******************************************************
changed: [wp-test.com]
TASK [Setup timeout] ***********************************************************
changed: [wp-test.com]
TASK [Enable virtual host for WordPress] ***************************************
changed: [wp-test.com]
TASK [Update php.ini] **********************************************************
changed: [wp-test.com] => (item={'value': False, 'key': u'short_open_tag'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'upload_max_filesize'})
changed: [wp-test.com] => (item={'value': u'neutral', 'key': u'mbstring.language'})
changed: [wp-test.com] => (item={'value': u'UTC', 'key': u'date.timezone'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_enable'})
changed: [wp-test.com] => (item={'value': 9000, 'key': u'xdebug.remote_port'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'default_charset'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_connect_back'})
changed: [wp-test.com] => (item={'value': u'VCCWDEBUG', 'key': u'xdebug.idekey'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_autostart'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.profiler_enable'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'mbstring.internal_encoding'})
changed: [wp-test.com] => (item={'value': u'/tmp', 'key': u'session.save_path'})
changed: [wp-test.com] => (item={'value': u'127.0.0.1', 'key': u'xdebug.remote_host'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'post_max_size'})
TASK [Update php.ini for cli] **************************************************
changed: [wp-test.com] => (item={'value': False, 'key': u'short_open_tag'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'upload_max_filesize'})
changed: [wp-test.com] => (item={'value': u'neutral', 'key': u'mbstring.language'})
changed: [wp-test.com] => (item={'value': u'UTC', 'key': u'date.timezone'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_enable'})
changed: [wp-test.com] => (item={'value': 9000, 'key': u'xdebug.remote_port'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'default_charset'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_connect_back'})
changed: [wp-test.com] => (item={'value': u'VCCWDEBUG', 'key': u'xdebug.idekey'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.remote_autostart'})
changed: [wp-test.com] => (item={'value': True, 'key': u'xdebug.profiler_enable'})
changed: [wp-test.com] => (item={'value': u'UTF-8', 'key': u'mbstring.internal_encoding'})
changed: [wp-test.com] => (item={'value': u'/tmp', 'key': u'session.save_path'})
changed: [wp-test.com] => (item={'value': u'127.0.0.1', 'key': u'xdebug.remote_host'})
changed: [wp-test.com] => (item={'value': u'1024M', 'key': u'post_max_size'})
TASK [Install mailcatcher] *****************************************************
changed: [wp-test.com]
TASK [Add mailcatcher to service] **********************************************
changed: [wp-test.com]
TASK [Start mailcatcher] *******************************************************
changed: [wp-test.com]
TASK [Update php.ini for mailcatcher] ******************************************
changed: [wp-test.com]
TASK [Update php.ini for mailcatcher for cli] **********************************
changed: [wp-test.com]
RUNNING HANDLER [restart apache] ***********************************************
changed: [wp-test.com]
RUNNING HANDLER [restart mysql] ************************************************
changed: [wp-test.com]
PLAY [all] *********************************************************************
TASK [Gathering Facts] *********************************************************
ok: [wp-test.com]
TASK [Create Database] *********************************************************
changed: [wp-test.com]
TASK [Create MySQL user] *******************************************************
changed: [wp-test.com]
TASK [Change owner of the /var/www/html/] **************************************
ok: [wp-test.com]
TASK [Remove index.html from document root] ************************************
ok: [wp-test.com]
TASK [Run `wp core download`] **************************************************
changed: [wp-test.com]
TASK [Create temporary file for extra-php in wp-config.php] ********************
changed: [wp-test.com]
TASK [Run `wp core config`] ****************************************************
changed: [wp-test.com]
TASK [Run `wp db reset`] *******************************************************
changed: [wp-test.com]
TASK [Run `wp core install`] ***************************************************
changed: [wp-test.com]
TASK [Create index.php for wp_siteurl] *****************************************
skipping: [wp-test.com]
TASK [Move index.php for wp_siteurl] *******************************************
skipping: [wp-test.com]
TASK [stat] ********************************************************************
ok: [wp-test.com]
TASK [Create `.gitignore`] *****************************************************
skipping: [wp-test.com]
TASK [Move `.gitignore`] *******************************************************
skipping: [wp-test.com]
TASK [Run `wp core language install`] ******************************************
changed: [wp-test.com]
TASK [Run `wp plugin install`] *************************************************
changed: [wp-test.com] => (item=logbook)
TASK [Run `wp plugin install wp-multibyte-patch`] ******************************
changed: [wp-test.com]
TASK [Run `wp theme install`] **************************************************
skipping: [wp-test.com]
TASK [Install `wordpress-importer`] ********************************************
skipping: [wp-test.com]
TASK [Download WordPress theme unit test data] *********************************
skipping: [wp-test.com]
TASK [Import WordPress theme unit test data] ***********************************
skipping: [wp-test.com]
TASK [Run `wp options update`] *************************************************
changed: [wp-test.com] => (item={'value': u'Hello VCCW.', 'key': u'blogdescription'})
TASK [Get the timezone] ********************************************************
changed: [wp-test.com]
TASK [Update timezone] *********************************************************
changed: [wp-test.com]
TASK [Get the date format] *****************************************************
changed: [wp-test.com]
TASK [Update date format] ******************************************************
changed: [wp-test.com]
TASK [Run `wp rewrite structure`] **********************************************
changed: [wp-test.com]
TASK [Flush rewrite rules] *****************************************************
changed: [wp-test.com]
TASK [Run `wp core multisite-convert`] *****************************************
skipping: [wp-test.com]
TASK [Create `.htaccess` for multisite] ****************************************
skipping: [wp-test.com]
TASK [Move `.htaccess` for multisite] ******************************************
skipping: [wp-test.com]
TASK [Setting up WordPress multisite options] **********************************
TASK [Check `wp scaffold movefile` exists.] ************************************
changed: [wp-test.com]
TASK [stat] ********************************************************************
ok: [wp-test.com]
TASK [Create a Movefile] *******************************************************
ok: [wp-test.com]
PLAY RECAP *********************************************************************
wp-test.com : ok=69 changed=59 unreachable=0 failed=0
PS D:\vagrant\wp-test.com>
正常に実行が終わるとVirtualBoxに仮想環境「wp-test.com」が追加されて、実行されていることが確認できます。
ローカル環境のWordPressへのアクセス
ローカル環境のセットアップが正常に完了したか確認するためにWordPressへアクセスしてみます。
「http://www.wp-test.com」でローカル環境にアクセスしてみてください。
WordPressの初期画面が表示されます。
今度は、「http://wp-test.com/wp-login.php」でWordPressの管理画面にログインしてください。
「site.yml」の「WordPress User」で指定したユーザ・パスワードでログインします。
成功していた場合は、変更したユーザ、パスワードを使います。
無事にログインできました。
まとめ
VirtualBoxとVagrantとVCCWを使用してWordPressのローカル環境を作りましたが、VMWareでも同様にローカル環境を作ることができるので、また、チャレンジしたいと思います。
また、簡単に作成するのであれば、Local by Flywheel(LOCAL)を使ったほうが簡単に作成できると思います。
XAMPPやMAMP、VirtualBox+Vagrantの組み合わせで、WordPress以外のOSを使ってみることも楽しいと思います。
目的に合わせて必要なツールを選択して、ローカル環境を作成してください。
プラグインのテスト、テーマの開発、学習を行ってより良いサイト作りができると思います。
コメント