5分で作るLaravel＋Vue.js開発環境（docker-compose）

最近**Laravel＋Vue.js**に興味あり、ちょうど良いタイミングで下記記事を見つけました。

[Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。 - Qiita](https://qiita.com/MasahiroHarada/items/2597bd6973a45f92e1e8)

これはやらねばと思い環境構築に着手。

ただ、`Docker`での開発もハマっており、せっかくならDockerで開発したいなぁと思い作ってみました。

## 対象とする人

* `Laravel`や`Vue.js`の開発に興味がある
* `docker-compose`の知見がある（今回Dockerの説明は割愛します）

※Laravelの開発メインであれば`Laradock`のほうが良さげ？ https://laradock.io

## 構築手順

### 開発用のディレクトリ作成

```
$ mkdir laravel-app
$ cd laravel-app/
```

### Dockerの設定ファイル一式を取得

gitファイルが不要なのでソースファイルだけ取得します。
※取得するファイルは[こちら](#補足)

```
$ wget -O docker.zip https://github.com/yusukeito58/docker-for-laravel-development/archive/master.zip  \
    && unzip docker.zip && mv docker-for-laravel-development-master/* ./ \
    && rm -rf docker.zip docker-for-laravel-development-master

$ ls 
docker                  docker-compose.yml
```

gitファイルが混じっても良いなら`git clone https://github.com/yusukeito58/docker-for-laravel-development`でもおｋ


### コンテナ作成

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

# 確認
$ docker-compose ps
      Name                     Command              State                 Ports
---------------------------------------------------------------------------------------------
laravel-app_app_1   docker-php-entrypoint php-fpm   Up      9000/tcp
laravel-app_db_1    docker-entrypoint.sh mysqld     Up      0.0.0.0:3306->3306/tcp, 33060/tcp
laravel-app_web_1   nginx -g daemon off;            Up      0.0.0.0:80->80/tcp
```

### Laravelのプロジェクトを作成

```
$ docker-compose exec app laravel new
```

### 動作確認
下記URLにアクセスするとLaravelの画面が表示されます。

http://localhost

<img width="990" alt="スクリーンショット 2019-01-30 12.47.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/116168/a6c9831b-9e78-45c4-99a6-608e7288a6b5.png">

### DB設定
Laravelが接続するデータベースをMySQLに変更します。

まずはデータベースを作成しましょう。

```bash
# mysqlに接続(dbコンテナでmysqlコマンドを実行)
$ docker-compose exec db mysql -uroot -ppassword

# データベース作成(ここではlaravelというデータベースを作成します）
mysql> create database laravel default character set utf8;
Query OK, 1 row affected (0.00 sec)

```

`.env`ファイルを次のように変更します。

```conf
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_sns
DB_USERNAME=root
DB_PASSWORD=passwor
```
## 補足

今回使用したDockerの設定ファイルは👇のGitHubリポジトリに置いています。

ミドルウェアのバージョンを変えたいなど、必要であればこれらのファイルを修正するだけでいけちゃいます。便利ですねDocker。

https://github.com/yusukeito58/docker-for-laravel-development

```bash
$ tree
.
├── docker
│   ├── app
│   │   └── Dockerfile
│   ├── mysql # nginxと同じ要領で設定ファイルを置いてもおｋ
│   └── nginx
│       └── default.conf
└── docker-compose.yml
```

```yaml:docker-compose.yml
version: '3'

services:
  app:
    build: ./docker/app
    depends_on:
      - db
    volumes:
      - .:/var/www/html:cached

  web:
    image: nginx
    ports:
      - 80:80
    depends_on:
      - app
    volumes:
      - .:/var/www/html:cached
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

  db:
    image: mysql:5.7
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: password
    volumes:
      - laravel-db-data:/var/lib/mysql

volumes:
  laravel-db-data:
    driver: local

```

```docker:docker/app/Dockerfile
FROM php:7.2-fpm

RUN apt-get update \
    && apt-get install -y zlib1g-dev mysql-client libpng-dev libjpeg-dev gnupg curl wget \
    && docker-php-ext-configure gd --with-png-dir=/usr/include --with-jpeg-dir=/usr/include \
    && docker-php-ext-install zip pdo_mysql gd

# nodejs install
RUN curl -sL https://deb.nodesource.com/setup_10.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/html

# laravel install
RUN composer global require "laravel/installer"
```

```conf:docker/nginx/default.conf
server {
    listen 80;

    root  /var/www/html/public;
    index index.php index.html;

    access_log /var/log/nginx/access.log;
    error_log  /var/log/nginx/error.log;
 
    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(\.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

```