#はじめに
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 の環境構築をしました
- Dockerを使ってLaravel開発環境構築
- 5分で作るLaravel＋Vue.js開発環境（docker-compose）
- Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう
#ディレクトリ構成
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のパッケージは削除されているので注意。
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;
}
}
[参考]
##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にアクセスして正常に接続できることを確認する。
正常に接続できれば以下のような画面が表示される。
##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 ステキ!!