おでこです。自宅では Windows のデスクトップマシン、出先や勉強会では MacBook Air を使っているのですが、それぞれに作っている XAMPP のローカル環境がバラバラなのがずっと不満でした。勉強会で一からローカル環境作り直したり。自宅と MBA で同じバージョンの WordPress を2回もインストールしたり。

でも、そんなこととももうおさらば！Dropbox を使って ローカル環境を同期することにしてみました。具体的な手順は以下をご覧あれ。

XAMPP のファイル構成は OS によってまったく違う

複数クライアントの XAMPP 環境の同期と聞いて、「そんなの XAMPP フォルダを Dropbox フォルダに入れて同期すれば終了だろ、JK」と思う方もいるかもしれません。XAMPP 環境を扱うクライアントがすべて同じ OS であればこの方法でも解決できますが、Windows と Mac あるいは Linux などを使い分けていると、この方法ではうまくいきません。

それは、XAMPP のファイル構成が OS によって違うからです。たとえば、Mac の XAMPP では /xampp/xamppfiles/bin/ の中にアプリケーションファイルがまとめられていますが、Windows の XAMPP フォルダでは /xampp/apache/ や /xampp/mysql/ などそれぞれのフォルダごとにアプリケーションが分散しています。もちろん、Windows のアプリケーションは Mac では動きませんし、その逆も無理。OS をまたがった同期を行うにはこの方法は不向きです。

htdocs と mysql を同期する

そこで、公開サイトのデータの格納先であるドキュメントルートと データベースである MySQL のデータファイルをそれぞれのクライアントの Dropbox ディレクトリに配置するように設定し、Dropbox のオンラインストレージ経由で同期を取ることにします。

ぼくは htdocs を sites というフォルダをつくって同期を取りましたが、別に Dropbox 内にも htdocs を作っても問題ないきがします。

とりあえず XAMPP をインストールする

すでにインストールできて準備万端(;ﾟ∀ﾟ)=3な人は飛ばしてください。

まだの方は、APACHE FRIENDS からそれぞれの OS にあった XAMPP のパッケージを落としてください。

Windows の方は C:\xampp\ に、Mac の方はアプリケーションフォルダの中にインストールでいいんじゃないかな。

ドキュメントルートを dropbox 内のフォルダに割り当てる

通常ドキュメントルートは htdocs が割り当てられているはずで、このフォルダの中身が公開されるようになっていますが、これを dropbox フォルダの中につくった sites フォルダが公開されるように設定を変更します。以下、YOURNAME のところはコンピュータのアカウント名に適当に書き換えてくださいね。

Windows 編

C:\xampp\apache\conf\httpd.conf に以下を追加（位置はわりとどこでもおｋ）します。

<Directory “C:\Users\YOURNAME\Documents\My Dropbox\sites”>

<Directory “C:\Users\YOURNAME\Documents\My Dropbox\sites”>
  Options Indexes FollowSymLinks Includes ExecCGI
  AllowOverride All
  Order allow,deny
  Allow from all
</Directory>

また、以下のように

httpd-vhosts.conf がインクルードされていること（Include の # が外れてコメントアウトされてないこと）を確認してください。# がついていたら消してくださいね。

# Virtual hosts
Include “conf/extra/httpd-vhosts.conf” ←コメントアウトされてないことを確認

次に、C:\xampp\apache\conf\extra\httpd-vhosts.conf を開き、NameVirtualHost が有効になっていること（コメントアウトされてないこと）を確認してください。

# Use name-based virtual hosting.
#
NameVirtualHost *:80 ←コメントアウトされてないことを確認  
またラストに

またラストに

<VirtualHost *:80>
  DocumentRoot “C:\Users\YOURNAME\Documents\My Dropbox\sites”
  ServerName localhost
</VirtualHost>

を追記します。

最後に、C:\xampp\htdocs\ に置いていたファイルを、C:\Users\YOURNAME\Documents\My Dropbox\sites に移動してください（上書きが発生する場合はどちらが最新なのかに注意してくださいね）。

Mac 編

/Applications/XAMPP/xamppfiles/etc/httpd.conf に以下を追加（位置はわりとどこでもおｋ）します。

<Directory “/Users/YOURNAME/Dropbox/sites”>
  Options Indexes FollowSymLinks Includes ExecCGI
  AllowOverride All
  Order allow,deny
  Allow from all
</Directory>

また、以下のように httpd-vhosts.conf がインクルードされていること（Include の # が外れてコメントアウトされてないこと）を確認してください。# がついていたら消してくださいね。

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf ←コメントアウトされてないことを確認

次に、/Applications/XAMPP/etc/extra/httpd-vhosts.conf を開き、NameVirtualHost が有効になっていること（コメントアウトされてないこと）を確認してください。

# Use name-based virtual hosting.
#
NameVirtualHost *:80 ←コメントアウトされてないことを確認

またラストに

<VirtualHost *:80>
  DocumentRoot “/Users/YOURNAME/Dropbox/sites”
  ServerName localhost
</VirtualHost>

を追記します。

最後に、/Applications/XAMPP/htdocs/ に置いていたファイルを、/Users/YOURNAME/Dropbox/sites に移動してください（上書きが発生する場合はどちらが最新なのかに注意してくださいね）。

MySQL の実データファイルを Dropbox に割り当てる

続いてデータベースも Dropbox に割り当てていきます。 Thx: ひろまささん！

Windows 編

MySQL の実データファイルは C:\xampp\mysql\data\ にあるので、こちらも Dropbox に割り当てていきます。

MySQL のデータファイルの置き場所は C:\xampp\mysql\bin\my.ini によって定義されていますので、このファイルの C:\xampp\mysql\data\ を C:\Users\YOURNAME\Documents\My Dropbox\mysql\data へと置き換えていきます。

# The MySQL server
[mysqld]
basedir = “C:/xampp/mysql/”
datadir = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\data”

log_error = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\data\mysql.err”
pid_file = “mysql.pid”
general_log = 0
general_log_file = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\data\mysql.log”
slow_query_log = 0
slow_query_log_file = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\datamysql-slow.log”

# Uncomment the following if you are using InnoDB tables
#skip-innodb
innodb_data_home_dir = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\data”
innodb_data_file_path = ibdata1:10M:autoextend
innodb_log_group_home_dir = “C:\Users\YOURNAME\Documents\My Dropbox\mysql\data”

log_error 関連や innodb 関連でエラーが出るようであれば適宜コメントアウトしてみてください。

最後に C:\xampp\mysql\data\ にあったファイルを C:\Users\YOURNAME\Documents\My Dropbox\mysql\data へと移動します（上書きが発生する場合は最新の方を上書きするように気をつけてくださいね）。

Mac 編

MySQL の実データファイルは /Applications/XAMPP/xamppfiles/var/mysql/ にあるので、こちらも Dropbox に割り当てていきます。

MySQL のデータファイルの置き場所は /Applications/XAMPP/etc/my.cnf によって定義されていますので、このファイルの /Applications/XAMPP/xamppfiles/var/mysql/ を /Users/YOURNAME/Dropbox/mysql/data/ へと置き換えていきます。

# The MySQL server
[mysqld]
datadir = /Users/YOURNAME/Dropbox/mysql/data/ ←なければ追加

# Uncomment the following if you are using InnoDB tables
#skip-bdb
innodb_data_home_dir = /Users/YOURNAME/Dropbox/mysql/data/
innodb_log_group_home_dir = /Users/YOURNAME/Dropbox/mysql/data/

エラーが出るようであれば innodb 関連を適宜コメントアウトしてみてください。

最後に /Applications/XAMPP/xamppfiles/var/mysql/ にあったファイルを /Users/YOURNAME/Dropbox/mysql/data/ へと移動します（上書きが発生する場合は最新の方を上書きするように気をつけてくださいね）。

Apache、MySQL を再起動

上記までの設定が完了したら、xampp-control で Apache、MySQL を再起動します。以後、ドキュメント、データベースともに Dropbox のローカルフォルダに書きこまれ、そこからオンラインストレージとの間で同期を取るようになります。

注意事項

• 今後ローカル環境を使用する際は、コンピュータを終了する前にかならず xampp-control で MySQL をストップし、Dropbox のファイル同期を待ってから、コンピュータを終了してください。こうしないと最後まで使用中のファイルが同期されません。

• Mac 側の /Users/YOURNAME/Dropbox/mysql/data/ 内のフォルダに一時停止マークがついて同期できない場合は、ターミナルを起動し、$ sudo chmod -777 FOLDERNAME を実行してみてください。

さぁ、みんなもローカル環境を同期しよう、そうしよう！