XAMPPはもう古い？！VCCWでWordPressローカル開発環境を構築する方法
WordPressの開発環境を作りたいとき、定番なのがMAMP、XAMPP（以下、MAMPと表記）です。"WordPress ローカル環境"でググると上位にヒットするのはMAMPの記事が多数です。MAMPでも構築可能なのですが、今はさらにお手軽で便利なものが登場しました。
それがVCCWです。
これからWordPressの環境構築する方、すでにMAMPなどで構築している方にもおすすめです。開発環境のことがよくわからないデザイナーの方にもおすすめできます。
VCCWをおすすめする理由と導入手順について記載します。
VCCWをおすすめする三つのポイント
ほんとは三つどころではないのですが、特におすすめだと思うポイントです。- 開発環境の知識が不要
- 開発環境構築がほとんど自動でできる
- 本番環境との同期がかんたん
開発環境の知識が不要
WordPressを動かすにはOS、Apache、PHP、MySqlが必要です。何のことかわからない方、ご安心ください。知らなくても環境構築できます。開発中も意識することはほとんどありません。
Mampを使用したことがある方は、Apacheの起動やMySqlでデータベース作成などをしたかもしれません。VCCWを使用する場合、その作業は不要です。
開発環境構築がほとんど自動でできる
最初に必要なソフトをインストールしたら、あとはコマンドをコピペして実行するだけです。仮想環境が勝手にできあがり、WordPressのインストールまで完了します。初期設定もありません。
本番環境との同期がかんたん
ここで、MAMP環境で本番のWordPressをローカル環境に構築する手順を見てみましょう。
- 本番データベースをエクスポートし、ローカルURLに書き換え
- phpMyAdminでデータベース作成
- phpMyAdminでデータインポート
- ソース一式を本番サーバーからダウンロード
- wp-config.phpの修正
かなりめんどうで難しいです。一方、VCCWではどうするかというと、
- vagrant ssh
- WordMove pull –all
このコマンドだけです。いつでもローカル環境へ反映でき、本番環境への反映も一発です。本番とローカルのURLのちがいも自動書き換えでミスもありません。
VCCW導入方法
メリットがわかったところで導入方法です。ほとんど自動でむずかしくありません。
やることリスト
- VirtualBoxインストール
- Vagrantインストール
- vagrant-hostsupdater(オプション)
- vagrantBoxダウンロード
- vccwダウンロード
- vagrant初期設定
以下、順に手順のみ記載します。Mac版を基本に説明します。Windowsでもほとんど同じです。
コマンドはMacならターミナルが標準でついています。Windowsは標準のcmd.exeだとダメな部分があるので、gitbashなどシェルスクリプトが実行できるソフトをインストールしてください。
VirtualBoxインストール
以下からVirtualBoxをダウンロードしてインストールします。インストーラーの指示にしたがって進めるだけです。 https://www.virtualbox.org/
Vagrantインストール
以下からVagrantをダウンロードしてインストールします。インストーラーの指示にしたがって進めるだけです。 http://www.vagrantup.com/
vagrant-hostsupdater(オプション)
Windows以外の方は以下のコマンドを実行します。これを実行することで、構築したローカル環境に https://webtatan.com/blog/ でアクセスできます。
vagrant plugin install vagrant-hostsupdater
Windowsの方はhostsファイルに以下を追記します。hostsファイルはC:/Windows/System32/drivers/etc/hostsにあります。
192.168.33.10 vccw.dev
VagrantBoxダウンロード
以下のコマンドを実行します。
vagrant box add miya0001/vccw
VCCWダウンロード
以下公式サイトの「5. Please download .zip or .tar.gz.」からダウンロードして任意の場所に解凍します。 http://vccw.cc/
Vagrant初期設定
ダウンロードして解凍したvccw-x.x.xフォルダに移動する以下コマンドを実行します。
例、Macの書類フォルダにダウンロードし、解凍した場合。
cd /Users/**Macのユーザー名(書き換えてください)**/Documents/vccw-x.x.x(執筆時点ではvccw-2.20.0)
移動したら以下コマンドを実行します。
vagrant up
しばらく待てば構築完了です。
WordPress起動確認
https://webtatan.com/blog/ か http://192.168.33.10/ にアクセスしてみてください。 WordPressの画面が表示されます。次からはvagrant upのコマンドを打つだけでローカル環境が起動します。
最低限のvagrantコマンド
いずれも、vccw-x.x.xの保存先フォルダで実行してください。
開発環境起動
vagrant up
開発環境シャットダウン
vagrant halt
本番環境からのコピーについて
WordMoveでWordPressの本番環境とローカル環境をらくらく同期する方法に書いています。
終わりに
駆け足になりましたが、VCCWを導入することで開発環境の整備がかんたんになります。いちど作ってしまえば環境を意識する必要がなく、開発に集中できます。ぜひためしてみてください。VirtualBoxやVagrantなどの説明もいずれ書きたいと思います。
エンジニアのためのWordPress開発入門 (Engineer’s Library)
posted with ヨメレバ
野島 祐慈,菱川 拓郎,杉田 知至,細谷 崇,枢木 くっくる 技術評論社 2017-01-26
Comment
wordpress の hellow world をクリックすると次のエラーがでるのですが
対処法があれば教えていただけますでしょうか。
このサイトにアクセスできません
このサイトは企業、団体、または学校のイントラネット上にありますが、外部のウェブサイトと同じ URL が使用されています。
システム管理者にお問い合わせください。
VCCWで環境構築した際のことでしょうか？お使いのOSやブラウザなどもう少し何か情報があればわかるかもしれません。今のところ思い当たる節はありません。管理画面にアクセスしてみたり、お使いのブラウザを別のブラウザで試してみてはいかがでしょうか。
とても参考になる記事をありがとうございます。
記事通りに一連の流れをやってみてvagrant upすると下記のようなエラーが出てしまいます。
$ vagrant up
Bringing machine ‘default’ up with ‘virtualbox’ provider…
==> default: Box ‘base’ could not be found. Attempting to find and install…
default: Box Provider: virtualbox
default: Box Version: >= 0
==> default: Box file was not detected as metadata. Adding it directly…
==> default: Adding box ‘base’ (v0) for provider: virtualbox
default: Downloading: base
default:
An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.
Couldn’t open file /C:/Users/user/Documents/base
ぜひ知恵をお貸しください。
ちなみにホストOSはWindows10です。Virtualboxは何も設定しておりません。
よろしくお願いいたします。
こんにちは。ご覧いただきありがとうございます。こちらの手順はvccw2の手順です。現在、最新版はvccw3なので、若干内容が異なります。
エラーメッセージから、vagrant boxが無いような感じなのですが、ダウンロードは成功してますでしょうか。vccw3の場合、ダウンロードするbox名が違います。また、virtualboxとvagrantの推奨バージョンも異なります。一度ご確認ください。
[…] 本記事の執筆には以下の記事がたいへん参考になりました。 1.XAMPPはもう古い？！VCCWでWordPressローカル開発環境を構築する方法 2.vagrant-proxyconf で行う ゲストOSへのかんたんProxy設定 3.Vagrant […]
[…] XAMPPはもう古い？！VCCWでWordPressローカル開発環境を構築する方法 Windows10マシンでWordPress開発環境構築 […]