VCCWによるWordPress用ローカル環境構築&ハマりやすいポイント

★気に入ったらシェアをお願いします!

060-vccw-dev

みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

引き続き、我がWindowsマシンに本番環境と超簡単に同期できるWordPressのオススメローカル環境を作っていきたいと思います。

前回はPC仮想化ソフトVirturalBoxと、開発環境の構築共有を簡単にするツールVagrantをインストールしました。

VirturalBox&VagrantでローカルPC内に仮想開発環境を構築する
本番環境と簡単に同期できるWordPress用ローカル環境を作る第一歩としてWindowsにPC仮想化ソフトVirturalBoxと、環境構築を簡単にするツールVagrantをインストールしていきます。

今回は続いてVCCWによるWordPress開発環境を作っていきます。

ここはBIOSの設定とか、ハマるポイントがいくつかありますのが、一回うまくいけば後が超楽チンですよ!

vagrant-hostsupdaterをインストール

VCCWを使うにあたって、Vagrantにプラグインを追加する必要があるのでお願いします。

vagrant-hostsupdaterというプラグインなのですが、仮想マシン起動時にhostsというファイルの登録処理をしてくれるんですって。

プラグインvagrant-hostsupdater

…ま、ひとまずよくわからなくても先には進めますので、以下コマンド実行してください。vagrant-hostsupdaterがインストールされます。

VCCWでWordPress環境を構築する

ここからの手順をざっくり説明しておきます。

今後の手順としては

  • VCCWをローカルにコピーしてきて作業ディレクトリを作成(クローン)
  • Vagrantでの起動時の設定ファイルsite.ymlを変更&保存
  • Vagrantで起動(初回起動時にオススメ環境が自動で完成!)

という流れになります。

思い出してほしいのですが、Vagrantというツールはコマンド一発で環境を構築することができるとお伝えしました。

上記の手順の1番目、VCCWをクローンしたときに、Vagrantのコマンド一発でオススメのWordPress開発環境が構築されるような設定もコピーされていますので、あまり細かいことを意識せずに環境構築ができるという寸法なんですね。

では詳細の手順を追っていきますね。

VCCWをローカルにクローンする

まずgithubに上がっているVCCWのデータをローカルにコピーしてきて作業ディレクトリを作成します。

これをバージョン管理ツールGitを使って実行します。Gitをインストールしてない方はこちらをどうぞ。

非エンジニアでもSourceTreeを使えば超簡単にGitでのバージョン管理ができる
非エンジニアで初心者でも簡単にGitでのバージョン管理ができるGitクライアントツールSourceTreeの使い方とリポジトリ、コミットなどのGitのバージョン管理の基本についてお伝えしています。

まず作業ディレクトリを作成したいディレクトリまで移動します。今回は「C:\Users\Noriaki\Dropbox\develop\project」とします。

移動した先で、git cloneコマンドを使って

としてください。これで「https://github.com/vccw-team/vccw.git」(共有リポジトリといいます)にあるデータをコピーしてきて、現在のディレクトリの「vccw」という名前の作業ディレクトリを作成します。

vccwのディレクトリをgit cloneする

実際のフォルダの中を見てみますと

vccwフォルダの中身

色々なファイルとフォルダがコピーされていますね。

site.ymlを作成してvccwフォルダに設置

上記までで基本的な準備は完了なのですが、一部設定ファイルを変更しておくと良いのでやっておきます。

vccwフォルダの中に「povision」というフォルダがありますが、その中にdefault.ymlというファイルがあります。

これをsite.ymlというファイルにコピーしてvccw直下に配置します。

このsite.ymlというファイルを置いておくと、後ほど仮想マシンを起動する際に設定を読み込んでくれます。

このファイルの中身をエディタで少しだけ書き換えておきます。

まず「hostname」の項目を「vccw.dev」から任意の名称に変更。そのままでもいいのですが、今回は「test.dev」に変更しました。

また「lang」の項目を「ja」に変更します。

これでWordPressが日本語対応になります。ちなみに私はこれをずっと「jp」としていてプチハマりしました。注意してください。

修正後のsite.ymlファイルの中はこのような設定になります。

site.ymlファイルの設定

これで準備は完了です。

ちなみに「ip」はこのままでよいですが、別のWordPressサイトを作りたい時など二つ目以降の環境構築の際は「192.168.33.11」などと変更をします。

vagrant upで仮想マシンを起動

ではようやくですが、Vagrantコマンドで仮想マシンを起動していきます。

ディレクトリvccwにいる状態で

を実行してください。

初回は色々な設定やらインストールをやるので、それはもうたいそう時間がかかります。私は約10分かかりました。

終わったら仮想マシンがちゃんと動作しているか確認してみましょう。

コマンドで

これで仮想マシンの状態を確認できます。

vagrant statusで仮想マシンのステータス確認

「test.dev」が「running]となっています。無事に起動中ですね。

で、驚きなのですが

  • Apache
  • PHP
  • MySQL
  • WordPress
  • WP-CLI
  • Wordmove

などが既に仮想マシン内にインストールされています。さらにWordPressサイトのデータベースもすでに出来上がっています。そりゃ時間かかりますわな。

ではWordPressサイトを見てみましょう。ブラウザで「http://test.dev/」または「http://192.168.33.10/」にアクセスしてみて下さい。

vccwでインストールしたWordPressサイト

おお~、バッチリですね~。

管理画面も「http://test.dev/wp-admin/」でアクセスができます。デフォルトではadmin/adminで入れるはずです。

vccwでインストールしたWordPressサイト管理画面
もちろん管理画面でいろいろといじれる状態になっています。

仮想マシンを停止する場合は

とします。

vagrant upができない…超ハマった原因とその解消法

一旦スムーズに進んでいるテイで説明してきましたが、私は初回の仮想マシン起動時、つまりvagrant upコマンド時に全く仮想環境が起動しない現象に悩まされました。

画像でいうとこんな感じです。

Warningがいっぱい出てvagrant upができない

「test.dev: Warning: Connection timeout. Retrying…」が大量に出ます。

とっても悩まされたのですが、調べていくうちにこの記事に出会いました。

こんにちは。 @sakashushu です。 Parllet(個人で作成・公開しているアルファ版のWeb家計簿) (Play Framework 1.2.4)の更新は、私がPlay 2.3(Scala)を使いこなせるよう..

ん?BIOS!?

BIOSはバイオスと読みます。その役割は以下になります。

マザーボード上のROMに搭載されているプログラムで、パソコンがハードディスクにアクセスして、OSに主導権を渡す前(起動する前)の段階で、パソコンにつながっているキーボード、マウス、CPU、ハードディスクなどの管理や制御を行っています。
引用:BIOS パソコン初心者講座

まさかBIOSで仮想環境を許可する/しないを設定する項目があるとは…。

BIOSはPC起動時に特定のキーを押すことで設定画面に入ることができます。私の場合はThinkPad x240sで F1 キーで入れました。

機種によって入り方が異なると思うので、調べてみてください。

早速見てみると「Security」タブの「Virtualization」。これですね。

BIOSで仮想マシンの設定をする

選択すると「Inter(R)Virtualization Technology」が「Disabled」に…。口惜しや、このおかげでどれだけ時間をとられたか…。

これを「Enabled」に変更して F10 キーにて保存です。

BIOSで仮想マシンの設定を有効にする

これで仮想マシンが有効になりましたので、無事にvagrant upができるようになりました。

まとめ

これでWindowsマシン上にVCCWによるWordPressのローカル開発環境が出来上がりました。

BIOSやsite.ymlの設定などハマりポイントがいくつかありますので、ご注意いただければと思います。

最終目標のWordmoveが使えるようになるまでにはもう少し作業が必要です。

通常のダンドリですと、本番サーバーへのSSH接続をするのですが、コマンドプロンプトのままですとうまくいかないので、Cygwinというツールを導入していきたいと思います。

さよならコマンドプロンプト!UNIXコマンドをWindowsで実行すべくCygwinを導入
Windowsでおなじみに黒い画面「コマンドプロンプト」では扱えないコマンドを使う必要が出てきまいた。今回はCygwinというUNIXコマンドを実行できる黒画面&ツール群を導入する方法をお伝えします。

どうぞお楽しみに!

連載目次:超簡単に本番と同期!WordPressおすすめローカル環境

  1. 超簡単に本番と同期できるWordPressおすすめローカル環境構築までの道のり
  2. VirturalBox&VagrantでローカルPC内に仮想開発環境を構築する
  3. VCCWによるWordPress用ローカル環境構築&ハマりやすいポイント
  4. さよならコマンドプロンプト!UNIXコマンドをWindowsで実行すべくCygwinを導入
  5. WindowsでCygwinを使ってエックスサーバーとSSH接続をする
  6. WordPress本番環境とローカル環境を超簡単に同期するWordMoveの設定&使い方

コメント

  1. […] VCCWによるWordPress用ローカル環境構築&ハマりやすいポイント | いつも隣にITのお仕事 […]