0. はじめに

こんにちは、kazumakishimoto(@kazuma_dev)です。
関西のLaravelエンジニア『ゆーたろーさん(@shimotaroo)』の記事をアレンジして、DockerでLaravel + Vue.js + MySQL + nginx + phpMyAdminの開発環境を構築しました！

0-1. 全体の流れ

1.環境構築
 2.初期設定
 3.ライブラリ
 4.補足
 Reference

0-2. 本記事の対象者

DockerでLEMP環境構築(Laravel + Vue.js + MySQL + nginx + phpMyAdmin)

0-3. 事前準備

①MySQLは5.7系を選定②phpMyAdminのコンテナを追加

1. 環境構築

1-1. docker-compose.yml

セキュリティの観点から環境変数の値は.envから呼び出し

docker-compose.yml

version: '3.8'

volumes:
  mysql-volume:

services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    volumes:
      - ./src/:/var/www/html
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=${DB_NAME}
      - DB_USERNAME=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}

  web:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    ports:
      - ${WEB_PORT}:80
    depends_on:
      - app
    volumes:
      - ./src/:/var/www/html

  db:
    image: mysql:5.7
    platform: linux/x86_64
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    ports:
      - ${DB_PORT}:3306
    environment:
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      TZ: 'Asia/Tokyo'
    volumes:
      - mysql-volume:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    environment:
      - PMA_ARBITRARY=1
      - PMA_HOST=db
      - PMA_USER=${DB_USER}
      - PMA_PASSWORD=${DB_PASSWORD}
    links:
      - db
    ports:
      - 8080:80
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions

1-2. Dockerfile（app）

docker/php/Dockerfile

FROM php:7.4.1-fpm

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

# Composer install
COPY --from=composer:2.0 /usr/bin/composer /usr/bin/composer

# install Node.js
COPY --from=node:10.22 /usr/local/bin /usr/local/bin
COPY --from=node:10.22 /usr/local/lib /usr/local/lib

RUN apt-get update && \
  apt-get -y install \
  git \
  zip \
  unzip \
  vim \
  && docker-php-ext-install pdo_mysql bcmath && \
  pecl install xdebug && \
  docker-php-ext-enable xdebug

WORKDIR /var/www/html

1-3. php.ini

docker/php/php.ini

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
[xdebug]
xdebug.mode=debug
xdebug.start_with_request=yes
xdebug.client_host=host.docker.internal
xdebug.client_port=9003
xdebug.log=/tmp/xdebug.log
xdebug.log_level=0

1-4. Dockerfile（web）

docker/nginx/Dockerfile

FROM nginx:1.18-alpine

ENV TZ=UTC

# nginx config file
COPY ./docker/nginx/*.conf /etc/nginx/conf.d/

WORKDIR /var/www/html

1-5. default.conf

docker/nginx/default.conf

server {
    listen 80;

    root /var/www/html/public;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;

    charset utf-8;

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

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

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

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

1-6. Dockerfile（db）

docker/mysql/Dockerfile

FROM --platform=linux/x86_64 mysql:5.7

ENV TZ=UTC

COPY ./docker/mysql/my.cnf /etc/my.cnf

1-7. my.cnf

docker/mysql/my.cnf

[mysqld]
user=mysql
character_set_server = utf8mb4
collation_server = utf8mb4_unicode_ci

# timezone
default-time-zone = SYSTEM
log_timestamps = SYSTEM

# Error Log
log-error = mysql-error.log

# Slow Query Log
slow_query_log = 1
slow_query_log_file = mysql-slow.log
long_query_time = 1.0
log_queries_not_using_indexes = 0

# General Log
general_log = 1
general_log_file = mysql-general.log

[mysql]
default-character-set = utf8mb4

[client]
default-character-set = utf8mb4

1-8. .env

.env

WEB_PORT=80
DB_PORT=3306

DB_NAME=データベース名
DB_USER=ユーザー名
DB_PASSWORD=パスワード
DB_ROOT_PASSWORD=ルートパスワード

1-9. .gitignore

.gitignore

.env

1-10. Laravelインストール

local

$ docker compose build
$ docker compose up -d
$ docker-compose exec app bash
# composer create-project --prefer-dist "laravel/laravel=6.*" .

1-11. Vue.jsインストール

docker

# npm install -D vue
# npm install -D vue-template-compiler

2. 初期設定

2-1. APP_NAME

.env

APP_NAME=アプリケーション名

config/app.php

'name' => env('APP_NAME', 'アプリケーション名'),

2-2. タイムゾーン

config/app.php

- 'timezone' => 'UTC',
+ 'timezone' => 'Asia/Tokyo',

2-3. 言語設定

config/app.php

- 'locale' => 'en',
- 'faker_locale' => 'en_US',
+ 'locale' => 'ja',
+ 'faker_locale' => 'ja_JP',

2-4. DB文字コード

config/database.php

'mysql' => [
- 'charset' => 'utf8mb4',
- 'collation' => 'utf8mb4_unicode_ci',
+ 'charset' => 'utf8',
+ 'collation' => 'utf8_unicode_ci',
],

2-5. Modelsのディレクトリ構成変更

local

$ mkdir app/Models

app/Models/User.php

- namespace App;
+ namespace App\Models;

/app/Http/Controllers/Auth/RegisterController.php

use App\Http\Controllers\Controller;
- use App\User;
+ use App\Models\User;
use Illuminate\Foundation\Auth\RegistersUsers;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;

config/auth.php

     'providers' => [ 
         'users' => [ 
             'driver' => 'eloquent', 
-             'model' => App\User::class, 
+             'model' => App\Models\User::class, 
         ],

/config/services.php

    'stripe' => [
-        'model' => App\User::class,
+        'model' => App\Models\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
        'webhook' => [
            'secret' => env('STRIPE_WEBHOOK_SECRET'),
            'tolerance' => env('STRIPE_WEBHOOK_TOLERANCE', 300),
        ],
    ],

database/factories/UserFactory.php

- $factory->define(App\User::class, function (Faker $faker) {
+ $factory->define(App\Models\User::class, function (Faker $faker) {
    return [

composer.json

    "autoload": {
        "psr-4": {
            "App\\": "app/",
-           "Models\\": "app/"
+           "Models\\": "app/Models/"
        },

2-6. エラーメッセージ日本語化

config/app.phpのlocaleがjaになっていることを確認

local

$ cd resources/lang
$ mkdir ja
$ cd resources/lang/ja

local

$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/auth.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/pagination.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/passwords.php
$ curl -OL https://raw.githubusercontent.com/rito-nishino/Laravel-Japanese-Language-fileset/master/validation.php

2-7. Xdebug3

docker/php/Dockerfile

FROM php:7.4.1-fpm-alpine

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

# Composer install
COPY --from=composer:2.0 /usr/bin/composer /usr/bin/composer

# install Node.js
COPY --from=node:10.22 /usr/local/bin /usr/local/bin
COPY --from=node:10.22 /usr/local/lib /usr/local/lib

# alpine ベースのイメージでなければ autoconf gcc g++ make は不要
RUN apk update && \
    apk add \
    git \
    zip \
    unzip \
    vim \
    autoconf gcc g++ make && \
    docker-php-ext-install pdo_mysql bcmath && \
+   pecl install xdebug && \
+   docker-php-ext-enable xdebug

WORKDIR /var/www/html

docker/php/php.ini

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"
+ [xdebug]
+ xdebug.mode=debug
+ xdebug.start_with_request=yes
+ xdebug.client_host=host.docker.internal
+ xdebug.client_port=9003
+ xdebug.log=/tmp/xdebug.log
+ xdebug.log_level=0

local

$ docker-compose up -d --build

.vscode/launch.json

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceRoot}/src"
      },
    },
  ]
}

3. ライブラリ

local

$ docker-compose exec app bash

3-1. debagbar

docker

# composer require --dev barryvdh/laravel-debugbar --dev
# php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"
# php artisan cache:clear
# php artisan config:clear

3-2. doctrin/dbal

Laravel-IDE-HelperでModel のプロパティ補完を行う場合は doctrine/dbal が必要なのでインストール。

docker

# composer require "doctrine/dbal:2.*"

3-3. IDE-Helper

docker

# composer require --dev barryvdh/laravel-ide-helper:2.8.*
# php artisan ide-helper:generate
# php artisan ide-helper:models -N

3-4. Laravel Socialite

docker

# composer require laravel/socialite

config/services.php

<?php

return [
    // 略
    'ses' => [
        'key' => env('AWS_ACCESS_KEY_ID'),
        'secret' => env('AWS_SECRET_ACCESS_KEY'),
        'region' => env('AWS_DEFAULT_REGION', 'us-east-1'),
    ],
+
+   'google' => [
+       'client_id' => env('GOOGLE_CLIENT_ID'),
+       'client_secret' => env('GOOGLE_CLIENT_SECRET'),
+       'redirect' => env('APP_URL') . '/login/google/callback',
+   ],
+   'twitter' => [
+       'client_id' => env('TWITTER_CLIENT_ID'),
+       'client_secret' => env('TWITTER_CLIENT_SECRET'),
+       'redirect' => env('APP_URL') . '/login/twitter/callback',
+   ],
];

3-5. Laravel/ui vue

Laravel6系の場合、ver1.0をインストール

docker

# composer require laravel/ui:^1.0 --dev
# php artisan ui vue --auth
# npm install && npm run dev

app/Http/Controllers/Auth/RegisterController.php

- protected $redirectTo = '/home';
+ protected $redirectTo = '/';

app/Http/Controllers/Auth/LoginController.php

- protected $redirectTo = '/home';
+ protected $redirectTo = '/';

3-6. Laravel Mix

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css');
-   .sass('resources/sass/app.scss', 'public/css')
+   .version();

.gitignore

/node_modules 
+ /public/css
/public/hot 
+ /public/js
+ /public/mix-manifest.json
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.phpunit.result.cache
Homestead.json
Homestead.yaml
npm-debug.log
yarn-error.log

docker

# npm run watch-poll

resources/views/app.blade.php

<body>
+ <div id="app">
    @yield('content')
+ </div>
+
+ <script src="{{ mix('js/app.js') }}"></script>
  <!-- JQuery -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

4. 補足

4-1. 開発環境（FW/ツールのバージョンなど）

ツール	バージョン
Vue.js	2.6.14
jQuery	3.4.1
PHP	7.4.1
Laravel	6.20.43
MySQL	5.7.36
Nginx	1.18.0
Composer	2.0.14
npm	6.14.6
Git	2.33.1
Docker	20.10.11
docker-compose	v2.2.1
PHPUnit	8.0
CircleCI	2.1
heroku	7.59.4
MacBook Air	M1,2020
macOS	Monterey 12.3
Homebrew	3.3.8

4-2. ディレクトリ構造

【ルートディレクトリ】
├─ .circleci
│   └─ config.yml
├─ aws / CloudFormation
│   └─ ec2.yml
├─ docker
│   └─ mysql
│   └─ nginx
│   └─ php
│   └─ phpmyadmin
├─ src
│   └─ 【Laravelのパッケージ】
│─ .env
│─ .gitignore
└─ docker-compose.yml

Reference

shimotaroo/docker-laravel-vuejs-sample: Laravel6×Vue.js2のDocker環境サンプル(M1 Mac対応)

【導入編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel Chip対応〜 | yutaro blog

【前編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel Chip対応〜 | yutaro blog

【後編】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS Intel Chip対応〜 | yutaro blog

【M1 Mac版】絶対に失敗しないDockerでLaravel + Vue.jsの開発環境（LEMP環境）を構築する方法〜MacOS M1 Chip対応〜 | yutaro blog

phpMyAdmin on docker が便利すぎる - Qiita

M1Mac環境でDockerのMySQLを動かす - Qiita

Laraveの知識をアウトプットして、資産化してます - Qiit

Laravelをインストールしたらやっていること一覧 - Qiita

Docker X Laravel 初期設定 - Qiita

【Laravel】モデルのディレクトリ構成変更についてのメモ - Qiita

[Laravel 6] Modelsディレクトリを作る - Qiita

Laravelのバリデーションエラーメッセージを5分で日本語化する - Qiita

【Laravel】Docker環境にXdebug3を導入&VSCodeでデバッグ(M1対応) | yutaro blog

[laravel] doctrine/dbalを入れたのに「Class 'Doctrine\DBAL\Driver\PDOMySql\Driver' not found」と言われる - Qiita

【Laravel8】IDE補完ファイル作成パッケージ「barryvdh/laravel-ide-helper」の導入

[Laravel] IDEによるコード補完まとめ - Qiita

Laravel+Socialiteで簡単ソーシャルログイン実装! (テスト付き) - Qiita

Laravel SocialiteでGoogleログインを実現する

Laravel8 (laravel/ui)でのLogin機能の実装方法メモ - Qiita

Laravel Mixとは？webpackをより便利に、簡単に。Laravel以外でも使えるよ。 - Qiita

PHPとLaravelでEvernote風のメモアプリを作ってみよう！ | Techpit

Laravel(+Vue.js)でSNS風Webサービスを作ろう！ | Techpit