calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

Vagrant+Virturlbox+VCCWの使い方(Mac/Windows)

WordPressテーマ・プラグイン開発を効率的に行えるようにVagrant/VCCW/WP-CLIをインストールしてWordPress開発環境を構築する時のメモです。Mac/Windows対応。

PR
IT/WEB業界への転職なら
Sponsored Link

手順

WordPressテーマ+プラグイン開発環境を整える一連の流れ。

  1. 1. Xcodeインストール
  2. 2. Homebrewインストール
  3. 3. Command Line Tools
  4. 4. VirtualBox をインストール
  5. 5. Vagrant をインストール
  6. 6. hosts変更プラグイン「vagrant-hostsupdater」インストール
  7. 7. VCCW を github からclone
  8. 8. ローカルにWP-CLIインストール

Vagrantについて

Vagrantとは、簡単なコマンドで仮想環境を操作できるツール。VirtualBoxとセットでインストールします。

  • Virtual Boxと一緒に使う
  • 仮想環境を簡単に構築・管理・配布できる
  • yumやapt-getのようなコマンドが使える
  • VirtualBoxを立ち上げなくてよい
  • GitHub+Boxで開発環境の共有が手軽に行える
  • 短いコマンドでマシン起動・停止・破棄など行える

VCCWについて

VCCWとはLAMPとWordPress環境を簡単に立ち上げるツールのことです。WordPressテーマ・プラグインの開発・テストが簡単に行えるようになります。

  • LAMP(Apache/MySQL/PHP)環境構築
  • WordPress/WP-CLI/Wordmoveなどもインストールされる
  • SSLが有効化されている
  • デバックモード無効有効化
  • ホスト名変更

似たboxとしてnginxを使ったVVV(Varying Vagrant Vagrants)があります。VVVにはnginx/MariaDB/NodeJsなどが含まれます。

Varying Vagrant Vagrants

WP-CLIについて

ターミナル上でWordPressに関する色々なことを操作できるツール。

  • WordPressの更新やバージョンアップ・テーマ・プラグインをコマンドから管理
  • スターターテーマがあるのでオリジナルテーマ開発に便利
  • 管理画面で行う設定等がコマンド一発
  • 固定・投稿ページ・コメント作成
  • インポート、エクスポート

などなど色々なことが短いコマンドで可能。

A more RESTful WP-CLI | WP-CLI

Mac版

Homebrew インストール

Xcodeをインストールしてagreeしておきます。同意しておかないとエラーがでます。

ターミナルからCommand Line Tools をインストール

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

これで入らなかったら

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

と入力。Homebrew — macOS 用パッケージマネージャー

バージョン確認。

brew -v
Homebrew 1.1.12

VirtualBoxのインストール

brew cask install virtualbox

Vagrant インストール

brew cask install vagrant

バージョン確認

vagrant -v

hostsupdaterインストール

vagrant plugin install vagrant-hostsupdater

VCCWインストール

分かりやすい名前のディレクトリを作成します。VCCWは何個もインストールできますが、ディレクトリによって、ymlファイルのホスト名・ipアドレスは変更したほうがよいでしょう。

# 一つ目
mkdir vccw_test1

#二つ目
mkdir vccw_test2

そのディレクトリに移動してvccwをダウンロードします。

git clone https://github.com/vccw-team/vccw.git

provision/ディレクトリにあるdefault.ymlをコピーしてsite.ymlにリネームしVagrantfileと同じディレクトリに移動させます。

cd provision
cp default.yml ../site.yml

viなどでsite.ymlを開き、langをjaに変更して設定反映。※Vagrant up の前に変更。

vim ../site.yml

# WordPress Settings
#
version: latest
lang: ja

# Network Settings
hostname: vccw.dev
ip: 192.168.33.10

複数作成する場合

※2017/04/20追記:複数のサーバを立ち上げたい場合は、vccw2などのディレクトリを作りvccwをダウンロードしたら、site.ymlファイル内のipアドレスとホスト名を変更してください。その後Vagrant up を叩くとスムーズにいきます。

# Network Settings
# 複数作成する時はhostnameとipアドレスを変更してください
hostname: vccw2.dev
ip: 192.168.33.11

VCCWに移動、Vagrant 起動

cd vccw
vagrant up

192.168.33.10 を表示するとWordPressがインストールされているのを確認できました。192.168.33.10/wp-adminに入ると日本語に変更されています。管理画面はadmin/adminでログイン可能。

参考:Vagrantのインストール(macOS編) - Qiita

WordPressのローカル開発環境をVagrantでMacに構築する - Qiita

Vagrant コマンド

マシンの起動

vagrant up

マシンの停止

vagrant halt

マシンの再起動

vagrant reload

マシンの再インストール(設定変更を反映)

vagrant provision

マシン廃棄

vagrant destroy

VM一覧取得

vagrant global-status

WP-CLIインストール

WP-CLI をローカルにインストールします。

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

動くか確認。

php wp-cli.phar --info

バージョンが表示されたら、

実行権限付与し、wpにリネームして移動。

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

wpで実行できるか確認

wp --info

WordPressディレクトリに移動してwpコマンドを試してみます。

cd wordpress

ssh でサーバに接続してみます。WordPressが置いてあるディレクトリは以下。

vagrant ssh
cd /var/www/html

データベースを見てみます。

mysql -u root -p
Enter password:
mysql> SHOW DATABASES;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| sys                |
| wordpress          |
+--------------------+

サーバ内でスターターテーマがインストールできます。

wp scaffold _s sample-theme

プラグイン スターターキットを入れる場合。

wp scaffold plugin sample-plugin

Windows版

Windowsは環境開発を構築するのが面倒ですが、とりあえず下からダウンロード。

Download - Vagrant by HashiCorp

Nextを押し、インストールを進めて再起動。

Windowsの場合はBIOSで「Virtualization」をEnabledにします。

Cygwin等でVCCWをcloneします。

$ git clone https://github.com/vccw-team/vccw.git

※2017/04/24追記:windowsのgitクライアントは改行コードの自動変換があり動かなくなることがあるそうで、gitクライアントを使っている人はzipを直接ダウンロード(VCCW)するほうがよいそうです。Takayuki Miyauchiさん、ご指摘ありがとうございます。

Vagrantプラグイン インストール

$ vagrant plugin install vagrant-hostsupdater

vagrant 起動

vagrant up

http://192.168.33.10/ にアクセスするとWordPressがインストールされたページが表示されます。

http://192.168.33.10/wp-admin/ にadmin / admin でログインします。

英語表記になっているので日本語化します。

provision/ディレクトリにあるdefault.ymlをコピーしてsite.ymlにリネームしVagrantfileと同じディレクトリに移動させます。

site.ymlをエディタで開きlang: jaに変更します。

設定反映のためvagrant provisionします。

日本語表記になりました。

WP-CLI

wp-cliをローカルにインストール

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

確認

$ php wp-cli.phar --info
$ chmod +x wp-cli.phar

wp-cli.phar をwpにリネーム

sudo mv wp-cli.phar wp

以上、Vagrant/VCCW/WP-CLIをインストールしてWordPress環境を構築する方法でした。

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする