#vccw

【VCCW】WordPressのローカル開発環境を作ってみた！【Windows10】 | スタッフブログ | 株式会社クーネルワーク - 新潟

こんにちは、ぶっきーです。 WordPressの開発環境、あなたはどう作ってますか？ XAMPP(ザンプ)やDocker(ドッカー)など色々方法はあるかと思いますが、今回は「VCCWを使ったWordPressローカル開発環境の構築方法」をご紹介します。 VCCWとは？ VCCWとは、Vagrant、Chef、CentOS、WordPressの頭文字を取ったもので、VirtualBox上で動くWordPressの開発環境のことです。 なんだか見慣れない単語が… そもそもVirtualBoxやVagrantって？ 「VirtualBox(バーチャルボックス)」 PC内に仮想的なPCを作成し、元のOSとは別のOSを起動させることが出来るソフトです。。 例えば、Windowsを起動しながらLinuxを動作させることができちゃったりします。…

ここ数週間ず~っとWebサイト作りしています。4月に公開したいけど。。

自分の納期であれですが何とか間に合わせたいです。

今回色々考えてギターレッスンの記事部分のみwordpressで、基本のウェブサイトは独自のプログラムの中に入れ込んでいます。

今後運用するうえでとにかく楽である事。現行のウェブサイトで思い知らされてますからね。

サーバーにファイルをアップロードするのも今まで手でアップロードしていましたが開発環境も整えました。

wordpressはvagrantのvccwで、その他はgitで自動デプロイというのを想定してます。これでテスト環境も作れるし、なにより公開サーバーに触らなくてよくなるので運用が本当に楽になる、その代わり最初の実装時にしっかり作りこまないといけないので時間がかかってしまっています。

環境構築から始まってサーバー回りから表側のデザインまで一人で全部やるのって大変。。

WordPressを使う人はみんな、ほんと、VCCWを使ったら幸せになれるのに！という西村さん（@marushu）の言葉に誘われて勉強会に参加しました！ うん、ほんとにこれはすごい！

VCCW http://vccw.cc/

なんといっても仮想環境で動かすので失敗した、ってときにさくっと削除できるのがありがたい。 あとリモート環境からリソースをさくっと持ってきて、作業後さくっとリモート環境に戻せるwordmoveが入っていること。 YEOMANといい、VCCWといい、いろーんなプログラムを組み合わせた開発の自動化がものすごく進んでますね。

ということでまとめをば。

環境の準備

端末にVCCWまわりをインストール

VirtualBoxをインストール http://pc-karuma.net/mac-virtualbox-install/

Vagrantをインストール https://www.vagrantup.com/downloads.html

ターミナルを起動して下記コマンドを実行

vagrant plugin install vagrant-hostsupdater

さらにターミナルで下記コマンドを実行

vagrant box add miya0001/vccw

プロジェクトフォルダにVCCW導入

プロジェクトのフォルダを作る（プロジェクトのフォルダ名は任意で）

mkdir vccw-test

フォルダに移動

cd vccw-test

vccwをクローン

git clone [email protected]:vccw-team/vccw.git もしくは git clone https://github.com/vccw-team/vccw.git を実行

vccwフォルダに移動

cd vccw

念のためprovisionなどのフォルダやファイルが入ってきていることを確認

ls -la

site.ymlをprovisionフォルダからコピー

cp provision/default.yml site.yml

念のためsite.ymlコピーできたことを確認

ls -la

起動する環境の設定ファイルを編集（site.ymlは中身を読んで設定を変えるなど。site.ymlが提供されている場合はそのファイルをvccwフォルダの直下にコピペ）

vi site.yml

通信が安定している場所でvagrant環境を起動（最初は5分とか10分とか、時間がかかるかも）

vagrant up

途中でmacのログインユーザーのパスワードを聞かれるので入力

コマンドの実行が終わったらブラウザで http://wordpress.local/ を開くとWordPressのページが開きます！

http://wordpress.local/wp-admin/ でログインできます！ （ユーザー、パスワードはsite.ymlにWordPress User部分に記載されているものです）

WordPressの開発

Bitbucketでwordpressフォルダ内にgitリポジトリを置いて作業します。

SourceTreeを使う前提です。

すでに構築された環境をクローンする前提です。

最初の環境を作る人

SourceTreeでリポジトリを作成（リモートにも作成する）

wp-contentフォルダ以下のみ共有するように.gitignoreを記述

SourceTreeでコミットする内容を確認後コミット＆プッシュ

BitbucketのリポジトリのURLを共有

環境を提供される人

SourceTreeだとフォルダの中が空でないとリポジトリが作れないので、Finderなどでwordpressフォルダ内にあるファイルをいったんどこかにまるっと退避

共有されたBitbucketのリポジトリのURLを開く

開いたページで[↓](矢印の下にお盆みたいなマーク)と表示されているクローン用のボタンをクリックしてSourceTreeでクローン （もしくはその隣のテキストボックスのテキストをコピーしてSourceTreeでクローン）

wordpressフォルダにWordPressのファイルが落ちてくる

退避したファイルのうち、「wp-contentフォルダ以外」をwordpressフォルダに戻す

確認のためvagrantのサイトを開いてプラグインが追加されているか確認

ひとまずこれで準備完了。

作業をやめるとき

vagrantの環境を起動したままだとメモリを使い続けるのでこまめに停止するのがよいそうです。

vagrant global-status

いろんなフォルダに散らばっているvagrantの状況を確認できる。 どのフォルダにいても実行可能。

vagrant halt (ID)

OSシャットダウン。vagrantによるメモリの消費がなくなる。 すぐに利用しないvagrantは該当するフォルダにcdで移動 vagrant halt するか vagrant global-statusで表示されるIDを使って vagrant halt (ID) で停止する 後者はどのフォルダにいても実行可能。 途中でmacのログインユーザーのパスワードを聞かれるので入力する

vagrant destroy (ID)

OSシャットダウン＆リソースの削除。環境は残りますが中身は何も作業していない状態になる IDについてはvagrant haltと同じ。

再度作業を始めるとき

vagrant up (ID)

です。

ここから先は森は試せてないですが、VCCWのハイライトの1つ、wordmoveなのでちゃんと使えるようになっておきたいところです。

wordmoveを使ってリモートのソースを取得＆リモートに作業反映

前準備

pwdでvccwフォルダにいることを確認

vi Movefile

localはローカル環境とstagingはリモート環境

stagingにリモート環境の設定を入力

sshもしくはftpのコメントをはずして設定を入力

リモート環境からソースを取得

pwdでvccwにいることを確認

vagrant sshで仮想環境に入る

cd vagrant

wordmove pull --all サーバから全部持ってくる

リモート環境に作業反映

pwdでvccwにいることを確認

vagrant sshで仮想環境に入る

cd vagrant

wordmove push --all する

（対比して参考までに）wordmoveを使わないでリモート環境をvagrantに作る場合

リモート環境

ログインして[ツール]-[エクスポート]をクリック、ボタン「エクスポートファイルをダウンロード」をクリック

Advanced Custom Fieldを入れている場合は[カスタムフィールド]-[Export]をクリック、Field Groupsのグループをすべて選択してボタン「Export XML」をクリック

wp-contentのpluginsフォルダ、themesフォルダをダウンロード

vagrant環境

wp-contentフォルダ配下にダウンロードしたpluginsフォルダ、themesフォルダを入れる

[ツール]-[インポート]でAdvanced Custom FieldのXMLファイルがある場合はインポート

最近Vagrant（かたくなに「ヴァグラント」と呼びたい）が流行っていて、ローカルでの開発が面倒なWordPressでもオシャレに開発が可能。

VCCW - A WordPress development environment.

VCCWというVagrantの設定ファイルみたいなやつを使えば、簡単に本番環境とローカル開発を同じにできるので色々と捗る。