입문

Docker에 관해서는 이전에 현장에서 사용한 적이 있습니다
최소한의 명령을 아는 지식이기 때문에 이것Docker을 염두에 두고 개발 환경을 만들어 보자.

하고 싶은 일

docker-compose build && up 구축만 원하는 개발 환경

표고 항목 만들기

Docker 컨테이너를 만든 후에도 가능하지만 이번에는 루멘 프로젝트만 먼저 만듭니다.

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 컨테이너 시작

docker-compose.yml 파일이 있는 디렉터리에서 Vue.js x Laravel（lumen） 명령 실행

docker-compose build 명령으로 컨테이너 시작

docker-compose up -d 명령을 통해 시작 중인 컨테이너 확인

vue 프로젝트 만들기

docker ps 명령을 누르면 다음과 같은 시작 중인 용기 일람이 나타나기 때문에 앱에 로그인한 용기입니다.

docker ps 앱 용기 로그인

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

브라우저에서 액세스docker exec -it app bash하고 다음 화면이 표시되면 Vue입니다.Js의 준비는 OK입니다.

Nginx 및 MYSQL 동작 확인

Nginx + lumen

• 다음 화면이 표시되면 액세스http://localhost:8080/

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로 개발하면 편할 것 같아요.
※ 기사 참조
・"Docker를 Laravel+MySQL+Nginx로 빠르게 개발"
・"Docker-compose에서 MySQL 환경 구축 용이"
・Docker를 사용하여 Vue CLI3 개발 환경 구축