XAMPPはもう古い?!VCCWでWordPressローカル開発環境を構築する方法

vccw01

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などの説明もいずれ書きたいと思います。

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev AtomでMarkDown記法を使いこなす!MarkDownエディタはAtomがおすすめ next WordMoveでWordPressの本番環境とローカル環境をらくらく同期する方法

Comment

  1. 美濃部 勝 より:

    wordpress の hellow world をクリックすると次のエラーがでるのですが
    対処法があれば教えていただけますでしょうか。

    このサイトにアクセスできません

    このサイトは企業、団体、または学校のイントラネット上にありますが、外部のウェブサイトと同じ URL が使用されています。

    システム管理者にお問い合わせください。

  2. t.t より:

    VCCWで環境構築した際のことでしょうか?お使いのOSやブラウザなどもう少し何か情報があればわかるかもしれません。今のところ思い当たる節はありません。管理画面にアクセスしてみたり、お使いのブラウザを別のブラウザで試してみてはいかがでしょうか。

  3. S.K より:

    とても参考になる記事をありがとうございます。
    記事通りに一連の流れをやってみて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は何も設定しておりません。
    よろしくお願いいたします。

  4. t.t より:

    こんにちは。ご覧いただきありがとうございます。こちらの手順はvccw2の手順です。現在、最新版はvccw3なので、若干内容が異なります。

    エラーメッセージから、vagrant boxが無いような感じなのですが、ダウンロードは成功してますでしょうか。vccw3の場合、ダウンロードするbox名が違います。また、virtualboxとvagrantの推奨バージョンも異なります。一度ご確認ください。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です