0%

DevelopWEB開発・運用ノウハウ

Posted:2018.06.24

VCCWでWordPressローカル環境を構築して制作効率化

前回記事「Local by FlywheelでWordPressローカル環境を構築して制作効率化 」に引き続き、最近注目されているWordPressのローカル環境構築についてまとめていきたいと思います。今回はVCCWというものを使った方法です。

 

VCCWとは?

VCCWとはWordPressに必要なローカル環境が一式揃ったパッケージで、Vagrantの仮想環境上で動作します。その名の通り 、V(Vagrant)C(Chef)C(CentOS)W(Wordpress)の頭文字をとったものになります。

 

このようにWebサーバーやDBなどWordPressに必要な環境だけでなく、VCCWでは下記のものが一式揃います!

・Ubuntu
・WP-CLI & WordPress
・PHP
・MySQL
・Apache
・NodeJS
・Ruby

 

またSSHでログインもできるようで、WordPressといろんな連携をさせたシステムも作成することができます。では早速インストールからWordPressサイトの表示まで行っていきたいと思います。

 

1. VartualBoxのインストール

まずはVartualBoxが必要となりますので公式サイト(https://www.virtualbox.org/)からインストーラーをダウンロードします。過去記事「仮想環境のVartualBoxを使ってMacでIE&Edgeブラウザチェック」も参考に。

 

VCCWでWordPressローカル環境を構築して制作効率化

 

インストール後、ターミナルで下記コマンドを入力しインストールの確認を。詳細情報が表示されたらOKです。

$ VirtualBox --help

 

 

2. Vagrantのインストール

次にVagrantを同じく公式サイト(https://www.vagrantup.com/)からインストーラーをダウンロードしていきます。

 

VCCWでWordPressローカル環境を構築して制作効率化

 

インストール後、ターミナルで下記コマンドを入力しインストールの確認を。バージョンが表示されたらOKです。

$ vagrant -v

 

 

3. vagrant-hostsupdaterのインストール

Vagrantのプラグインで、ホストOSの設定ファイル(/etc/hosts)へゲストOS情報の追加や削除を行うのに必要となります。下記コマンドでインストールしていきます。インストールが完了したら念のため確認しておきます。

$ vagrant plugin install vagrant-hostsupdater

// インストール後の確認(vagrant-hostsupdaterのバージョンが表示されたらOK)
$ vagrant plugin list

 

 

4. プロジェクトフォルダの作成

任意の場所にVCCWで使用するプロジェクトフォルダを作成して、その場所へ移動しておきます。

$ mkdir ~/[PATH]/[DIRECTORY_NAME]
$ cd ~/[PATH]/[DIRECTORY_NAME]

 

 

5. VCCWのインストール

VCCWの公式サイト(http://vccw.cc/)からzipファイルをインストールし解凍した「vccw」フォルダの中身をプロジェクトフォルダ内に入れる(もしくはリネーム)か、gitからクローンすることでインストールします。

 

VCCWでWordPressローカル環境を構築して制作効率化

 

gitでクローンする場合はプロジェクトフォルダ内で下記コマンドを実行します。

$ git clone https://github.com/vccw-team/vccw.git

 

 

6. Vagrant Boxの追加

下記コマンドで仮想環境のイメージとなるVagrant Boxを追加します。サイズも大きいので少し時間がかかる場合もありますが気長に待ちましょう。完了したらメッセージが表示されます。

$ vagrant box add vccw-team/xenial64
・
(省略)
・
==> box: Successfully added box 'vccw-team/xenial64' (v20180107) for 'virtualbox'!

 

この時、ダウンロードに時間がかかりすぎると下記のようなエラーが出るようです。イメージ自体ファイルサイズが大きいため通信速度を確認するか、時間帯を変えて再度試してみます。※ちなみに深夜にこの作業をやったところ1時間くらいかかりました、、

An error occurred while downloading the remote file. The error
message, if any, is reproduced below. Please fix this error and try
again.

*************, errno 60

 

 

7. Vagrantを起動させてVCCWでのローカル環境を確認

ここまでの作業が完了したら、プロジェクトフォルダにて下記コマンドを実行し、Vagrantを起動させます。途中でパスワードの入力を求められますので、PCの管理者権限でのパスワードを入力します。初回は少し時間がかかるようです。

$ cd ~/[PATH]/[DIRECTORY_NAME]
$ vagrant up
・
(省略)
・
==> vccw.test: [vagrant-hostsupdater] This operation requires administrative access. You may skip it by manually adding equivalent entries to the hosts file.
Password: [PCでの管理者権限のパスワードを入力]
・
(省略)
・
PLAY [all] **************************************************************************
・
(省略)
・
PLAY RECAP *********************************************************************
vccw.test : ok=70 changed=63 unreachable=0 failed=0

 

間も無くVagrantの環境内にWordPressがインストールされていきます。PLAY RECAP ****のメッセージが表示されたら完了です。VartualBoxのコントロールパネルでVagrantのVCCWイメージが起動しているのが確認できます。

 

VCCWでWordPressローカル環境を構築して制作効率化

 

デフォルトでは下記のようにローカルのホスト名もしくはIPアドレスをブラウザでアクセスすると、サイトが表示されているのが確認できます。これらは後述する「site.yml」ファイルで設定をすることで変更できます。

// ホスト名の場合(デフォルト)
http://vccw.test/

// IPアドレスの場合(デフォルト)
http://192.168.33.10/

 

VCCWでWordPressローカル環境を構築して制作効率化

 

 

8. 設定ファイル「site.yml」の作成と編集

開発環境内で使うWordPressの設定ファイルとなる「provision/default.yml」をコピーして「site.yml」に名前を変更し、必要な設定に応じて編集します。そして、一階層上(Vagrantfileがある階層)へsite.ymlファイルを移動させておきます。

$ cd ~/[PATH]/[DIRECTORY_NAME]/provision
$ cp default.yml site.yml
$ mv site.yml ../

 

コピーした「site.yml」では様々な設定ができますが、主に下記の項目を見ておくといいのではないでしょうか。

【provision/site.yml】(カッコ内は初期値)

#
# Network Settings
#
hostname: [ホスト名(vccw.test)]
ip: [IPアドレス(192.168.33.10)]

#
# WordPress Settings
#
version: latest
lang: [ ja(en_US)]
title: [サイト名(Welcome to the VCCW)]
multisite: false
rewrite_structure: /archives/%post_id%

#
# WordPress User
#
admin_user: [ WordPress初期ユーザーID(admin)]
admin_pass: [ WordPress初期ユーザーPW(admin)]
admin_email: [ WordPress初期ユーザーメールアドレス(vccw@example.com)]

#
# WordPress Database
#
db_prefix: wp_
db_host: localhost
db_name: [データベース名(wordpress)]
db_user: [データベースユーザー名(wordpress)]
db_pass: [データベースユーザーPW(wordpress)]

VCCWで複数のWordPress環境を作成する場合などに適宜必要な項目(ホスト名など)を変更しておきます。変更して保存された内容は下記コマンドで反映させておきます。

$ vagrant reload

 

上記コマンドで反映されない場合は下記のオプションをつけて実行させるようです。

$ vagrant reload --provision
・
(省略)
・
PLAY RECAP *********************************************************************
vccw.test : ok=70 changed=63 unreachable=0 failed=0

 

この時は少し時間がかかりますが、上記メッセージが表示されたら完了です。再度サイトにアクセスして設定が反映されているかを確認します。デフォルトでは英語なので最低でも日本語には変更しておきたいですね。

 

VCCWでWordPressローカル環境を構築して制作効率化

 

 

9. Vagrantの停止と再起動

VCCWを閉じてVagrantを停止する時には下記コマンドを実行します。再起動する場合はVCCWのフォルダで起動コマンドを実行すればOKです。

// Vagrantの停止
$ vagrant halt

// Vagrantの再起動
$ cd ~/[PATH]/[DIRECTORY_NAME]
$ vagrant up

 


 

いかがでしょうか、ちょうど前回記事「Local by FlywheelでWordPressローカル環境を構築して制作効率化 」でもWordPressのローカル環境構築を紹介しましたが、プロジェクトによって使い分けるのがいいのではないでしょうか。今後はVagrantを使った内容の記事もアップしていきたいと思います。

 

(参考にさせて頂いたサイト)
VCCW公式サイト
WordPressをVagrant環境にらくらくインストールする。 – VCCW

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】