DockerでLaravel開発環境構築

こんにちはtkyです。

最近業務でPHPを使った開発をしているのですが、Laravelの開発環境をメモとして残しておきます。

※そろそろAndroidやりたい・・・！！どこかにAnroid開発転がってないですかね？ 🤔

本記事でできるようになること

• Laravel開発するためのDocker開発環境テンプレートが構築できる
• swaggerでAPI仕様書も一緒に書ける状態にする

本記事で触れないこと

• Laravelとは,、Dockerとは、のような説明
• DBの構築については各プロダクトによるので割愛します
• Laravelのコードは各プロダクトによるのでgithubには入れていません。

環境はgithubで公開しています。基本的にREADME見たらここから先の手順を見なくても構築できるようになっています。

github.com

Docker Compose で以下のような環境を構築します。

ローカルマシン上の server/ 配下と各Dockerコンポーネントをマウントして、Laravel環境を構築してnginxで公開するイメージです。

nodeも含めて全部Dockerで完結できるようにしました。API作るので一緒にswaggerも入れました。

docker環境図

私が開発環境するに当たり、参考にさせていただきました。ありがとうございます。 qiita.com

とりあえずdocker-compose.yml見せて

そうなりますよね。私もそう思います。別途 .env ファイルを用意してください。github上に .env-sample を用意していますのでrenameすればOKです。

version: '3.7'
services:
  php:
    container_name: ${PHP_NAME}
    build: ${PHP_CONTAINER_DIR}
    ports:
      - ${PHP_PORT}:${PHP_PORT}
    volumes:
      - ${LOCAL_DIR}:/var/www

  nginx:
    image: nginx
    container_name: ${NGINX_NAME}
    ports:
      - ${NGINX_PORT}:${NGINX_PORT}
    volumes:
      - ${LOCAL_DIR}:/var/www
      - ${NGINX_CONF}:/etc/nginx/conf.d/default.conf
    depends_on:
      - php

  db:
    container_name: ${DB_NAME}
    build: ${DB_CONTAINER_DIR}
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      TZ: 'Asia/Tokyo'
    restart: always
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - ${DB_PORT}:${DB_PORT}

  swagger:
    image: swaggerapi/swagger-editor
    volumes:
      - ./docker/swagger/${SWAGGER_YAML}:/usr/share/nginx/html/${SWAGGER_YAML}
    environment:
      API_URL: ${SWAGGER_YAML}
    ports:
      - ${SWAGGER_PORT}:${SWAGGER_PORT}

  node:
    container_name: node
    build:
      context: ./
      dockerfile: ${NODE_DOCKERFILE}
    tty: true
    volumes:
      - ${LOCAL_DIR}:/app
    ports:
      - ${NODE_PORT}:${NODE_PORT}
      - ${NODE_UI_PORT}:${NODE_UI_PORT}

cloneしたらやること

.envファイルを用意します。.env-sampleをrenameすれば良いです。各々の環境によって値は変更して大丈夫です。

$ cp .env-sample .env

コンテナたちを起動していきます。

$ docker-compose up -d

phpのコンテナに入って、laravelのプロジェクトを作成します。

$ docker-compose exec php bash
$ laravel new

ここまで来たら http://localhost/ にアクセスするとLaravelのページが開いているかと思われます。

このhttp://localhost/ はnginxによって立てられているサーバーとなります。

laravel環境が立ち上がったときのhttp://localhost/の画面

これでLaravel環境構築としては完了です。 ここからは実際に開発を効率化するためにもう少し手を加えていきたいと思います。

browser syncの導入

webpack.min.js を以下のように書きます。 webpack.mix-sample.js をコピーしても良いです。

webpack.min.js

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .browserSync({
        proxy: {
            target: 'http://nginx', //nginxのコンテナサービス名と一致させる
        },
        files: [
            './resources/**/*',
            './app/**/*',
            './config/**/*',
            './routes/**/*',
            './public/**/*',
        ],
        open: false,
        reloadOnRestart: true,
    });

nodeのコンテナに入ります。

$ docker-compose exec node /bin/sh
$ npm i
$ npm run hot

run hotしたときにいくつかのnode_modulesが新規インストールされます。コマンドが終了してしまうのでもう一度 npm run hot します。

この状態で http://localhost:3000/ を見に行くとLaravelのページが開いているかと思われます。 PHPのコードを編集して保存するとブラウザリロードがかかって即時ページが反映されているかと思われます。

あとはゴリゴリ書くだけ！！！

sassのコンパイルについて

実は npm run hot だとsassコンパイルがうまくできません。 そのため今の開発案件では npm run watch を使用しています。

メモリ上に展開されるファイルをserveするhotコマンドとローカルマシン上のディレクトリに展開されるファイルをserveするwatchコマンドという違いがあります。

nodeコンテナ上で

$ docker-compose exec node /bin/sh
$ npm i node-sass
$ npm run watch

こうすると /server/public/ 配下にコンパイルされたsassやjsが展開されるようになり、sass更新時、即時ブラウザ反映されるようになります。

またこのとき、常々public配下のファイルが変更されるため、 /serverpublic/css と /serverpublic/js は .gitignore で管理対象外にすることをおすすめします。

ついでにAPI仕様も

API仕様書もかけるようにswaggerも入れておきました。くらいです。 不要であれば消してください。

http://localhost:8080/ で仕様書が見れるようになります。

終わりに

今回、初のPHPチャレンジでLaravelを触ったりDockerでの環境構築にトライしたりいろいろと勉強になりました。 Dockerfileの書き方も結構理解が進みました。