Wordpress

MacにWordPressのローカル仮想開発環境をVirtualBox、Vagrant、VVVで構築する手順

WordPress入門記事一覧

海外のWordpressのコアディストリビューター（正規代理店）でも使われている開発環境、Vagrant＋VirtualBox＋VVV。
MacでWordPressの開発環境をvvv構築する方法と使い方を詳しく解説します。

WordPressの開発環境を構築

WordPressの開発環境を構築するには様々な方法があります。

  • MAMP（ザンプ）
  • WAMP（マンプ）
  • VirtualBox　＋　Vagrant
    • VVV（Varying-Vagrant-Vagrants）※この記事の解説
    • VCCW（Vagrant Chef Centos Wordress）（Vagrantのbox）
  • Docker
  • Local by Flywheel：WordPressに特化してGUIベースの開発環境ツール
  • cloud9：クラウド型の仮想開発環境

この記事では、「VirtualBox ＋Vagrant＋VVV」の環境構築について解説します。

なぜ、仮想環境を使うのか？

なぜ、仮想環境を使うのでしょうか？
あなたは、普段パソコンを使うとき、OSは何を使っていますか？
Macやwindowsという方が多いと思います。

一方、サーバー上で使われるOSではLinuxが大きなシェアを占めています。
WEBアプリケーションを公開するには開発したプログラムファイルをサーバー設置します。
つまり最終的には、LinuxOS上でプログラムを動かすことになります。

Macやwindows上ではうまく動かいていも、いざ本番環境にデプロイ（作成したアプリケーションをサーバに設置、利用できる状態にすること）したとき、OSの違いによりうまく動かない可能性があります。

本番環境であるLinux環境をローカルパソコンに用意して開発すれば、このような問題を避けることができます。

もっと詳しくは「ローカル開発環境とは？仮想マシンとは？」にて解説しています。

WordPressを動かすには？

WordPressを動かすためには以下が必要です。

  • OS
  • Webサーバー
  • MySQL(データベース)
  • PHP(プログラミン言語)

vvvを使えば、WordPressが動く環境を簡単にローカルに構築することができます。

VVV（Varying-Vagrant-Vagrants）とは？

Varying-Vagrant-Vagrants/VVV
https://github.com/Varying-Vagrant-Vagrants/VVV
VVV - An open source Vagrant configuration for developing with WordPress
GitHub

「VVV」とはアメリカの大手ウェブ制作会社の 「10up」社が提供している、VagrantのBox（仮想マシンのテンプレート）です。

レンタルサーバーをVPS借りて、サーバー上でWordPressを動かしているような環境を
パソコン内に用意することができます。

VVVに含まれるソフト

「VVV」には、以下が含まれています。

  1. nginx (mainline version)(WEBサーバー)
  2. MariaDB 10.1.x (drop-in replacement for MySQL)（データベース）
  3. php-fpm 7.0.x
  4. WP-CLI（WordPress をコマンドラインで操作できるツール）
  5. memcached（メモリキャッシュシステム）
  6. PHPUnit
  7. Composer（PHPのパッケージ管理ツール）
  8. NodeJs（サーバーサイドのJavaScript）
  9. Mailcatcher

WEBサーバーはnginx、データベースはMariaDBで、MySQLと互換性のあるDBです。

VVVでWordPressの開発環境を構築する手順の流れ

VVVでWordPressの開発環境を構築する大まかな流れは以下の手順です。
VirtualBox（バーチャルボックス）とVagrant（ベイグラント）を導入済の場合は、３番から進めます。

  1. VirtualBox（バーチャルボックス）のインストール
  2. Vagrant（ベイグラント）のインストール
  3. vagrant-hostsupdaterのインストール
  4. VVVのプロジェクトをgithubからクローン
  5. VVVの起動
  6. ブラウザからアクセス
  7. WordPressの管理画面にログイン
  8. WordPressの日本語化

VVVでWordPressの開発環境を構築 しよう！

それでは、VVVでWordPressの開発環境を構築する手順を説明します。

VirtualBox（バーチャルボックス）のインストール

VirtualBoxのサイトから VirtualBoxのインストーラをダウンロードして、インストールします。

詳しい方法は、「MacOSにVirtualBox（バーチャルボックス）をインストールする手順」
を参照してください。

Vagrantのインストール

Vagrantのサイトから Vagrantのインストーラをダウンロードして、インストールします。
詳しい方法は、「MacにVagrant（ベイグラント）をインストールする手順」を参照してください。

Vagrantのプラグイン「vagrant-hostsupdater」をインストール

cogitatio/vagrant-hostsupdater
https://github.com/cogitatio/vagrant-hostsupdater
Contribute to vagrant-hostsupdater development by creating an account on GitHub.
GitHub

「vagrant-hostsupdatert」とは仮想マシンへの接続設定を便利にするためのVagrantのプラグイン（拡張機能）です。

仮想マシンの接続設定では、hostsファイル（private/etc/hosts） でip アドレス、ドメインの設定が必要です。

Vagrantのプラグイン「vagrant-hostsupdatert」を追加すると、この設定の手間を省くことができます。

「vagrant-hostsupdatert」はVagrantで仮想マシンを起動・停止するとき、Vagrantfileに書かれた接続情報をホストOSのhostsファイルに自動で書き換えてくれます。

ターミナルから以下のコマンドを実行し「vagrant-hostsupdatert」をインストールします。

vagrant plugin install vagrant-hostsupdater

「vagrant-hostsupdatert」が正常にインストールできたか確認するには以下のコマンドを実行します。

vagrant plugin list
vagrant-hostsupdater (1.0.2)

vagrant-hostsupdaterのバージョン(1.0.2)がインストールされていることが確認できました。

ディレクトリの準備

仮想マシンを管理するためのディレクトリをつくります。

「mkdir」コマンドで「vagrant」ディレクトリを作成します。

mkdir vagrant

「cd」コマンドで 「vagrant」ディレクトリへ移動します。

cd vagrant

githubからVVVをクローン

Varying-Vagrant-Vagrants/VVV
https://github.com/Varying-Vagrant-Vagrants/VVV
VVV - An open source Vagrant configuration for developing with WordPress
GitHub

「VVV」はGitHubから入手できます。

GitHubとは、ソースコードの管理サービスで、様々なコードが公開されています。
VVVをgithubからクローン（githubのソースコードを仮想仮想環境にコピー）しましょう。
以下の「git clone」コマンドを実行します。

$ git clone [リポジトリ名] [パスの指定]
git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vvv
Cloning into 'vagrant/vvv'...
remote: Counting objects: 7602, done.
remote: Total 7602 (delta 0), reused 0 (delta 0), pack-reused 7602

GitHubからクローンできたら、次に「ls」コマンドでファイルの中身を確認してみましょう。
「VVV」フォルダができていることが確認できます。

ls
vvv

vagrantの初期化

vagrantの初期化を行っていきます。

まず、「cd」コマンドで 「vvv」フォルダに移動します。

cd vvv
次にvagrantの初期化を行います。
vagrant init
すると、以下のようにメッセージが返ってきます。
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.
日本語に翻訳すると、「`Vagrantfile`がこのディレクトリに置かれました。
仮想構築構築の準備が整いました。Vagrantの詳しい使い方はvagrantup.comを参照してください。」
と書かれています。

「Vagrantfile」の確認

 lsコマンドでフォルダの中を見てみましょう。
ls

「vagrant init」コマンドを実行したことで、「vvv」フォルダの中に「Vagrantfile」が作られました。
「Vagrantfile」とは仮想マシンの構成を記述するための設定ファイルです。

「cat」コマンドでVagrantfileの接続情報を確認しておきましょう。

cat Vagrantfile

ずらっと設定項目が表示されるので、その中から以下を探してください。
目視で探すのは大変なので、⌘+Fで使って検索しましょう。

config.vm.network :private_network, id: "vvv_primary", ip: "192.168.50.4"

「192.168.50.4」の部分が接続のための情報です。このIPアドレスは後ほど使います。

仮想マシンを起動

それでは、仮想マシンを起動させてみしょう。
起動には「vagrant up」コマンドを使います。
なお、起動するときは「Vagrantfile」が置かれているディレトリ内で実行する必要があります。
（今回の例では「vagrant/vvv」フォルダ内にいる状態で行う）
vagrant up
コマンドを実行すると、以下のように文字列が流れ始めるので、vagrantの起動を待ちます。
vagrantの初回の起動はかなり時間がかかるので待ちましょう。
以下のように表示されれば、vagrantの起動完了です。

==> default: ...done.

vagrantの起動確認

vagrantが正常に起動できているか「vagrant status」コマンドで確認してみましょう。
vagrant status

「running」と表示されていれば、仮想マシンは正常に起動できています。

また、仮想マシンの起動状態は、「VirtuarlBox」からも確認できます。
（VirtuarlBoxは事前のインストールでアプリケーション内にフォルダにあります。）

起動状態は、VirtuarlBoxの画面の左側で確認します。
「VVV」が「実行中」となっていることが確認できました。

ブラウザからアクセス

仮想マシンが起動できたら、仮想マシンのWordPressにアクセスしてみましょう。
ブラウザから以下のURLにアクセスします。

http://local.wordpress.dev/

以下のようにWordPressのページが表示されればOKです。

http://192.168.50.4/ に接続

次に、以下のアドレスにアクセスしてみましょう。

http://192.168.50.4/

すると、「VVV２」とリンク情報が記載されたページが開きます。
仮想マシン上のWordpressの管理画面やページにアクセスするとき、このページを起点にすると便利です。

WordPressの管理画面にログイン

次にWordPressの管理画面にログインしてみましょう。
ブラウザから以下のアドレスを開くと、WordPressのログイン画面が開きます。

http://local.wordpress.dev/wp-login.php

ログインするときのユーザー名は「admin」、パスワードは「password」を入力し、「Log In」をクリックします。

WordPressの管理画面にログインできました！

WordPress管理画面を日本語化

「VVV」でインストールされるWordPressは英語版です。
これを日本語化する手順を説明します。

ターミナルを開き、以下コマンドを入力して仮想マシンにログインしてください。

vagrant ssh
仮想マシンにログインできると、プロンプトの表示が以下に変わります。これは、仮想環境の中に入った状態であることを表します。
vagrant@vvv:~$

仮想環境に入ったら、cdコマンドで「wordpress-default」ディレクトリ（フォルダ）に移動します。

cd /srv/www/wordpress-default/

次に以下のコマンドで日本語をインストールします。

wp core download --locale=ja --force
コマンドを実行後、「Success」と表示されば成功です。
Success: WordPress downloaded.
vagrant@vvv:/srv/www/wordpress-default$

これで日本語版WordPressがインストールできました！

WordPresssの管理画面から日本語に切り替え

上記で日本語版のインストールはできましたが、それを適用する設定が必要です。
Wordpresssの管理画面から日本語に切り替えます。

WordPresssの管理画面の左メニューからSettings➔Generalを選択してください。
次に、「Site Language」項目の プルダウンメニューの中から「日本語」を選びます。

日本語を選択したら、「Save Changes」をクリックして設定を保存します。

すると、管理画面の言語が日本語に切り替わりました！

日本語への切替手順は以上です。

日本語化されたかWEBサイトのチェック

管理画面だけでなく、WEBサイトの言語も確認するために、ブラウザから再度以下のアドレスにアクセスしてみましょう。

http://local.wordpress.dev/

メニューが日本語になっていることが確認できました。

vvvのディレクトリ構成について

ホストOSのディレクトリ

vagrant/vvv/www/wordpress-default/

ゲストOSのディレクトリ

/srv/www/wordpress-default/

ホストOSで、ソースを修正すればゲストOS上のソースも更新されます。

コマンドまとめ

この記事で紹介した、コマンドをまとめておきます。
作成されたファイルを確認しながら、説明をまじえての作業だったので、始めての方は、長く感じたと思います。
Vagrant、VirtualBox、vagrant-hostsupdaterの準備が出来ている場合、
実際にはコマンド数行でWordpreeローカル開発環境が構築できます。

仮想マシンの設置

#gitからクローン

git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git vagrant/vvv

#vvvフォルダに移動

cd vagrant/vvv

#vagrantの初期化

vagrant init

#vagrantの起動

vagrant up

日本語化

#vagrantへの接続

vagrant ssh

#「wordpress-default/」フォルダへ移動

cd /srv/www/wordpress-default/

#日本語化のコマンド実行

wp core download --locale=ja --force

まとめ

WordPressの開発環境をVagrant＋VirtualBox＋VVV（Vagrantのbox）で構築する手順について説明しました。
仮想環境を用意すれば、WordPressテーマ開発やカスタマイズのときに便利で、失敗してもいくらでもやり直すことができます。

作った仮想マシンにFTPソフトでアクセスする方法については、「FTPソフト、FileZilla（ファイラジラ）でVVVで構築した仮想マシンに接続する方法」を確認してください。

VVVで構築した仮想マシンにFTPソフト（FileZilla、Cyberduck）で接続する方法
https://hajipro.com/mac/vvv-ftp-filezilla
Vagrantのboxで立ち上げたWordpressの仮想環境にFTPソフトで接続する設定方法を説明します。FTPソフトはFileZilla（ファイラジラ）とCyberduck（サイバーダック）を使った方法を紹介します。前提条件今回は以下のWordpressの開発仮想環境を例に説明します。virtualbo...
ハジプロ！

「黒い画面は苦手」とう人は、「Local by Flywheel」を試してみましょう。
GUIで操作できるので、ポチポチクリックするだけでとても簡単にWordPressの開発環境を構築できます。

初心者でも簡単にWordPressのローカル開発環境を構築! Local by Flywheelの使い方

初心者でも簡単にWordPressのローカル開発環境を構築! Local by Flywheelの使い方
https://hajipro.com/wordpress/local-by-flywheel
WordPressのローカル開発環境構築で現在主流になっているのは、Vagrat（ベイグラント）での立ち上げではないかと思います。「VagratでVCCWやVVVなどコマンド操作での環境構築は苦手！」という方には、「Local by Flywheel」（ローカル・バイ・フライホイール）がオス...
ハジプロ！
WordPress入門

シェア！

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。

RECOMMENDこちらの記事も人気です。