【개발 환경】

Windows 10 HOME

phpmyadmin 5

docker --version
Docker version 20.10.7, build f0df350

docker-compose --version
docker-compose version 1.29.2, build 5becea4c

php artisan --version
Laravel Framework 8.49.2

npm list vue
[email protected]

mysql --version
mysql  Ver 14.14 Distrib 5.7.34, for Linux (x86_64) using  EditLine wrapper

소개

Docker+Laravel+MySQL+phpmyadmin+Vue.js에서 SPA 웹 앱 작성을 공부하고 싶어서 Docker로 개발 환경 구축을 했습니다.

phpmyadmin도 포함한 Windows 버전의 기사가 의외로 없었기 때문에
비망록을 겸해 구축 순서를 기재합니다
기재 내용에 오류 등이 있으시면 지적 부탁드립니다.

또 대상은 Docker 초보자,
Docker Desktop 은 준비되어 있는 전제입니다.

컨테이너, 디렉토리 구성

docker-laravel-vue - 프로젝트 이름 (폴더 이름)

docker-laravel-vue 
├ docker-compose.yml
│- nginx
│ 　└ nginx.conf
│- php
│ 　└ Dockerfile
│　 ├ php.ini
│　 
└ server

1. 파일 준비

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

【Github】 에 소스를 올리고 있습니다.

docker-laravel-vue/dockerfile-compose.yml

version: '3'
services:
  nginx:
    image: nginx:latest
    ports:
      - 8080:80
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf
    #  - ./www/html:/var/www/html
      - ./server:/var/www
    depends_on:
      - php

  php:
    build: ./php
    volumes:
    #  - ./www/html:/var/www/html
        - ./server:/var/www
    depends_on:
      - db

  db:
    image: mysql:5.7
    container_name: db-host
    ports:
      - 13306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
    environment:
        MYSQL_DATABASE: laravel_db
        MYSQL_ROOT_PASSWORD: password

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:5
    ports:
      - 8888:80
    depends_on:
      - db

docker-compose.yml의 경우
아래의 기사가 매우 엉망이었습니다.

docker-compose.yml을 작성하는 방법에 대해 설명했습니다.

docker-laravel-vue\nginx\nginx.conf

server {
  listen 80;
  server_name _;

  #root  /var/www/html;
  root /var/www/laravel/public;
  index index.php index.html;

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

  location / {
    root /var/www/laravel/public;
    index  index.html index.php;
    try_files $uri $uri/ /index.php$query_string;
  }

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

docker-laravel-vue\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"

docker-laravel-vue\php\php.ini

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

2. docker 컨테이너 빌드 및 시작

docker-compose build
docker-compose up -d

아래와 같은 문장이 터미널 내에 표시되면, 기동은 성공입니다.

Creating db-host ... done
Creating laravel-vue_php_1        ... done
Creating laravel-vue_phpmyadmin_1 ... done
Creating laravel-vue_nginx_1      ... done

3. php 컨테이너에 들어가서 laravel 프로젝트 만들기

docker-compose exec php bash
composer create-project --prefer-dist laravel/laravel laravel "8.*"

laravel이라는 프로젝트 이름으로 작성.
버전은 "8"을 지정.

4. docker 컨테이너 정지

docker-compose down

5. laravel .env 파일 편집

server\laravel\.env

DB_CONNECTION=mysql
DB_HOST=db-host
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=root
DB_PASSWORD=password

6. 컨테이너 시작

docker-compose up -d

docker는 어디에 파일을 수정하는지에
흐르는 명령이 다릅니다.
아래의 기사가 매우 참고가 되었습니다.

· 초보자 용 docker-compose 명령 역방향

7. 로컬 호스트 연결

여기서 localhost에 연결해도
아래와 같은 에러가 나온다고 생각합니다.
http://localhost-8080.com/

The stream or file "/var/www/laravel/storage/logs/laravel.log" could not be opened in append mode: failed to open stream: Permission denied 

php 컨테이너에 들어가
storage 폴더의 권한을 변경합니다.

docker-compose exec php bash

chmod -R 777 laravel/storage

laravel 화면이 안전하게 표시되었습니다.

그리고 laravel하에
php artisan migrate를 수행합니다.

cd laravel/
php artisan migrate

phpmyadmin에 연결
laravel_db 데이터베이스에 네 개의 테이블이 생성됩니다.

id : root
ps: password

http://localhost:8888

9. Vue.js 도입

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

이제 개발 구축 절차는 이상입니다.

VSCode에서 Docker의 추천 확장 프로그램

· vscode-docker
이미지 및 컨테이너 관리

· Remote Development
원격 환경에 연결하여 대상 소스 및 리소스로 개발 및 실행

· Remote-Containers
Conrainer에 연결 (RemoteSSH와 결합, 위의 vscode-docker와 결합 가능)

・Japanese Language Pack for Visual Studio Code
VSCode가 일본어화

참고

・Laravel+MySQL+Vue.js의 개발 환경을 Docker로 구축
· Docker를 사용하여 Laravel 개발 환경 구축
· 초보자 용 docker-compose 명령 역방향
· Docker로 PHP 환경 만들기 (mac)