Vagrant+VCCWでWP開発環境を構築~終了まで

長年XAMPPを使っていましたが、最近小難しい案件が増えてきたため、そろそろVagrantを使ってみようと思いました。

取り急ぎWordPressの開発環境がほしいわけで、VCCWを使って開発環境の構築をしてみたところ、いろいろ嵌ったのでメモ。

なお、Windowsしかわからないので、Macでの場合とはちょいちょい違うこともあると思います。

準備からの流れは以下の通り

  1. VirtualBoxのインストール(初回のみ)
  2. Vagrantのインストール(初回のみ)
  3. VCCWのダウンロード
  4. vagrant-hostsupdaterのインストール(初回のみ)
  5. 初期設定
  6. Vagrant起動
  7. Vagrant終了(だいじ)

順に見ていきましょう。



Virtualboxのインストール(初回のみ)

公式サイトから最新版をインストール。僕の場合はOracle VM VirtualBox Base Packages – 5.2.8 (Microsoft Windows Only)をダウンロードし、インストールしました。

いやいやVirtualBoxってなんやねん

Vagrantの前に、実はこのVirtualBoxというやつが大事です。

そもそもVagrantというのは、簡単にいうとサーバーの環境情報を書き込まれたファイルであって、これだけではサーバーとしての機能はありません。

VirtualBoxという仮想マシンを使ってVagrantという設定ファイルを読み込み、仮想サーバーを立ち上げるということになります。

言ってしまえば、VirtualBoxこそがサーバーの本体です。

Vagrantのインストール(初回のみ)

公式サイトからWindowの64bit版をダウンロードし、インストール。

上記2つは、インストール中も特にオプションとか変更はせず、ストレートにそのままインストールしました。
2つともインストールしたら、PCは再起動したほうがいいらしいので、再起動しました。

VCCWのダウンロード

PCの再起動が終わったら、おもむろにコマンドプロンプトを開き、開発環境を構築すると思われるディレクトリに移動。

僕の場合は、”C:\vagrant”というディレクトリを作り、その中で開発環境を構築することに。

C直下まで移動し、vagrantというディレクトリを作る。これくらいであればマウスの右クリックでもできるので、どっちでもいいんですが、黒い画面でできるようになっていたほうが後々便利ですよ。

次に、vagrantのディレクトリに入り、更にsampleというディレクトリを作り、そしてその中に入る。

次は、vccwをgitからダウンロードさせていただく。

うまくいけば、vccwというディレクトリが作成され、その中にいろいろ入っているのが確認できると思います。

今のうちにvccwディレクトリ内に移動しておきましょう。

vagrant-hostsupdaterのインストール(初回のみ)

vagrant-hostsupdaterは、hostsファイルを自動で書き換えてくれるプラグイン。これがあれば、vagrant up したあとにhostnameで設定したURLでブラウザからアクセスできるようになる。ちなみにこれはVagrant本体と同じく、PC1台につき1回インストールすればOK。



初期設定

vagrant upする前に、WordPressインストール時の設定をいじっておきましょう。

site.ymlの編集

provisionディレクトリ内にあるdefault.ymlを、vccwディレクトリ直下に移動し名前をsite.ymlに変更する。コマンドプロンプトなら以下でできる

site.ymlをエディタで開き、設定をちょっといじる。WordPressの初期設定をいろいろいじれるようになっているが、とりあえず重要なのは以下

  • hostname
  • ip
  • lang

hostnameは、そこに設定したアドレスでブラウザから確認できるようになる。ここで注意したい点が以下の2つ

  • 実際にあるドメインは使用しないほうがいい。
  • ~.devという形式は、chromeでは使用できないらしい。sample.testとかにすればOK

ipは、最初は初期設定のままでOKなんですが、環境を複数構築したい場合は、ipが同じだとうまくいかないっぽいので、値を変える必要がありそう。(例:192.168.33.11)

langは言語設定。日本語が良ければ”en_us”→”ja”にしておきましょう。



他にもデバッグモードとかマルチブログモードの設定もできるようになっています。好みに合わせて設定しましょう。

Vagrant 起動

実際にブラウザでsample.testとうってアクセスし、うまく表示されていれば大成功!

念のため管理画面にログインしてみます。

ログインの初期設定は、デフォルトでは(admin/admin)になっているみたいです。本番にアップする際に面倒なので、最初からsite.ymlを編集してちゃんとしたアイパスに設定しておいたほきましょう。

Vagrant終了(だいじ)

Vagrantを起動したら、基本的にずっと起動したままになっています。

これだとPCをシャットダウンできない事態に陥るため、作業終了の際は必ずVagrantを終了させてやりましょう。

Vagrantの起動状態を確認

終了させたら、Vagrantが終了したかを確認しときましょう。

Current machine states:

wptest.test poweroff (virtualbox)

The VM is powered off. To restart the VM, simply run vagrant up

poweroffって出てるので止まったみたい。

はまった点

vagrant-hostsupdaterをインストールしていなかったため、アクセスできずにややはまり。そしてvccwを1回削除し、同じ名前のディレクトリ、同じIPでもう1回インストールしたら、hostnameは変わったもののWordPressのインストールディレクトリが以前のままになっていて(データベースに記録されているんだろうか…よくわからない)レイアウトが大爆発してはまった。

  • vagrant-hostsupdaterを忘れない(初回のみ)
  • IP、hostnameはプロジェクトごとに変える

これを気を付ければスマートにいけると思います。

シェアする

フォローする