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

#はじめに
Dockerに関しては、これまで現場で使ってはいたのですが
最低限のコマンドを知ってる程度の知識なので、これを気に`Docker`で開発環境を作ってみます。

#やりたいこと
`docker-compose build && up`だけで`Vue.js x Laravel（lumen）`の開発環境を構築したい

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

```sh
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を書く
```yaml
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
```ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```
#Vue.jsのDockerfileの記述
```docker
FROM node:12.4
RUN yarn global add @vue/cli
```
#phpのDockerfile + 設定ファイルの記述
##Dockerfile
```docker
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の設定ファイルの記述
```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
```docker
FROM mysql:8.0.16
```
##my.cnf
```ini
[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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423167/b32bf8f8-3241-7a7a-a4d7-d3f24c3e42c8.png)

#NginxとMYSQLの動作確認

##Nginx + lumen
・次に`http://localhost:80`にアクセスし、下記画面が表示されればOKです
![FireShot Capture 045 -  - localhost.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/423167/f0d665f6-5856-992d-c00b-865000fe09f7.png)

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

```sh
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使って開発できると楽だよね



※参考記事
・<a href ="https://qiita.com/bboobbaa/items/67bd9e74d7805516e68d">「Laravel+MySQL+NginxでさくっとDocker開発立ち上げる」</a>
・<a href="https://qiita.com/A-Kira/items/f401aea261693c395966">「docker-compose でMySQL環境簡単構築」</a>
・<a href="https://qiita.com/satokibi/items/189945f984e5e53117ea">「Dockerを使ってVue CLI 3 の開発環境を構築する」</a>