VCCWでワードプレスの開発環境を作って一瞬でWordMoveを使って本番環境にアップロード（FTP編）【WordPress開発環境】
shu sgw.today
VirtualBox、Vagrant、VCCWでワードプレスの開発環境を作る【WordPress開発環境】
shu
こんにちは。最近はワードプレス案件をちょくちょく頂くのでワードプレスの開発環境を見つめ直して、色々勉強できたので書いていきます。最終的にはコマンドライン１つでサーバーにアップロードするのが目的です。次の回ではVCCWに搭載されてるWordMoveと言うアプリケーションを使ってFTP送信で本番アップロードまで行います。今までCyberduck使って手動でやってたんですが、遅すぎたのでやってみました。ちなみにOSはMacなのでウインドウズの方は少し変わってしまうかもしれません。WordmodeでFTPで簡単アップロードする方法は下記の記事から。
目次
必要なものをダウンロード
VirtualBox
ここでVirtualBoxをダウンロード。2019年12月2日の時点で6.0を使用しましたがバグ無しで今のところ大丈夫です。
２０１９年１２月１０日にリリースされた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。
１つ古い前のvccwバージョン(v3)はmiya0001/vccwっぽいのでv3を使う場合はxenial64にしてください。ちなみにmiya0001/vccwでもv3は動きました。
vagrant box add vccw-team/xenial64を実行。
VCCW
*2023年に見るとサイトが消えてたので上記githubのリリースからダウンロードしてください。
このzipからダウンロード。
VCCWの設定
それではやっとVCCWの設定に入ります。先程ダウンロードしたzipファイルを解凍します。
vccwの解凍フォルダは名前を変えたほうがいいです。今回はtestにしておきます。（ちなみに後で名前を変更するとエラーが起きましたｗ）
provisionを開く。
するとdefault.ymlと言うファイルがあるのでコピーします。
１つ戻って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/testUSERNAME:~ test$みたいな感じになってたら成功です。
そして
vagrant upするとサイトが立ち上がります。最初の立ち上げの時は結構時間かかります。
その後はその後サーバーを止める時は
vagrant haltで止めることができます。
今回だとこちらのURLにアクセスするとワードプレスを閲覧することができます。
hostname_aliases:
- www.vccw.testコネクトしてみてレイアウトが崩れている場合は１度 halt してみてもう１度立ち上げるとしっかり立ち上がりました。
よく使うvagrantコマンド
#立ち上げ
vagrant up
#シャットダウン
vagrant halt
#消す
vagrant destroy id
#グローバルですべてのvagrant仮想マシンを表示
vagrant global-status次回の記事ではwordmoveを使って本番サーバーに簡単にアップロードする方法を書きます。
ではではSee Ya!!!
ABOUT ME
カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
