はじめに

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

参考

ディレクトリ構成

project
├ docker-compose.yml
├ docker
│　 ├ php
│ 　│　 ├ php.ini
│ 　│ 　└ Dockerfile
│　 └ nginx
│ 　　　└ default.conf
└ server

手順

1. ファイルを準備

以下のファイルを作成します。

Dockerfile
docker-compose.yml
php.ini
default.conf

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環境が壊れた話

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

project/docker/php/php.ini

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

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エラー解決

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

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

8. migrateが実行できることを確認する

phpコンテナに入ってmigrateを実行する。

$ docker-compose exec php bash
$ php artisan migrate

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

9. Vue.jsの導入

npmでvueのパッケージをインストール。

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

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

$ npm list vue

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

オチ

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

結論、Laradock is ステキ!!

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