VagrantとVCCWでWordPressのローカル環境を構築する方法(macOS用)

Little Springのローカル制作環境は、Vagrant(ベイグラント)とVCCWで構築しています。

簡単に説明すると、本番サーバにアップする前に、作業用のローカル環境(PCのデスクトップ環境)でWordPressを構築する必要がありますが、WordPressのサイトは動的なのでそのままでは動きません。データベースも含めた動作環境を用意する必要があります。その環境を作るためのツールが、今回紹介するVagrantとVCCWです。

この記事では、VagrantとVCCWをインストールし、実際にWordPressをローカル上で動かす手順を解説しています。なお、僕の環境はMacなので、macOSでの構築方法になります。




VagrantとVCCW環境の構築手順

それでは、実際の構築手順を解説していきます。インストーラーをダウンロードして行う方法もありますが、コマンドラインに慣れるという意味で、ターミナルを使った方法で解説いたします。

手順1:ターミナルを起動する。

macOSには標準で「ターミナル」というアプリケーションが入っています。ターミナルは、「コマンド」と呼ばれる命令文を打ち込むことで、Macの操作や設定を行うためのツールです。
なお、似たようなもので、Windowsには「コマンドプロンプト」というツールが入っています。コマンドの書き方が異なりますが、行なっていることは同じです。

まずは、アプリケーションフォルダから、ターミナルを起動します。

手順2:homebrewをインストール

Vagrantをインストールする前に、まずはhomebrewをインストールしましょう。homebrewはWeb開発などに必要なソフトウェアの導入を簡単にする、macOS専用のパッケージです。

公式サイトのトップにもある、以下のコマンドを入力します。

/usr/bin/ruby -e "$(curl -fsSL raw.githubusercontent.com/Homebrew/install/master/install)"

途中でパスワードを聞かれるので、Macのアカウントに設定しているものを入力します。(以降の手順で、パスワードを聞かれた場合は全て同様です)

==> Installation successful!
==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  docs.brew.sh/Analytics.html
==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  github.com/Homebrew/brew
==> Next steps:
–	Run brew help to get started
–	Further documentation: 

この表示が出ればインストール完了です。

手順3:Virtual Boxをインストール

次にオラクルが開発している仮想環境アプリケーション、「Virtual Box」をインストールします。

仮想環境アプリは、他にVMware FusionやParallels DesktopがMacでは有名ですが、今回はVagrantを動かすにあたり一般的な、Virtual Boxを使用します。
(VMware Fusionでも可能な方法があるらしいですが、難しそうなのでやめました)

FusionやParallels Desktop上でWindowsを動かしているMacユーザーが多いと思いますが、それと同様にVirtual Box上でWindowsの代わりにVagrantを動かすと、イメージして頂ければOKです。

それでは、以下のコマンドを入力して、Virtual Boxをインストールしましょう。

$ brew cask install virtualbox

homebrewをインストールしたことで、Homebrew Caskという機能が使用できる様になり、シンプルなコマンドで済みます。また、Vagrantはコマンドのみで使うことができるので、毎回Virtual Boxを起動するといった操作は不要です。

手順4:Vagrantをインストール

同様にVagrantをHomebrew Caskでインストールします。コマンドは下記になります。

$ brew cask install vagrant

手順5:VagrantとVirtual Boxが正常にインストールされているかを確認

ここで一度、VagrantとVirtual Boxが問題無くインストールされているかを確認しましょう。以下のコマンドをそれぞれ入力します。

$ vagrant -v
Vagrant 2.1.5
$ VirtualBox --help
Oracle VM VirtualBox Manager 5.2.18
以下省略~

上記の様に最新バージョンが表示されれば問題ありません。

手順6:vagrant-hostsupdater をインストール

vagrant プラグインのvagrant-hostsupdaterもインストールします。オプションですが、VCCW公式サイトの手順にも書かれているので、一応インストールします。

$ vagrant plugin install vagrant-hostsupdater

vagrant-hostsupdaterは何をするものかというと、Vagrantの起動時に設定ファイルに記述したhosts設定を行い、仮想マシンにアクセスするときにIPアドレスからではなく、ホスト名から接続できる様にするプラグインです。

例えば、”http://192.168.33.10/“ を、”http://vccw.test/“ のURLで表示することができる様になります。

手順7:vagrant boxをインストール

次に仮想マシンのテンプレートとなる、vagrant boxをインストールします。

$ vagrant box add vccw-team/xenial64

これは結構時間がかかりますので、気長に待ちましょう。

手順8:VCCWをダウンロードし、ローカル環境に設置

次にVCCWをローカル環境に設置します。

公式サイトに「Download .zip」ボタンがあるので、そこからzipファイルをダウンロードします。コマンドで行う方法もありますが、Macのアクセス権限で弾かれる場合もあり、公式に従いzipで対応します。

ダウンロードをしたら、管理しやすい好きな場所に「vccw」フォルダの中身を設置します。例えば僕の場合だと、以下の場所に設置いたしました。

/user/⁨hiro__koizumi(ユーザーアカウントのフォルダ)/Documents/⁨Project_LittleSpring⁩/LittleSpringWeb/

macOS標準の「書類(Documents)」フォルダの中に「/Project_LittleSpring/LittleSpringWeb/⁩」というプロジェクト用のフォルダを作り、そこにzip解凍した「vccw」フォルダの中身を全て格納しています。

手順9:default.ymlを複製し、site.ymlにリネーム

まずCDコマンドで、VCCWを設置したディレクトリに移動します。

$ cd VCCWを設置したディレクトリ

手順8で書いた僕の例だと、

$ cd /Users/hiro__koizumi/Documents/Project_LittleSpring/LittleSpringWeb

になりますね。なお、Vagrant起動時にディレクトリを指定する必要があるため、このコマンドは毎回使うことになります。

そして、/provision/ フォルダの中にある「default.yml」を以下のコマンドで「site.yml」に複製・リネームします。

$ cp provision/default.yml site.yml

「site.yml」が手順6で書いた、VCCWの「設定ファイル」になります。

手順10:site.ymlの設定

site.ymlを開くと、WordPressのwp-config.phpの様に、いくつかの設定項目が記述されています。取り急ぎ、ここだけ変えておきましょう。

hostname: ls-local(ローカル環境のURLを記述)
lang: ja(日本語に変更)

手順11:VCCWを使い、仮想環境を起動

これで準備が整ったので、VagrantとVCCWで仮想環境を起動しましょう。

VCCWを設置したディレクトリが選択されている点を確認後、下記のコマンドを入力し、Vagrantを起動します。

$ vagrant up

初回のみWordPressのインストールが行われるため、少し時間がかかります。WordPressのファイル一式が、VCCWと同じフォルダにインストールされるので、あとはテンプレートファイルを自由に編集して構築していきましょう。また、site.ymlに設定したホスト名をWebブラウザで入力すると、WordPressのローカルサイトが表示されます。

Vagrantの終了と再起動をする際は、以下のコマンドを入力します。

終了

$ vagrant halt

再起動

$ vagrant reload

これでサーバ上に都度アップをしなくても、ローカル環境で作業をすることが可能になりました。余談ですが、最近話題のDockerを組み合わせた方法もあるので、今度試してみようと思っています。

今回は以上になります。それでは皆さん、頑張ってWordPressの制作を進めましょう!