Wordpressの開発環境をDropbox上に作成し、テーマのバージョン管理→本番環境(さくらVPS)への反映をGitで行う

前書き

Wordpressの開発環境と本番環境、そして平行開発のための環境をどうやってうまく運用していくか。いくつもテーマを作成したりしていると段々と面倒になってきますね。

代表的な例としてはxamppで開発環境を作り、SFTP等で変更した差分をアップロードしたりといった方法があります。
ただ、これでは更新したはずのファイルをアップロードし忘れてしまい、最悪の場合本番環境でエラーが出てしまったり後で修正する際にどの部分を更新したのかわからなくなってしまいます。

また、ローカルのみに環境を構築してしまうともしもHDDトラブルなどに見舞われてしまった場合、データ修復が困難になることも考えられます。
なので今回はDropbox上にWordpressの開発環境を構築し、テーマのバージョン管理をGitで行い、本番環境への反映も git push 一発で行えるようにします。

Dropboxに置くことで他のマシンからもファイル同期によって環境構築が行えるというメリットに加えて、バックアップ用途にも使えるので、もしもの時を心配せずにテーマ製作が行えます。

Windows(開発環境)でのGitの操作はなるべくコマンドを使用せず、追加・更新・反映はマウス操作で直感的にできるようなものを目指したいと思います。

用意するもの

• ローカル開発環境(Windows)
  • Dropbox for Windows
  • Instant Wordpress 　※新しいバージョンは内部ファイルが変更できなくなりました
  • Git Extensions (-Mono)

　Instant WordpressとGit Extensions-Monoをダウンロード後、Dropboxフォルダにインストール／解凍します。

インストール方法の参考：
　　ローカルでWordPressを扱う為に簡単と評判のInstant WordPressを使ってみた
　　http://note100yen.com/en-150116.html

　　[Sy] WindowsでGitを使いたい〜Git Extensionsをインストールする〜 | Syntax Error.
　　https://utano.jp/entry/2013/09/windows_git/

• 本番環境(CentOS, HTTPサーバはNginx)　※Wordpressが構築済み前提
  • Git
  • OpenSSH　※例ではユーザ gitusr で接続します。予め公開鍵を本番環境に置き、秘密鍵(.ppk)を控えておきます。詳しくはこちら

①本番環境(さくらVPS)にリモートリポジトリ作成

テーマファイルの場所に移動してリポジトリを作成し、ベアリポジトリを作成するためにGit管理しているプロジェクトのリポジトリからCloneします。

リポジトリの作成

テーマファイルの場所に移動

　# cd /home/webs/hogehoge.com/wp-content/themes/default/

　# git init
　# git add .
　# git commit -m "first"

ベアリポジトリの作成

　# mkdir /etc/git
　# cd /etc/git

　# git clone --bare --shared /home/webs/hogehoge.com/wp-content/themes/default/

リモートリポジトリの登録

  # cd /home/webs/hogehoge.com/wp-content/themes/default/
　# git remote add origin /etc/git/default.git

現在のリモートリポジトリを確認

　# git remote -v
    origin /etc/git/default.git (fetch)
    origin /etc/git/default.git (push)

ローカルからリモートにプッシュしたら本番へも自動反映するように

設定ファイル /etc/git/default.git/hooks/post-update を新規作成。
同じディレクトリ内の post-update-sample を複製してリネーム・編集してもOKです。

/etc/git/default.git/hooks/post-update

#!/bin/sh
GIT_WORK_TREE="/home/webs/hogehoge.com/wp-content/themes/default/"
cd $GIT_WORK_TREE || exit
unset GIT_DIR
git --git-dir=.git fetch
git --git-dir=.git reset --hard origin/master
git --git-dir=.git clean -fdx

実行権限を与えておく。

chmod +x /etc/git/default.git/hooks/post-update
chown -R gitusr:gitusr /etc/git/default.git/

さて、恐らくここからが一番厄介です。
ローカル環境 → 本番環境への反映の際、テーマのリポジトリとベアリポジトリを別に分けているので、上記のスクリプトを置くだけでは Permission denied. となり反映されません。
post-updateでpullを発行しようとしても、HTTPサーバーとgitの権限が異なるのでうまくいきません。
また、テーマディレクトリ以下はsshユーザーからの書き込み権限を与える必要があります。

方法例として、HTTPサーバー(nginx)にpullを発行するためのphpを置いておき
post-updateからそのphpをwgetコマンドで参照するといった方法があります。
これはセキュリティの設定（127.0.0.1か自身のグローバルIPでのみアクセス可能にする等...）が必要なので少し面倒です。

今回の解決方法として、sshユーザー(gitusr)をnginxグループに追加し、テーマディレクトリ以下をグループからの書き込み権限を与えます。
ファイルやディレクトリを作成したときにも所有グループが継承されるように設定し、デフォルトのパーミッションもグループからの書き込み権限を付与します。

sshユーザー(gitusr)をnginxグループに追加

gpasswd -a gitusr nginx

ファイルやディレクトリが作成された際にグループを継承するようにしておく

chmod -R g+ws /home/webs/hogehoge.com/wp-content/themes/default/

ssh接続で書き込みできるように所有者を変更する

chown -R gitusr:nginx /home/webs/hogehoge.com/wp-content/themes/default/

デフォルトパーミッションでグループに書き込み権限を付与する。
/home/gitusr/.bash_profile を編集　umask 002 を追記。

/home/gitusr/.bash_profile

# User specific environment and startup programs

PATH=$PATH:$HOME/bin
umask 002

export PATH

パーミッションと所有者の設定が結構はまりどころなので注意してください。

②ローカル環境(Git Extensions)でリモートリポジトリをcloneできるか確認

ここからはWindowsでの操作になります。

Git Extensionsを開き、「リポジトリのClone...」をクリックします。

Cloneするリポジトリ: ssh://のアドレスにベアリポジトリの階層を繋げて入力。
Cloneを作成する場所: Dropboxフォルダ/InstantWordpress内のthemesフォルダ
サブディレクトリの作成: 同期するテーマフォルダ名

「SSH鍵の読み込み」をクリックします。

事前に作成し控えておいた秘密鍵を選択し、「開く」をクリックします。

画面が戻るので「Clone」をクリックしてcloneを開始します。
成功すると下記のようになるので、OKをクリックして終了します。

次に「リポジトリは正常にCloneされました。今すぐリポジトリ ... を開きますか？」と聞かれるので「はい」
を選択してクリック。

下記のような画面に切り替われば成功です。

③ローカルから本番環境へPushし、自動で反映されるか確認する

cloneしたテーマフォルダ内で、適当にファイルを作成し保存します。
するとコミットが(1)に変わりマークが赤色になったはずなので、確認してクリックします。

変更されたファイルが一覧で出てくるので、ファイルをステージに追加しコミットします。
進捗ダイアログが出てくるので、成功したらOKをクリックします。

①ファイルを選択しステージに追加
②変更点を記載する
③コミットする

すると先ほどの変更が加わったものが master として新たに作成されています。
本番環境はまだ origin/master に留まっているということが確認できます。

①ローカル環境でテーマを修正→
②InstantWordpressで動作を確認→
③コミット→
④①に戻る
... OKの段階でpush(本番環境に反映)　　という流れが可能になります。

pushして本番環境に反映します

メッセージを確認し、OKをクリックします。

origin/master が移動していることが確認できました。

実際のファイルをブラウザから表示して、うまく変更されていれば成功です。

最後に

Worpdressのテーマ以外にも、プラグインや色々な用途で応用できると思います。
Githubなどに公開せず、一人で開発するような方に向いているかもしれません。
動きの流れを作るまでが大変ですが、時間があればやってみてください。