-->

クマザッカ

社内ベンチャーマン兼フリーwebライターのゆる系ブログ。服、飯、酒、コーヒー、アウトドアとかの外あそびについて書く。ことがある。

xamppとdropboxで簡単に共有ローカル環境をつくる【wordpress】

f:id:kumad:20170120134718p:plain

 

今日も寒いです。くまがいです。

 

wordpress開発案件の際に必要不可欠なxampp。

ローカル環境が簡単に作れるのは非常に便利なのですが、僕の場合は使用している端末が複数あるので、ローカルのみに依存した環境は結構不便。

 

家で開発用にしているノートPC(win7)と、

客先プレゼン用兼サブPCのsurface(win8)、

メインとなる予定のMacBook Proで、どれも同じ環境をつつきたい...

 

もちろん、レンタルサーバーにあげりゃええやん。という考えもありますが、設定いじるときとか複数ファイルに一括処理あてたいときとかはローカルは何かと便利。

 

というわけで、windows&macでクロスオーバーしても使用できる「共有ローカル環境」をdropboxで実現していく手順をまとめ。

 

windowsから書いているので、win目線で書きますがMac(MAMP)でもやっていることはほぼ同じです。

 

前提

・元となるPCにxamppがインストール済

 -今回はv5.6.28を使用しています

・元となるPCにwordpressがインストール済

dropboxが使用可能な事

 

環境の構造について

 

f:id:kumad:20170120133509p:plain

ざっとこんなかんじ。 

webサーバーはローカルに構築して、いろいろ変更をするデータのみ共有フォルダ(Dropbox)に置いているイメージ。

 

やっていることは非常に簡単で、データの移管と向き先の変更をするだけ。

 

 

 

xamppとdropboxで簡単に共有ローカル環境をつくる手順

さて、やっていきましょう。

これを書きながら自分も調べつつやってみているので、微妙なところは補完するようにします。

 

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

xamppに入っているサーバーアプリであるapacheの設定を変更します。

 

C:\xampp\apache\conf\httpd.confというファイルに「ドキュメントルートはhtttdocだよ!」という記述があるので、それを「C:\Users\ユーザー名\Dropbox\任意のフォルダ名だよ!」に書き換えてあげましょう。

 

以下のコードをhttpd.confに追加します。

>||

<Directory “C:\Users\ユーザー名\dropbox\任意のドキュメントルートディレクトリ”>
Options Indexes FollowSymLinks Includes ExecCGI
AllowOverride All
Order allow,deny
Allow from all

</Directory>

||<

 

この際、仮想ホスト設定ファイルがIncludeされていることを確認してください。

>||

Include “conf/extra/httpd-vhosts.conf”

||<

 

この仮想ホスト設定に、「webサーバー的なものをPCのどのポートでつかうんや?」を確認し、「んで、ドキュメントルートはどこなんや?」を記述します。

 

C:\xampp\apache\conf\extra\httpd-vhosts.confを開き、以下のコードがコメントアウトされていないことを確認。

>||

NameVirtualHost *:80

||<

 

そして以下のコードを一番下に追記することで「んで、ドキュメントルートはどこなんや?」を教えてあげましょう。

>||

<VirtualHost *:80>
DocumentRoot “C:\Users\ユーザー名\Dropbox\任意のフォルダ名
ServerName localhost
</VirtualHost>

||<

 

 

これでドキュメントルート設定は完了なので、

いままでルートにしていたhttdocsフォルダの中身をドロップボックス上にコピーし、ブラウザからアクセスして確認してみましょう。

 

*******※追記*******

他のサイトなどではこれで設定完了となっています(なぜだ)が、私の場合はhttpd.confのドキュメントルート部分を書き換えました。

こんな感じで行けると思います。

>||

DocumentRoot "C:\Users\ユーザー名\Dropbox\任意のフォルダ"

||<

 

あとは、httpd.conf内を「C:」とかで検索してみると、下手にローカルを指していないことを確認できます。

****END****

 

もとのローカルにあったhttdocsにあるwordpress(もちろんwordpressじゃなくても可)を違う名前にし...

f:id:kumad:20170120120650p:plain

 

 ブラウザからlocalhostにアクセスし、「/wordpress」で表示されれば成功です。

(私はポートの設定を変更していますのでlocalhost:8085になっていますがみなさんが実施した際は80で問題ありません)

f:id:kumad:20170120121009p:plain

 

 

MySQLの向き先をDropbox上にし、データファイルを移管

Xampp内のMySQLの実データファイルはC:\xampp\mysql\data\にあります。

向き先はC:\xampp\mysql\bin\my.iniに記述。

 

つまり、ここを書き換えてしまえば、ローカルのXampp内のMySQLは、DropboxMySQLファイルを見に行く、ということになります。

 

基本的には実データファイルを指すパス部分を、Dropbox移管後のデータ格納フォルダに書き換えればOKです。変更した箇所のみ記載しています。

>||

[mysqld]
datadir = "C:/Users/daisuke/Dropbox/dev/mysql/data"
innodb_data_home_dir = "C:/Users/daisuke/Dropbox/dev/mysql/data"
innodb_log_group_home_dir = "C:/Users/daisuke/Dropbox/dev/mysql/data"

||<

※パス表記について、windows系のPCは基本的に\(バックスラッシュ)を使いますが、mysql内ではUNIX系の/(スラッシュ)で記載されていましたので、そちらで記述を行います。一応どっちでも動くんじゃなかったかな?

 

※どの端末で発生したエラーかをわかりやすくするために、エラーログ等はローカルに吐かれるようにしています。またプラグイン等を使用する場合はそこもDropboxに移管したほうが良いでしょう。

 

設定ファイルの編集が完了したら、実データファイルをDropboxに移管するだけ。

単純に全コピーしてdropboxの任意のフォルダに突っ込んでしまいましょう。

 

設定ファイルを書き換えていますので、上手くできていなければmysql自体が立ち上がらないです。

なのでxamppのコントローラーからmysqlが立ち上がればOKです。

 

 

まとめ

これで複数端末で開発ができる環境が整いました。

簡易的なチームで開発を行う時もできますので、なかなか便利。

 

本当であれば設定ファイルも切り出してサーバに置きたいくらいなのですが、さすがにめんどくさいのでそこまではやらないことにしましょう。

広告を非表示にする