Laravel＋docker-compose＋docker-syncで開発環境の構築

はじめに

株式会社SCOUTERの小平(id:ryotakodaira) です。

普段はバックエンドをメインでたまにフロントエンドの開発も行っています。

弊社では以前まで統一された開発環境がなくメンバーに自前で環境を用意してもらっていたのですが、新しいメンバーがジョインしてくれた時に環境構築にかなりの時間を必要としてしまうことからDockerを用いて環境構築を出来るようにしました。

Laravelでは公式でHomesteadというVagrant用の開発環境が用意されていますが、今回はLaradockというDockerで開発環境を構築できるDockerImageを使用します。 github.com

検証実施環境

macOS Sierra (10.12.1)
Docker for mac (Version 17.06.0-ce-mac18)
docker-compose (version 1.14.0)
docker-sync (0.4.6)

※Docker for mac, docker-composeのインストールは出来ている前提とします。

Laradockの準備

検証用ディレクトリを作成してLaradockをクローンします。

$ mkdir sampleApp
$ cd sampleApp 

$ git clone https://github.com/laradock/laradock.git

# Laravelのインストール
$ composer create-project laravel/laravel laravelApp

完了すると sampleApp/ 以下に laradock laravelApp が作成されています。

docker-compose の設定

laradock/docker-compose.yml を開きます。 volumesに先程作成したLaravel(../sampleApp/laravelApp)を指定します。

version: '2'

 services:

 ### Applications Code Container #############################

     applications:
       image: tianon/true
       volumes:
         - ../laravelApp:/var/www

nginx の設定

今回はnginx を使用します。Laradockにはapache用のImageも用意されているため、apacheを使いたい場合には簡単に切り替えることが出来ます。 sampleApp/laradock/nginx/sites/default.conf を編集します。

server {

     listen 80 default_server;
     listen [::]:80 default_server ipv6only=on;
 
+     server_name laravel-app.dev;
-     server_name localhost;
     root /var/www/public;
     index index.php index.html index.htm;
 
     location / {
          try_files $uri $uri/ /index.php$is_args$args;
     }
 
     location ~ \.php$ {
         try_files $uri /index.php =404;
         fastcgi_pass php-upstream;
         fastcgi_index index.php;
         fastcgi_buffers 16 16k;
         fastcgi_buffer_size 32k;
         fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
         include fastcgi_params;
     }
 
     location ~ /\.ht {
         deny all;
     }
 
     location /.well-known/acme-challenge/ {
         root /var/www/letsencrypt/;
         log_not_found off;
     }
 }

macのhostsファイルに laravel-app.dev を追加します。 /etc/hosts を編集します。

127.0.0.1 laravel-app.dev

これで初期設定は完了です。次はDockerコンテナを立ち上げます。

Dockerコンテナの立ち上げ

laradockディレクトリに移動して env ファイルを作成します。

$ cd laradock
$ cp env-example .env

Dockerコンテナを立ち上げます。 laradockには様々はサービスのImageが用意されていますが、今回は nginx と mysql を使用します。

$ docker-compose up -d nginx mysql

Dockerコンテナの稼働を確認するには以下のコマンドを実行することでどのコンテナが稼働しているかを一覧で確認することが出来ます。

$ docker-compose ps
         Name                       Command             State                     Ports                   
---------------------------------------------------------------------------------------------------------
laradock_applications_1   /true                         Exit 0                                            
laradock_mysql_1          docker-entrypoint.sh mysqld   Up       0.0.0.0:3306->3306/tcp 
laradock_nginx_1          nginx                         Up       0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp 
laradock_php-fpm_1        php-fpm                       Up       9000/tcp                                 
laradock_workspace_1      /sbin/my_init                 Up       0.0.0.0:2222->22/tcp

http://laravel-app.dev にアクセスしておなじみのこのページが表示されていれば成功です。 f:id:ryotakodaira:20170703070709p:plain

docker-syncについて

ここまででLaravelアプリケーションをDocker上で稼働させ、開発を行うための環境が整いました。

ただ、Docker for macには ホスト⇔ゲスト間 のファイルの転送速度が遅いという問題を抱えています。

laradockの公式ドキュメントでも言及されいます。

Docker on the Mac is slow, at the time of writing. Especially for larger projects, this can be a problem. The problem is older than March 2016 - as it’s a such a long-running issue, we’re including it in the docs here.

そこで上記の問題を解決するために docker-sync というファイル転送が遅い問題を解決してくるツールを使用します。 github.com

docker-sync のインストール

さっそく docker-sync をインストールします。

※インストールには gem, brew コマンドが必要になります。

$ sudo gem install docker-sync
$ brew install fswatch
$ brew install unison

以下が表示されたらインストールは完了です。

$ docker-sync -v
0.4.6

docker-sync の設定

docker-compose.yml と同じ場所に docker-sync.yml というファイルを作成します。

 version: '2'
 
 sync_default: &sync_default
     notify_terminal: true

     # IPの設定
     sync_host_ip: '127.0.0.1'

     # ポートの設定
     sync_host_port: 10871

     # 同期させないファイルまたはディレクトリ
     sync_excludes: ['.gitignore', '.git/', '.idea/']
     
     # 同期方法の選択する (`rsync`か`unison`を使えます)
     sync_strategy: 'unison'
     
     sync_userid: '1000'
     
     # fswatchで監視させないファイルまたはディレクトリ
     watch_excludes: ['.gitignore', '.git/', '.idea/', 'vendor/', 'node_modules/', 'storage/']
     
     watch_args: '-v'
     
     watch_strategy: 'fswatch'
     
     
 syncs:
     # docker-syncのvolume名
     laravel-app:
         <<: *sync_default
         # ホスト側(PC)のパス
         src: '../laravelApp/'

docker-sync を使用するために docker-compose.yml を修正します。

services:
 
 ### Applications Code Container #############################
 
     applications:
         image: tianon/true
         volumes:
+             - laravel-app:/var/www/:rw
-             - ../laravelApp:/var/www


volumes:
+     laravel-app: #docker-sync.ymlで設定したvolume名
+         external: true

docker-sync を起動します。

$ docker-sync start
 success  Unison server started
          ok  Starting unison for sync laravel-app
          ok  Synced /path/to/laravelApp/

これで docker-sync がファイル変更を検知して変更をコンテナに同期してくれます。

監視するファイル数が多いと同期に時間がかかってしまうので、最低でも /vendor /node_modules は監視の対象から除くことをオススメしますw

docker-sync のコマンド

# syncの開始
$ docker-sync start

# syncの終了
$ docker-sync stop

# ファイルを同期する
$ docker-sync sync

# syncエンドポイントを一覧表示
$ docker-sync list

# syncエンドポイントの削除
$ docker-sync clean