WEB WEB制作 ブログ運営

2017.05.21

Vccw&Wordmoveでローカルとmixhostを同期!超快適なwordpress開発環境(前編)

Pocket

Vccw 1

こんにちは、トーマ(@toma_tokyoboy)です!

このサイトはwordpressで運営しています。

wordpressサイトのカスタマイズをする時、通常ローカル環境で作業をし、本番環境にアップロードします。

その作業をVccw、Wordmoveというツールを使うと、コマンド一発でローカルと本番環境が同期でき、開発が非常に快適になりました。

今回ローカルと同期するサーバーは前回の記事で紹介したMixhost(ミックスホスト)です。

エックスサーバーからmixhostに乗り換えたらいいことしかなかった

こんにちは、トーマ(@toma_tokyoboy)です! このサイトはwordpressで運営しておりまして、レンタルサーバーはwordpressと相性のいいエックスサーバーを使っていたんですが、色々…【続きを読む】

続きを見る

基本的にどのレンタルサーバーでもやり方は似ているので是非参考にしてみてください。

mixhostは歴史の浅いサーバーなので、情報が少なくつまづきまくりましたが、丸一日かけて開発環境を構築することができました。僕がつまづいたところも網羅的に解説していくので、この記事の通りやれば30分ほどで快適な開発環境が構築できると思います。

スポンサーリンク

ローカル環境とは?作らなきゃいけないの?

ローカルというのは、超簡単に言うと、ネットワークに接続しなくてもアクセスできる環境、つまりあなたのPC内のことです。

ローカルに対してインターネットに接続しないとアクセスできない環境を、リモートとか本番環境、と言ったりします。

呼び方が変わるとややこしいので、ここからは、PC内をローカル環境、ネットワーク上のことを本番環境と、呼び方を統一します。

本番環境で編集してはいけない理由

サイトのデザインや内部ソースを変えたり、プラグインをアップデートしたい時、直接本番環境のファイルをいじっちゃうのは危険なんです。

以下のような問題が起きてしまいます。

直接本番環境をいじってはいけない理由

  • リアルタイムにサイトに反映するので、ユーザーに迷惑
  • 修正が効かなくなる
  • 作業的にも非効率

特にPHPを編集する場合のエラーは怖く、少しでもソースがおかしくなったら、画面が真っ白になってしまうこともあります。

こういったことが起きてはいけないので、ソースのカスタマイズや更新作業はローカルで行い、不具合がないことを確認できた上で本番環境に反映させる、という手順を通常取ります。

ローカル環境を構築する重要性はわかりましたか?

ではいよいよローカル環境開発の準備を行っていきます。

vccwでローカル環境を作るメリット、MAMPとの違い

ローカル環境を作る上で、これまではMAMPやXAMPPというアプリケーションが主に使われていました。僕も使ってました。

MAMPやXAMPPはアプリケーションはローカルサーバーを構築するためのアプリです。

worppressはphpで作られたCMSなので、phpが使えるサーバー上でしか動作確認できません。MAMPやXAMPPは、phpを使えるサーバーやデータベースを構築しwordpressをローカルで使えるようにしてくれるアプリです。

ただこのMAMPでローカルと本番環境を同期しようとすると、下記のような手順を踏まなくてはならず、けっこう大変なんです。

MAMPを使った同期作業

1. 本番環境からwordpressファイルをダウンロード
2. 本番環境のphpmyadminにアクセスし、データベースをエクスポート
3. エクスポートしたmysqlファイル内のURLをローカルに合わせて書き換える
4. ローカルのphpmyadminにアクセスし、データベースをインポート

ね、めんどくさそうでしょ?

では、今回紹介するVCCWでローカル環境を作った場合、同期作業はどうなるか?

VCCWを使った同期作業

1. ターミナルで、vagrant sshと入力
2. wordmove pull —all と入力するとと同期

はい、一瞬です(笑)

データベース内のURLもうまい具合に自動で置き換えてくれます。とにかくめちゃめちゃ簡単に同期が可能になるので、作業効率が大幅に上がります。

必要なアプリケーションをインストール

では説明もそこそこにして、実査に開発環境を作っていきましょう。

まずは、開発環境構築に必要なアプリケーションをインストールしていきます。全て無料のツールです。

当サイトの開発環境

アプリケーションやOSのバージョンが違うことによって、この記事通り開発環境構築しても予期せぬエラーが出る可能性があります。

参考に僕が開発した環境を載せておくので、うまくいかない人はできるだけバージョンを合わせてみてください。

  • MAC OS Sierra 10.12.4
  • Virtualbox 5.1.2
  • Vagrant 1.9.4
  • Vccw 3.2.0

vccw

vccwは開発環境を構築するツールです。

ローカルと本番環境を同期するためのwordmoveも同梱されています。

V2を使ったときは、mixhost内のmysqlと文字コードが合わずエラーが出たので、V3以降を使ってください。以下のリンクはversion3です。

インストールVCCW - A WordPress development environment.

Vccw 13

「Getting Started」以下に書いてあるやり方で作業を進めていきます。

vccwは「5. Please download .zip.」の部分からダウンロードしておいてください。

ダウンロードしたファイルを解凍して、適当な場所に置いといてください。今回はデスクトップに移動しておきます。

Vccw 14

virtualbox

Virtualboxは、仮想環境OSを構築するためのアプリです。

仮想環境とは簡単に言うと、PCの中に、もう一つPCを入れるようなものです。

仮想環境は簡単に構築したり削除したりできます。
どれだけいじり倒しても今使っているPCに影響は出ないので大変便利です。

インストールDownloads – Oracle VM VirtualBox

Vccw 11

Vccw 10

今使っているPCのOSに合ったものをインストールしてください。僕の場合はMAC OSなの「OX X hosts」をインストール

vagrant

vagrantも仮想環境を構築するためのアプリで、virtualboxとセットで使います。

インストールDownload - Vagrant by HashiCorp

vagrant-hostsupdater

Vagrantを便利に扱うためのプラグインです。

ターミナルで以下のコマンドを入力するとインストールできます。

$ vagrant plugin install vagrant-hostsupdater

vagrant box

Boxファイルは、仮想環境を作るための設計図です。

以下のコマンドをターミナルで入力。

$ vagrant box add vccw-team/xenial64

インストールに結構時間かかります

boxファイルがきちんとインストールできているかどうかは以下のコマンドで確認できます。

$ vagrant box list
vccw-team/xenial64 (virtualbox, 20161209)

テキストエディタ

後ほどファイルをいくつか編集する必要がありますので、ソース編集しやすいテキストエディタをインストールしておきましょう。

おすすめは以下の2つです。無料で使えるのにかなり高性能。

sublimetext
インストールSublime Text: The text editor you'll fall in love with

ATOM
インストールAtom

ターミナルの使い方

今回の開発環境はコマンド入力を使って操作していきます。

コマンド入力には、macに最初から入っているターミナルというアプリを使います。

ターミナルの場所は以下。

アプリケーション/ユーティリティ/Terminal.app

コマンド入力ってなにそれ?おいしいの?という方は、下の記事を参考にしてください。

参考今さら聞けない!ターミナルの使い方【初心者向け】 | TechAcademyマガジン

スポンサーリンク

仮想環境にアクセスしてみよう

準備が整ったので、仮想環境にアクセスしてみましょう。

ターミナルで、デスクトップに置いたvccwフォルダに移動します。

$ cd mysite/vccw

site.ymlを作成

site.ymlは、開発環境の設計図のようなものです。

provision/default.ymlを、一つ上の階層に複製し、site.ymlにファイル名を変更します。

$ cp provision/default.yml site.yml

続いてsite.ymlをテキストエディタで開き編集します。

つらつらと設定が並んでいますが、変更する必要が高い部分は以下の6点

hostname: vccw.dev
ip: 192.168.33.10
wp_siteurl: 'wp'
lang: en_US
wp_debug: true
synced_folder: wordpress

下記に変更。

hostname: example.com
ip: 192.168.33.22
wp_siteurl: 'wp'
lang: ja
wp_debug: false
synced_folder: public_html

簡単に解説すると、hostnameとipは、ローカル環境にアクセスするためのURLです。ここは好きな文字列、数字に変更できます。この設定でいくと

  • example.com
  • 192.168.33.22

とアドレスバーに打ち込むことでローカルサイトにアクセスできます。

wp_siteurlは本番環境でwordpressをサブディレクトリに置いている場合、そのディレクトリ名に合わせます。僕はサブディレクトリを使用してないのでそのままです。

synced_folderはwordpressを置くファイル名です。mixhostに設置したwordpressはpublic_htmlという名前のフォルダに設置されるので、ローカル環境も名前を合わせました。

Vccw 18

db_prefixはwordpressを置いているサブディレクトリ名です。

wp_debugは、デバックモードの有無です。trueのままだと、こんな感じでエラーテキストがサイトに表示されてしまいます。

Vccw 17

site.ymlを反映させる

site.ymlの中身を変更し、反映させる場合は、site.ymlを編集した後、

$ vagrant halt

で一度Vagrantoをシャットダウンし、再び

$ vagrant up

すれば変更内容が反映されます。

仮想環境構築

移動できたら、仮想環境を構築します。

$ vagrant up

そこそこ時間がかかります。エラーがでなかったら、仮想環境の構築完了です。

site.ymlでhostnameやipを変更していなければ、下記のいずれかのURLでアクセスするとローカルwordpress環境が構築されているのを確認できます。

site.ymlを変更した場合は、「example.com」など変更したURLを打ち込んでください。

http://vccw.dev/

http://192.168.33.10/

Vccw 16

では、次回は仮想環境で作ったwordpressローカル環境と、mixhostを同期していきます。

Vccw&Wordmoveでローカルとmixhostを同期!超快適なwordpress開発環境(後編)

こんにちは、トーマ(@toma_tokyoboy)です! 前回の記事ではvccwを使っていくための準備をしていきました。 いよいよローカル環境とMixhost(ミックスホスト)を同期させていきます。 …【続きを読む】

続きを見る



-WEB, WEB制作, ブログ運営
-, , ,

Copyright© 東京ボーイ , 2017 All Rights Reserved.