Gulp / docker

(後編)XAMMPもMAMPも使わない!ローカル開発環境はdockerで構築してみよう!DAMPでラクラク構築の巻

WordPressやPHPサイトをつくる際、自分のマシンのローカルの開発環境をXAMMPやMAMPを使って構築している方はまだけっこういらっしゃると思います。

かくいう私も最近までバリバリXAMMPを使用しておりました。しかしdockerなるものが登場して4年ほど経ちましてずいぶんと導入事例も増えてきたため、今年最後のチャレンジとして、なかなかとっつきずらかったdockerを導入してみました。

前回の記事では、コマンドラインを一切使わずにアプリケーションだけでdockerの設定をしてみました。

今回はさらに1歩進んで、バーチャルホストでサイトごとにドメイン設定する方法をご紹介します。

【2018/06/20更新】:*.testが動かない問題への対処を記述しました!

前回のおさらい

まずdockerを自分のマシンにインストールしましょう。

前回の記事はこちら

[st-card id=1479]

一通りdocker環境が整いましたら、次の工程に進みます。

@yousanさんのDAMPを使いましょう

Qiitaに記事とファイル群をアップしてくれております。

この方の記事の内容が今回まさにやりたかったことでして、dockerで必要なファイル一式を共有してくださっているのでとてもありがたい内容です。

参考サイト
ローカル開発環境をもっとたくさんの人に使ってもらいたくてDockerで作りました

ここで公開されているDAMPを使えば、本テーマに掲げていたXAMMPとMAMPでできることをdockerですることができます!

本当にありがたいですね!

@yousanさんのDAMPとは?

記事を拝読させていただき、DAMPでできることを抜粋させていただきます。

〜始めに〜

最近ウェブ開発でローカル環境を使って欲しいなぁ、とすごく思うようになりました。
慣れてしまえば開発効率が上がると思うんですけど、その導入が大変なんですよね。
仕事で一緒になった方々に手作業で構築していましたが、もっと簡単にできないかなということで作りました。
Mac用です。名前はDAMP(Docker Apache MySQL PHP。 XAMPP, MAMPから取りました。)です。
Apache、MySQL、PHPが動きます。

〜なにができるの?〜

フォルダを作るとブラウザでアクセスできるローカル環境ができます。
例えば ~/public_html/test.test というフォルダを作ると http://test.test でアクセスすることができます。

便利じゃないですか?
案件がたくさんあっても切り替え簡単なんです。
VirtualHostってたくさん書かなくても良いんです。
Hostsの編集もいらないんです。

@yousanさんのQiitaより

はい、まさしくこれがしたかったです!

しかも最後のHostの編集がいらないというのが素敵ですね。XAMMPだったらhttpd-vhosts.confを開いてごにょごにょ書いていました。

概要でバーチャルホストを使ってと触れましたが、実際は何の設定もしなくてOKです!

コンテンツを管理するディレクトリ名を「◎◎.test」というように命名すれば、ブラウザのURLが◎◎.testで表示できる素敵な仕組みです。

それでは早速設定してみましょう。

1. DAMPの実行環境を準備する

まずdockerがインストールされていない方は前回の記事を見て、dockerとKitematicをインストールしてください。

DAMPのダウンロード先

すでにdockerがインストールされている方は、DAMP本体をダウンロードするだけでけっこうです。

2. DAMPの設定

@yousanのQiitaでも詳しくご説明されておりますので、詳しく知りたい方は@yousanのページを見て進めてください。

ざっくり私の解釈で必要だった作業を書き留めておきます。

まずはdamp-master.zipを解凍しましょう。

2-1. リゾルバの変更

resolver_ja.commandを開きます。

その後、ターミナルで下記コマンドを実行します。

↑結果が「namaserver 127.0.0.1」になればOKです。

2-2. ドキュメントルートを決める

@yousanさんの記事では、ドキュメントルートはホームディレクトリに「public_html」を作り、その中に「◎◎.test」フォルダを置く設定になっております。

ですが、普段皆さんがコンテンツデータを管理しているディレクトリ構成がそれぞれあると思いますのでその形に対応させてみます。

私は、以下のような構成にしました。

ーーーーーーーーーーーーーーーーーー
Users
└username
└docker
├app(DAMP本体を置いておく)
├mysql
htdocs ※ドキュメントルート
├◎◎1.test
├◎◎2.test
└◎◎3.test
ーーーーーーーーーーーーーーーーーー

したがって私のドキュメントルートは
/Users/username/docker/htdocs

になります。

2-3. docker-compose.ymlを修正する

同梱のdocker-compose-public_html.ymlは一旦必要なかったので削除しても大丈夫です。

ドキュメントルートとmysqlのディレクトリを配置したら、DAMP本体の中にあるdocker-compose.ymlを書き換えます。

下記を参考に書き換えてください。

①ドキュメントルート
– ~/public_html:/var/www/vhosts

– ~/docker/htdocs:/var/www/vhosts

②mysql
– ~/mysql:/var/lib/mysql

– ~/docker/mysql:/var/lib/mysql

2-4. 「damp_ja.command」を実行する

「damp_ja.command」を実行した際に必要なイメージファイルとコンテナ、MYSQLがダウンロードされてDAMPが正常に動きます。

初回はダウンロード時間が長いのでお待ち下さい。

2-5. apache2の設定

dockerで使用しているイメージのapache2の設定をします。

ご自身のPCにインストールしているapache2ではありませんのでお間違えなく。

 

【2018/06/20更新】:*.testが動かない問題への対処方法

下記コマンドで現在の設定を確認します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<VirtualHost *:80>
DocumentRoot “/var/www/pma.dev”
ServerName pma.dev
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:80>
ServerAlias *.dev
UseCanonicalName Off
Options All
VirtualDocumentRoot /var/www/vhosts/%0/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
↑赤字の部分を書き換えます。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<VirtualHost *:80>
DocumentRoot “/var/www/pma.dev”
ServerName pma.dev
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

<VirtualHost *:80>
ServerAlias *.test
UseCanonicalName Off
Options All
VirtualDocumentRoot /var/www/vhosts/%0/
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
↑赤字のようになっていればOKです。

2-6. DAMPとdockerの再起動をする

再起動をしてください。

3. 「◎◎.test」のディレクトリとファイルを置いてブラウザ確認

再度「damp_ja.command」を実行します。

はいここまでくればローカル環境の「◎◎.test」のディレクトリの中のindex.htmlやindex.phpがブラウザで開くことができます。

3-1. シンボリックリンクを設定する

ここも一工夫加えてみます。

@yousanさんの記事の例では、PHPフレームワークを利用した場合のシンボリックリンクの作り方をご紹介されております。

私はPHPフレームワークはあまり使わないのですが、シンプルに下記のケースを考えてみました。

サイト管理をしている中で、例えばhogeの中にAサイトとBサイトがあり、下記のように管理しているとします。

ーーーーーーーーーーーーーーーーーー
Users
└username
└docker
├app(DAMP本体を置いておく)
├mysql
htdocs ※ドキュメントルート
├◎◎1.test
├◎◎2.test
├◎◎3.test
└hoge
├siteA
└siteB
ーーーーーーーーーーーーーーーーーー

この場合、管理上ドキュメントルートにはhogeという親ディレクトリがあり、その小ディレクトリにsiteAとsiteBが存在しています。

従ってsiteAとsiteBのシンボリックリンクを作り、それをドキュメントルート上に配置して読み込むということをやりたいと思います。

3-2. docker-compose.ymlを修正する

再びdocker-compose.ymlを修正します。

先程設定したドキュメントルートの記述の下に下記1行を追記してください。

ーーーーーーーーーーーーーーーーーーーーーーーーー
– ~/docker/htdocs:/Users/username/docker/htdocs
ーーーーーーーーーーーーーーーーーーーーーーーーー
※「username」の部分はご自身のマシン上の名前を参照してください。

3-3. シンボリックリンクを作成する

ショートカットを作るのと同様にマウスの右クリックから「エイリアスを作成」で作ったシンボリックリンクで解決できるかと思いましたが、これでは正常に動作しませんでした。

ここはコマンドラインからきちんと作らないといけないようです。

ターミナルを起動して、下記コマンドを入力してください。

このコマンドの意味は、
「siteA.test」のシンボリックリンクは、~/docker/htdocs/hoge/siteAを参照する
という内容のシンボリックリンクを作成します。

同様にsiteB.testのシンボリックリンクも作成します。

これでhtdocsの中にsiteA.testというシンボリックリンクが作成されて下記のようなディレクトリ構成になったと思います。

ーーーーーーーーーーーーーーーーーー
Users
└username
└docker
├app(DAMP本体を置いておく)
├mysql
└htdocs ※ドキュメントルート
├◎◎1.test
├◎◎2.test
├◎◎3.test
├siteA.test(シンボリックリンク)
├siteB.test(シンボリックリンク)
└hoge
├siteA
└siteB
ーーーーーーーーーーーーーーーーーー

ブラウザのURLでsiteA.testを開くと、~/docker/htdocs/hoge/siteAを参照したコンテンツが表示されていると思います。
試しにのみが書かれた超シンプルなindex.phpを配置して確認してみてください。
正常に表示できていれば成功です。

まとめ

ちなみに本記事では触れませんでしたが、mysqlもインストールされますし、phpMyAdminを使うこともできます。
(localhostまたは127.0.0.1をURLに入れると表示できる)

これで無事にXAMMPとMAMPでできていた環境を構築することができました。

今後は作業の際に、DAMP本体にある「damp_ja.command」で起動、「stop_all_docker_ja.command」で停止しても良いですし、前編でご紹介したKitematicからコンテナを起動・停止してもよいかと思います。

 

本プログラムを公開してくださった@yousanさんに本当に感謝です。

私もdockerがなかなかとっつきづらくて苦戦していたのですが、やりたいことが明確になったとき@yousanさんのDAMPに出会えたのでdockerをスムーズに導入することができました。

dockerの真価を発揮させるためにもっとたくさんの設定方法があると思いますが、まずはこれだけできれば十分かと思います。

皆さんも色々と応用して自分なりのdocker環境を構築してみてください。

それでは。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です