Docker+Laravel+MySQL+phpmyadmin+Vue.jsの開発環境を構築 (Windows)

11824 ワード
phpMyadmin Vue.js Laravel docker-compose Docker phpMyadmin テキストリンク

【開発環境】

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のWebアプリ作成の勉強をしたくて、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/

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　のデータベース中にテーブルが4つ作成されます。

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
ImageやContainerの管理

・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）