Dropbox で同期する XAMPP ローカル環境。どこでも開発！どこでも最新！

Posted on by

どうやったら同期できるか

おでこです。自宅では 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 を同期する

sites と 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”>

また、以下のように

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

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

またラストに

を追記します。

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

Mac 編

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

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

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

またラストに

を追記します。

最後に、/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 へと置き換えていきます。

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/ へと置き換えていきます。

エラーが出るようであれば 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 を実行してみてください。

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

“Dropbox で同期する XAMPP ローカル環境。どこでも開発！どこでも最新！” への47件のコメント

  1. ピンバック: 5月05日のおすすめ記事

  2. ピンバック: links for 2011-05-05 « 個人的な雑記

  3. ピンバック: xamppドロップボックスへお引越し | 3FACTORY 2011-WEBクリエイティブ

  4. ピンバック: Links for 2011-05-04 [del.icio.us] « Education News & APP

  5. ピンバック: Dropboxで同期するXAMPPとMAMPローカル環境 | masaplabs

  6. ピンバック: XAMPPのhtdocsとmysqlデータファイルをDropboxで同期 | ツチノコラボ

  7. ピンバック: iPad2を使ってできる革新的なweb制作 / 情報収集の方法 | Webデザインのレシピ

  21. @Webourgeon_com @shinichiN @sou_lab Winも同期の範囲に入れるならXamppのほうがいいかもですね。昔こんな記事を書いてまして、はてブをフィーバーさせましたん http://t.co/XTPdvXzX

  28. ローカルの別マシンにXAMPP入れて仮想ドメイン当てても、別回線からじゃないと正しく確認できなかったりするから、もうdropbox利用でいいんじゃないかな / “Dropbox で同期する XAMPP ローカル環境。どこでも開発！どこ…” http://t.co/4LQtBm3x

  37. ピンバック: PHP開発環境の設定 | iamflyingfish

  38. ピンバック: 【WordPress】「SugarSync」で2台のパソコンのローカル環境を同期する | Q-miz blog（きゆみずぶろぐ）

  40. ピンバック: 勉強用WPサイトはサーバに置くか？　それともXAMPP？ | WordPressでウェブサイトを作るまで

  44. @HissyNC お、おかしいことを言っているかしら…。これのDoropboxじゃなくてCopy版をやっていたの。一旦その時はうまく動いたのだけど、今日またその環境を使おうとしたらテーブルないよ、というエラーが出た次第なのです。http://t.co/LoIKLlRwTj

  45. こんにちわ、初めて投稿します。
    とてもありがたい記事で参考にしました。
    ただxampp×Dropboxで、win7 & win7の環境でMysqlのデータの同期ができなくて困りました。。
    テーブルの構造だけは同期できてたんですけど、、
    仕方なくエクスポートして、インポートして利用してます。

    もし何か知っていたら教えていただければ嬉しいです。
    ちなみにxamppは（1.8.3）を利用してます。

    返信 ↓

フォームは コメントしてほしそうに こちらを見ている……！