こんにちは、トーマ(@toma_tokyoboy)です！
このサイトはwordpressで運営しています。
wordpressサイトのカスタマイズをする時、通常ローカル環境で作業をし、本番環境にアップロードします。
その作業をVccw、Wordmoveというツールを使うと、コマンド一発でローカルと本番環境が同期でき、開発が非常に快適になりました。
今回ローカルと同期するサーバーは前回の記事で紹介したMixhost（ミックスホスト）です。
-
エックスサーバーからmixhostに乗り換えたらいいことしかなかった
続きを見る
基本的にどのレンタルサーバーでもやり方は似ているので是非参考にしてみてください。
mixhostは歴史の浅いサーバーなので、情報が少なくつまづきまくりましたが、丸一日かけて開発環境を構築することができました。僕がつまづいたところも網羅的に解説していくので、この記事の通りやれば３０分ほどで快適な開発環境が構築できると思います。
ローカル環境とは？作らなきゃいけないの？
ローカルというのは、超簡単に言うと、ネットワークに接続しなくてもアクセスできる環境、つまりあなたのPC内のことです。
ローカルに対してインターネットに接続しないとアクセスできない環境を、リモートとか本番環境、と言ったりします。
呼び方が変わるとややこしいので、ここからは、PC内をローカル環境、ネットワーク上のことを本番環境と、呼び方を統一します。
本番環境で編集してはいけない理由
サイトのデザインや内部ソースを変えたり、プラグインをアップデートしたい時、直接本番環境のファイルをいじっちゃうのは危険なんです。
以下のような問題が起きてしまいます。
直接本番環境をいじってはいけない理由
- リアルタイムにサイトに反映するので、ユーザーに迷惑
- 修正が効かなくなる
- 作業的にも非効率
特にPHPを編集する場合のエラーは怖く、少しでもソースがおかしくなったら、画面が真っ白になってしまうこともあります。
こういったことが起きてはいけないので、ソースのカスタマイズや更新作業はローカルで行い、不具合がないことを確認できた上で本番環境に反映させる、という手順を通常取ります。
ローカル環境を構築する重要性はわかりましたか？
ではいよいよローカル環境開発の準備を行っていきます。
vccwでローカル環境を作るメリット、MAMPとの違い
ローカル環境を作る上で、これまではMAMPやXAMPPというアプリケーションが主に使われていました。僕も使ってました。
MAMPやXAMPPはアプリケーションはローカルサーバーを構築するためのアプリです。
worppressはphpで作られたCMSなので、phpが使えるサーバー上でしか動作確認できません。MAMPやXAMPPは、phpを使えるサーバーやデータベースを構築しwordpressをローカルで使えるようにしてくれるアプリです。
ただこのMAMPでローカルと本番環境を同期しようとすると、下記のような手順を踏まなくてはならず、けっこう大変なんです。
1. 本番環境からwordpressファイルをダウンロード
2. 本番環境のphpmyadminにアクセスし、データベースをエクスポート
3. エクスポートしたmysqlファイル内のURLをローカルに合わせて書き換える
4. ローカルのphpmyadminにアクセスし、データベースをインポート
ね、めんどくさそうでしょ？
では、今回紹介する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.18.0
vccw
vccwは開発環境を構築するツールです。
ローカルと本番環境を同期するためのwordmoveも同梱されています。
V2を使ったときは、mixhost内のmysqlと文字コードが合わずエラーが出たので、V3以降を使ってください。以下のリンクはversion3です。
インストールVCCW - A WordPress development environment.
「Getting Started」以下に書いてあるやり方で作業を進めていきます。
vccwは「5. Please download .zip.」の部分からダウンロードしておいてください。
ダウンロードしたファイルを解凍して、適当な場所に置いといてください。今回はデスクトップに移動しておきます。
virtualbox
Virtualboxは、仮想環境OSを構築するためのアプリです。
仮想環境とは簡単に言うと、PCの中に、もう一つPCを入れるようなものです。
仮想環境は簡単に構築したり削除したりできます。
どれだけいじり倒しても今使っているPCに影響は出ないので大変便利です。
インストールDownloads – Oracle VM VirtualBox
今使っているPCのOSに合ったものをインストールしてください。僕の場合はMAC OSなの「OX X hosts」をインストール
vagrant
vagrantも仮想環境を構築するためのアプリで、virtualboxとセットで使います。
インストールDownload - Vagrant by HashiCorp
vagrant-hostsupdater
Vagrantを便利に扱うためのプラグインです。
ターミナルで以下のコマンドを入力するとインストールできます。
$ vagrant plugin install vagrant-hostsupdatervagrant 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 Desktop/vccwsite.ymlを作成
site.ymlは、開発環境の設計図のようなものです。
provision/default.ymlを、一つ上の階層に複製し、site.ymlにファイル名を変更します。
$ cp provision/default.yml site.yml続いてsite.ymlをテキストエディタで開き編集します。
つらつらと設定が並んでいますが、変更する必要が高い部分は以下の６点
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
とアドレスバーに打ち込むことでローカルサイトにアクセスできます。
hostnameのドメインを「.dev」「.app」にすると、https接続を矯正されローカル環境がブラウザで表示されなくなります。「.test」などのドメインを使ってください。
参考Google ChromeでVagrant+VirtualBox等の開発環境でhttps接続にリダイレクトされる問題 - Qiita
wp_siteurlは本番環境でwordpressをサブディレクトリに置いている場合、そのディレクトリ名に合わせます。僕はサブディレクトリを使用してないのでそのままです。
synced_folderはwordpressを置くファイル名です。mixhostに設置したwordpressはpublic_htmlという名前のフォルダに設置されるので、ローカル環境も名前を合わせました。
db_prefixはwordpressを置いているサブディレクトリ名です。
wp_debugは、デバックモードの有無です。trueのままだと、こんな感じでエラーテキストがサイトに表示されてしまいます。
site.ymlを反映させる
site.ymlの中身を変更し、反映させる場合は、site.ymlを編集した後、
$ vagrant haltで一度Vagrantoをシャットダウンし、再び
$ vagrant upすれば変更内容が反映されます。
仮想環境構築
移動できたら、仮想環境を構築します。
$ vagrant upそこそこ時間がかかります。エラーがでなかったら、仮想環境の構築完了です。
site.ymlでhostnameやipを変更していなければ、下記のいずれかのURLでアクセスするとローカルwordpress環境が構築されているのを確認できます。
site.ymlを変更した場合は、「example.com」など変更したURLを打ち込んでください。
では、次回は仮想環境で作ったwordpressローカル環境と、mixhostを同期していきます。
-
Vccw&Wordmoveでローカルとmixhostを同期！超快適なwordpress開発環境（後編）
続きを見る