Laravel+MySQL+Vue.jsの開発環境をDockerで構築

#はじめに
Laravel+MySQL+Vue.jsでSPAのWebアプリケーション作成の勉強をしたくて、Dockerで開発環境構築をしました。
開発の常で、開発環境構築に苦戦したので備忘録を兼ねて構築手順を記述します。
記載内容に誤り等ございましたら、ご指摘をよろしくお願いいたします。

#開発環境

```
$ docker --version
Docker version 19.03.8, build afacb8b

$ docker-compose --version
docker-compose version 1.25.4, build 8d51620a

$ php artisan --version
Laravel Framework 7.2.0

$ mysql --version
mysql  Ver 14.14 Distrib 5.7.29, for Linux (x86_64) using  EditLine wrapper

$ npm list vue
`-- vue@2.6.11 
```

#参考
- [Docker で Laravel の環境構築をしました](https://yudy1152.hatenablog.com/entry/2019/05/01/221249)
- [Dockerを使ってLaravel開発環境構築](https://qiita.com/A-Kira/items/1c55ef689c0f91420e81)
- [5分で作るLaravel＋Vue.js開発環境（docker-compose）](https://qiita.com/yusukeito58/items/37bd551560e495dbd1b8)
- [Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project/)

#ディレクトリ構成
```
project
├ docker-compose.yml
├ docker
│　 ├ php
│ 　│　 ├ php.ini
│ 　│ 　└ Dockerfile
│　 └ nginx
│ 　　　└ default.conf
└ server
```

#手順
##1. ファイルを準備
以下のファイルを作成します。
 
- Dockerfile
- docker-compose.yml
- php.ini
- default.conf


```dockerfile:project/docker/php/Dockerfile
FROM php:7.4.1-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y zlib1g-dev libzip-dev zip mariadb-client-10.3 libpng-dev libjpeg-dev curl wget \
  && docker-php-ext-install zip pdo_mysql

# nodejs install
RUN curl -sL https://deb.nodesource.com/setup_12.x | bash -
RUN apt-get install -y nodejs

# Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('SHA384', 'composer-setup.php') === '$(wget -q -O - https://composer.github.io/installer.sig)') { 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
WORKDIR /var/www
RUN composer global require "laravel/installer"
```
`mysql-client`のパッケージは削除されているので注意。

- [Circle CI で mysql-client が apt-get install できなくなってCI環境が壊れた話](https://yourmystar-engineer.hatenablog.jp/entry/2019/07/15/140644)

```yml:project/dockerfile-compose.yml
version: '3'
services:
  php:
    container_name: php
    build: ./docker/php
    volumes:
      - ./server:/var/www
    depends_on:
      - db
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
    volumes:
      - ./server:/var/www
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - php
  db:
    image: mysql:5.7
    restart: always
    container_name: db-host
    environment:
      MYSQL_ROOT_PASSWORD: yourpassword
      MYSQL_DATABASE: phpapp_db
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_general_ci
    volumes:
      - ./docker/db/data:/var/lib/mysql
      - ./docker/db/my.conf:/etc/mysql/conf.d/my.cnf
      - ./docker/db/sql:/docker-entrypoint-initdb.d
    ports:
      - 3306:3306
```

```ini:project/docker/php/php.ini
[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
```

```conf:project/docker/nginx/default.conf
server {
  listen 80;
    index index.php index.html;
    root /var/www/public;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {
    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass php:9000;
    fastcgi_index index.php;
    include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
  }
}
```
[参考]

- [nginx + Laravel でホーム以外のページの404エラー解決](https://qiita.com/maip0902/items/2fae4944e0115b40dcdc)


##2. dockerコンテナを立ち上げる

```
$ docker-compose build
$ docker-compose up -d
```

##3. phpコンテナに入ってlaravelプロジェクトを作成する

```
$ docker-compose exec php bash
$ laravel new
```

##4. dockerコンテナを一旦停止する

```
$ docker-compose down
```

##5. `.env`ファイルを編集する
以下のように無いパラメーターは追加し、すでに記述されているパラメーターは修正する。

```:project/server/.env
DB_CONNECTION=mysql
DB_HOST=db-host
DB_PORT=3306
DB_DATABASE=phpapp_db
DB_USERNAME=root
DB_PASSWORD=yourpassword
```

##6. コンテナを立ち上げる

```
$ docker-compose up -d
```

##7. ローカルホストにつながることを確認する
ブラウザから以下のURLにアクセスして正常に接続できることを確認する。

- [localhost:80](localhost:80)

正常に接続できれば以下のような画面が表示される。

![Built_laravel_environment_1](https://p86.f2.n0.cdn.getcloudapp.com/items/OAurlxDD/Built_laravel_environment_1.png?v=20737a6f3350a09c2051154bf06a4ad8)

##8. migrateが実行できることを確認する
phpコンテナに入ってmigrateを実行する。

```
$ docker-compose exec php bash
$ php artisan migrate
```

migrateが失敗する場合は以下の記事等を参考にして頂くと良いと思います。

- [Laravel データベース接続編](https://hirona-bys.hatenablog.com/entry/2019/02/05/152610)
- [php artisan migrateのエラーが解決できない](https://teratail.com/questions/194473)
- [Laravelでartisan migrateができない。](https://teratail.com/questions/205939)

##9. Vue.jsの導入
npmでvueのパッケージをインストール。

```
$ docker-compose exec php bash
$ npm install
$ npm install -D vue
```

vueのパッケージがインストールできていることを確認。

```
$ npm list vue
```

開発環境構築は以上です。

## オチ
ここまで書いておいてなんですが、一からDockerで環境構築するなら[Laradock](https://laradock.io/)を使った方が早いかもしれません...
(私はこの便利な[Laradock](https://laradock.io/)の存在を後から知りました)

結論、[Laradock](https://laradock.io/) is ステキ!!