WordPress

VirtualBox、Vagrant、VCCWでワードプレスの開発環境を作る【WordPress開発環境】

shu

こんにちは。最近はワードプレス案件をちょくちょく頂くのでワードプレスの開発環境を見つめ直して、色々勉強できたので書いていきます。最終的にはコマンドライン1つでサーバーにアップロードするのが目的です。次の回ではVCCWに搭載されてるWordMoveと言うアプリケーションを使ってFTP送信で本番アップロードまで行います。今までCyberduck使って手動でやってたんですが、遅すぎたのでやってみました。ちなみにOSはMacなのでウインドウズの方は少し変わってしまうかもしれません。WordmodeでFTPで簡単アップロードする方法は下記の記事から。

必要なものをダウンロード

VirtualBox

ここでVirtualBoxをダウンロード。2019年12月2日の時点で6.0を使用しましたがバグ無しで今のところ大丈夫です。

2019年12月10日にリリースされたVirtualBox6.1ではvagrantはエラーになります。6.0より以降の物をつかってください。(2019年12月23日アップデート)

Vagrant

[el url=”https://www.vagrantup.com/downloads.html”]Download Vagrant[/el]

さらにここでVagrantをダウンロード。ちなみに自分が使ってるバージョンは2.2.4です。

vagrant-hostsupdater

vagrant-hostsupdaterと言うvagrantのプラグインが必要です。なんかホストの設定を助けてくれるプラグインらしいですが、よくわからなかったので説明は割合(笑)とりあえずダウンロードしておきます。

ターミナルを開いて

vagrant plugin install vagrant-hostsupdater

を実行。

ちなみに

vagrant plugin list

で持ってるプラグインを確認できます。

Vagrant Boxをダウンロード

これもよくわからないけど必須です。最新vccwバージョン(v3)に合ってるのはxenial64。

1つ古い前のvccwバージョン(v3)はmiya0001/vccwっぽいのでv3を使う場合はxenial64にしてください。ちなみにmiya0001/vccwでもv3は動きました。

vagrant box add vccw-team/xenial64

を実行。

VCCW

*2023年に見るとサイトが消えてたので上記githubのリリースからダウンロードしてください。

このzipからダウンロード。

VCCWの設定

それではやっとVCCWの設定に入ります。先程ダウンロードしたzipファイルを解凍します。

vccwの解凍フォルダは名前を変えたほうがいいです。今回はtestにしておきます。(ちなみに後で名前を変更するとエラーが起きましたw)

provisionを開く。

するとdefault.ymlと言うファイルがあるのでコピーします。

1つ戻ってprovisionがあるディレクトリにペーストして名前をsite.ymlに変更します。

site.ymlを編集する

#
# Network Settings
#デフォルトはvccw.testなので変更します。今回はtest.lo
hostname: test.lo
#数字を変更してください。いくつかすでにvccwで仮想環境を作成ている場合違う番号を指定してください。
ip: 192.168.33.10

#
# Vagrant Hostsupdater Aliases
# Manage additional entries in the /etc/hosts file using vagrant-hostsupdater
#
# www.の後をhostnameと同じにします。
hostname_aliases:
  - www.vccw.test

ターミナルでsite.ymlのディレクトリまで進む

ターミナルを開いてcd + スペースをタイプします。

先ほどのフォルダをターミナルにドラッグアンドドロップするとパスが出てくるのでエンターを押します。

USERNAME:~ user$ cd /Users/shuhei/Desktop/test
USERNAME:~ test$

みたいな感じになってたら成功です。

そして

vagrant up

するとサイトが立ち上がります。最初の立ち上げの時は結構時間かかります。

その後はその後サーバーを止める時は

vagrant halt

で止めることができます。

今回だとこちらのURLにアクセスするとワードプレスを閲覧することができます。

hostname_aliases:
  - www.vccw.test

コネクトしてみてレイアウトが崩れている場合は1度 halt してみてもう1度立ち上げるとしっかり立ち上がりました。

よく使うvagrantコマンド

#立ち上げ
vagrant up
#シャットダウン
vagrant halt
#消す
vagrant destroy id
#グローバルですべてのvagrant仮想マシンを表示
vagrant global-status

次回の記事ではwordmoveを使って本番サーバーに簡単にアップロードする方法を書きます。

ではではSee Ya!!!

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後4年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
記事URLをコピーしました