Dockerを使ってnginx + Laravel(lumen) + MySQL + Vue.jsの開発環境を構築する

15547 ワード
MySQL Vue.js lumen Docker Laravel MySQL テキストリンク

はじめに

Dockerに関しては、これまで現場で使ってはいたのですが
最低限のコマンドを知ってる程度の知識なので、これを気にDockerで開発環境を作ってみます。

やりたいこと

docker-compose build && upだけでVue.js x Laravel（lumen）の開発環境を構築したい

Laravel（lumen）のプロジェクトを作成

Dockerコンテナを作った後でも良いのですが、今回は先にlumenだけプロジェクトを作成してしまいます。

cd var/www
composer create-project --prefer-dist laravel/lumen backend

ディレクトリ構造

root/
├ Docker/
　　└mysql/
　　　└conf.d/
　　　　└my.cnf
　　　└initdb.d/
　　　　└schema.sql
　　　　└testdata.sql
　　　└mysql_data/
　　　└Dockerfile
　　└nginx/
　　　└conf/
　　　　└default.conf
　　　└Dockerfile
　　└php/
　　　└Dockerfile
　　　└php.ini
　　└vue/
　　　└Dockerfile
├ var/
　　└www/
　　　└backend/（Lumen）
　　　└frontend/（Vue）
├ docker-compose.yml

docker-compose.ymlを書く

version: '3'

services:

    frontend:
      container_name: app
      build: ./Docker/vue
      ports:
        - 8080:8080
      volumes:
        - "./var/www/:/www"
      working_dir: /www
      tty: true

    backend:
      container_name: php
      build: ./Docker/php
      volumes:
        - ./var/www/backend:/var/www/backend
      working_dir: /var/www/backend

    nginx:
      image: nginx
      container_name: web
      volumes:
        - ./Docker/nginx/conf/default.conf:/etc/nginx/conf.d/default.conf
        - ./var/www/backend/public:/var/www/backend/public
      ports:
        - 80:80
      links:
        - backend
      depends_on:
        - backend

    mailhog:
      image: mailhog/mailhog
      container_name: mailhog
      ports:
        - "8025:8025"

    mysql:
      build: ./Docker/mysql
      container_name: db
      environment:
        MYSQL_ROOT_PASSWORD: root
        MYSQL_DATABASE: データベース名
        TZ: 'Asia/Tokyo'
      volumes:
        - ./Docker/mysql/initdb.d:/docker-entrypoint-initdb.d
        - ./Docker/mysql/conf.d:/etc/mysql/conf.d
        - ./Docker/mysql/mysql_data:/var/lib/mysql
      ports:
      - 3306:3306
    phpmyadmin:
      image: phpmyadmin/phpmyadmin
      container_name: phpmyadmin
      environment:
        - PMA_ARBITRARY=1
        - PMA_HOST=mysql
        - PMA_USER=root
        - PMA_PASSWORD=root
      links:
        - mysql
      ports:
        - 1234:80
      volumes:
        - /sessions

php.ini

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

Vue.jsのDockerfileの記述

FROM node:12.4
RUN yarn global add @vue/cli

phpのDockerfile + 設定ファイルの記述

Dockerfile

FROM php:7.2-fpm
COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y zlib1g-dev mysql-client \
  && docker-php-ext-install zip pdo_mysql

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php -r "if (hash_file('sha384', 'composer-setup.php') === '48e3236262b34d30969dca3c37281b3b4bbe3221bda826ac6a9a62d6444cdb0dcd0615698a5cbe587c3f0fe57a54d8f5') { 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

nginxの設定ファイルの記述

server {
    listen       0.0.0.0:80;
    server_name  localhost;
    charset      utf-8;

    root /var/www/backend/public;

    index index.php;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

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

mysqlのDockerfile + 設定ファイルの記述

Dockerfile

FROM mysql:8.0.16

my.cnf

[mysqld]
default_authentication_plugin= mysql_native_password
explicit-defaults-for-timestamp=1
general-log-file=/var/log/mysql/mysqld.log

Dockerコンテナの立ち上げ

  1. docker-compose.ymlファイルの置かれているディレクトリでdocker-compose buildコマンドを実行
  2. docker-compose up -dコマンドでコンテナの立ち上げ
  3. docker psコマンドで起動中のコンテナの確認

vueプロジェクトの作成

docker psコマンドを叩くと下記のように起動中のコンテナ一覧が出てくるので、appのコンテナにログインします。

  • docker exec -it app bashでappコンテナにログイン
CONTAINER ID        IMAGE                         COMMAND                  CREATED             STATUS              PORTS                               NAMES
a2bbaa89bbc5        phpmyadmin/phpmyadmin         "/run.sh supervisord…"   4 seconds ago       Up 1 second         9000/tcp, 0.0.0.0:1234->80/tcp      phpmyadmin                     
e5fd26c9cb2a        nginx                         "nginx -g 'daemon of…"   4 seconds ago       Up 2 seconds        0.0.0.0:80->80/tcp                  web                  
0f76affe0dff        backend                       "docker-php-entrypoi…"   5 seconds ago       Up 3 seconds        9000/tcp                            php                   
aa42cbbb3859        mysql                         "docker-entrypoint.s…"   5 seconds ago       Up 3 seconds        0.0.0.0:3306->3306/tcp, 33060/tcp   db                   
62934d71fb1e        frontend                      "docker-entrypoint.s…"   5 seconds ago       Up 3 seconds        0.0.0.0:8080->8080/tcp              app                   
aca66fbeb310        mailhog/mailhog               "MailHog"                5 seconds ago       Up 3 seconds        1025/tcp, 0.0.0.0:8025->8025/tcp    mailhog

・www直下のディレクトリに居ることを確認後、vueプロジェクトを作成

vue create frontend
※設定を聞かれるので、各々の環境に合わせて回答してください

・プロジェクトの作成が終わったら、サーバーを立ち上げます

cd frontend
npm run serve もしくは yarn serve

ブラウザでhttp://localhost:8080/にアクセスして下記画面が表示されたらVue.jsの準備はOKです

NginxとMYSQLの動作確認

Nginx + lumen

・次にhttp://localhost:80にアクセスし、下記画面が表示されればOKです

MySQL

・下記コマンドでデータベースのコンテナにログイン

docker exec -it db bash
# ログイン後
mysql -u root -p
# パスワードはdocker-compose.ymlをいじってなければpass
show databases
# docker-compose.ymlで設定したデータベース名が表示されてればOK

他に、shcema.sql・testdata.sqlに記述をしてた場合はテーブルが作成されてるか等も合わせて確認

以上、こんな感じで出来ました！

Docker初心者が作ったものなので、もっと良い方法があるかもしれませんが
ちゃんと動いたので今回はここまで！

まとめ

思ったより手こずったけど、やっぱDocker使って開発できると楽だよね

※参考記事
・「Laravel+MySQL+NginxでさくっとDocker開発立ち上げる」
・「docker-compose でMySQL環境簡単構築」
・「Dockerを使ってVue CLI 3 の開発環境を構築する」