Dockerを使ってnginx + Laravel(lumen) + MySQL + Vue.jsの開発環境を構築する


はじめに

Dockerに関しては、これまで現場で使ってはいたのですが

最低限のコマンドを知ってる程度の知識なので、これを気にDockerで開発環境を作ってみます。


やりたいこと

docker-compose build && upだけでVue.js x Laravel(lumen)の開発環境を構築したい


Laravel(lumen)のプロジェクトを作成

Dockerコンテナを作った後でも良いのですが、今回は先にlumenだけプロジェクトを作成してしまいます。

cd var/www

composer create-project --prefer-dist laravel/lumen backend


ディレクトリ構造

root/

├ Docker/

  └mysql/

   └conf.d/

    └my.cnf

   └initdb.d/

    └schema.sql

    └testdata.sql

   └mysql_data/

   └Dockerfile

  └nginx/

   └conf/

    └default.conf

   └Dockerfile

  └php/

   └Dockerfile

   └php.ini

  └vue/

   └Dockerfile

├ var/

  └www/

   └backend/(Lumen)

   └frontend/(Vue)

├ docker-compose.yml


docker-compose.ymlを書く

version: '3'

services:

frontend:
container_name: app
build: ./Docker/vue
ports:
- 8080:8080
volumes:
- "./var/www/:/www"
working_dir: /www
tty: true

backend:
container_name: php
build: ./Docker/php
volumes:
- ./var/www/backend:/var/www/backend
working_dir: /var/www/backend

nginx:
image: nginx
container_name: web
volumes:
- ./Docker/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf
- ./var/www/backend/public:/var/www/backend/public
ports:
- 80:80
links:
- backend
depends_on:
- backend

mailhog:
image: mailhog/mailhog
container_name: mailhog
ports:
- "8025:8025"

mysql:
build: ./Docker/mysql
container_name: db
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: データベース名
TZ: 'Asia/Tokyo'
volumes:
- ./Docker/mysql/initdb.d:/docker-entrypoint-initdb.d
- ./Docker/mysql/conf.d:/etc/mysql/conf.d
- ./Docker/mysql/mysql_data:/var/lib/mysql
ports:
- 3306:3306
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: phpmyadmin
environment:
- PMA_ARBITRARY=1
- PMA_HOST=mysql
- PMA_USER=root
- PMA_PASSWORD=root
links:
- mysql
ports:
- 1234:80
volumes:
- /sessions


php.ini

[Date]

date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"


Vue.jsのDockerfileの記述

FROM node:12.4

RUN yarn global add @vue/cli


phpのDockerfile + 設定ファイルの記述


Dockerfile

FROM php:7.2-fpm

COPY php.ini /usr/local/etc/php/

RUN apt-get update \
&& apt-get install -y zlib1g-dev mysql-client \
&& docker-php-ext-install zip pdo_mysql

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

ENV COMPOSER_ALLOW_SUPERUSER 1

ENV COMPOSER_HOME /composer

ENV PATH $PATH:/composer/vendor/bin


nginxの設定ファイルの記述

server {

listen 0.0.0.0:80;
server_name localhost;
charset utf-8;

root /var/www/backend/public;

index index.php;

location / {
try_files $uri $uri/ /index.php$is_args$args;
}

location ~ \.php$ {
fastcgi_pass backend:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}
}


mysqlのDockerfile + 設定ファイルの記述


Dockerfile

FROM mysql:8.0.16


my.cnf

[mysqld]

default_authentication_plugin= mysql_native_password
explicit-defaults-for-timestamp=1
general-log-file=/var/log/mysql/mysqld.log


Dockerコンテナの立ち上げ


  1. docker-compose.ymlファイルの置かれているディレクトリでdocker-compose buildコマンドを実行


  2. docker-compose up -dコマンドでコンテナの立ち上げ


  3. docker psコマンドで起動中のコンテナの確認


vueプロジェクトの作成

docker psコマンドを叩くと下記のように起動中のコンテナ一覧が出てくるので、appのコンテナにログインします。



  • docker exec -it app bashでappコンテナにログイン

CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                               NAMES

a2bbaa89bbc5 phpmyadmin/phpmyadmin "/run.sh supervisord…" 4 seconds ago Up 1 second 9000/tcp, 0.0.0.0:1234->80/tcp phpmyadmin
e5fd26c9cb2a nginx "nginx -g 'daemon of…" 4 seconds ago Up 2 seconds 0.0.0.0:80->80/tcp web
0f76affe0dff backend "docker-php-entrypoi…" 5 seconds ago Up 3 seconds 9000/tcp php
aa42cbbb3859 mysql "docker-entrypoint.s…" 5 seconds ago Up 3 seconds 0.0.0.0:3306->3306/tcp, 33060/tcp db
62934d71fb1e frontend "docker-entrypoint.s…" 5 seconds ago Up 3 seconds 0.0.0.0:8080->8080/tcp app
aca66fbeb310 mailhog/mailhog "MailHog" 5 seconds ago Up 3 seconds 1025/tcp, 0.0.0.0:8025->8025/tcp mailhog

・www直下のディレクトリに居ることを確認後、vueプロジェクトを作成

vue create frontend

※設定を聞かれるので、各々の環境に合わせて回答してください

・プロジェクトの作成が終わったら、サーバーを立ち上げます

cd frontend

npm run serve もしくは yarn serve

ブラウザでhttp://localhost:8080/にアクセスして下記画面が表示されたらVue.jsの準備はOKです

FireShot Capture 044 - frontend - localhost.png


NginxとMYSQLの動作確認


Nginx + lumen

・次にhttp://localhost:80にアクセスし、下記画面が表示されればOKです

FireShot Capture 045 -  - localhost.png


MySQL

・下記コマンドでデータベースのコンテナにログイン

docker exec -it db bash

# ログイン後
mysql -u root -p
# パスワードはdocker-compose.ymlをいじってなければpass
show databases
# docker-compose.ymlで設定したデータベース名が表示されてればOK

他に、shcema.sql・testdata.sqlに記述をしてた場合はテーブルが作成されてるか等も合わせて確認

以上、こんな感じで出来ました!

Docker初心者が作ったものなので、もっと良い方法があるかもしれませんが

ちゃんと動いたので今回はここまで!


まとめ

思ったより手こずったけど、やっぱDocker使って開発できると楽だよね

※参考記事

「Laravel+MySQL+NginxでさくっとDocker開発立ち上げる」

「docker-compose でMySQL環境簡単構築」

「Dockerを使ってVue CLI 3 の開発環境を構築する」