＜Docker＞XAMPP環境のPHP(Laravel/Vue3/Inertia.js/Vite.js)をDockerに移行する

PHP(Laravel)をXAMPP環境からDocker環境に移行します。XAMPPしか触ったことがない、Dockerで構築するにはWEBサーバやデータベースを準備する必要があるけど良くわからない、という方に見ていただけると幸いです。

この記事が対象とする環境
ホスト（HOST）　※実行マシン
Windows
Docker Desktop v4.22.1
ゲスト（GUEST）※Dockerコンテナ
nginx v1.25.2
mariadb v11.0
PHP v8.3-fpm
PHP
Laravel
Vue3
Inertia.js
Vite.js

＜XAMPP＞
1. XAMPPの問題
2. XAMPPの構成
＜Docker＞

＜XAMPP＞

XAMPPの問題

XAMPPだけを使用して環境を構築する場合、以下のような不満があります。

WEBサーバはApache限定になり、Nginxなどに変更することができない。
DBがMariaDB(旧版はMySQL)限定になり、PostgreSQLなどに変更できない。
DBが割と頻繁に破損し、復旧のために無駄な時間が発生する。

XAMPPの構成

一般的には「your root」がCドライブ直下になることが多いと思います。そして「htdocs」配下にプロジェクトごとのフォルダを作成し、PHPで作成したソースを配置する形になります。

c:\
`-- xampp
   |-- htdocs
   |    `-- your source　★移行元
   |-- apache
   |-- mysql
   |-- php
   `-- ・・・

＜Docker＞

Dockerの構成

c:
`-- docker-projects
    `-- [project]
        |-- compose.yaml
        |-- source
        |    `-- ★移行先
        `-- docker
            |-- app
            |    |-- Dockerfile
            |    `-- php.ini
            |-- mariadb
            `-- nginx
                `-- default.conf

<docker>compose.yaml

c:\docker-projects\[project]\compose.yaml

services:
  #WEBサーバー
  nginx:
    #イメージ+バージョン ※latestを常に最新が適用されるが意図しない挙動になる可能性あり
    image: nginx:1.25.2
    #コンテナ名
    container_name: nginx
    depends_on:
      - app
    #ポート(外部ポート:内部ポート)
    ports:
      - 8080:80
    volumes:
      #nginx設定ファイル(ローカルフォルダ:コンテナフォルダ)
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./source/:/var/www/html
  #アプリケーション
  app:
    container_name: app
    build: ./docker/app
    volumes:
      #ソース(ローカルフォルダ:コンテナフォルダ)
      - ./source/:/var/www/html
      - /src/node_modules
      - /src/vendor
      - ./docker/app/php.ini:/usr/local/etc/php/php.ini
    ports:
      - 5173:5173 #viewサーバーのポート
  #データベース
  mariadb:
    #イメージ+バージョン ※latestを常に最新が適用されるが意図しない挙動になる可能性あり
    image: mariadb:11.0
    #コンテナ名
    container_name: mariadb
    #設定
    environment:
      #rootスーパーユーザーのパスワード
      MARIADB_ROOT_PASSWORD: root
      #データベース名
      MARIADB_DATABASE: "xxx"
      #接続ユーザー名
      MARIADB_USER: "xxx"
      #接続パスワード
      MARIADB_PASSWORD: "xxx"
      #タイムゾーン
      TZ: "Asia/Tokyo"
    volumes:
      #永続化(ローカルフォルダ:コンテナフォルダ) ※永続化することでコンテナ停止してもデータが消失しない
      - ./docker/mariadb/data:/var/lib/mysql
      #DB初期設定(フォルダ内の拡張子.cnfのファイルをアルファベット順に実行)
      #ボリュームが永続化されており、2回目以降の起動の場合は実行されない
      - ./docker/mariadb/cnf:/etc/mysql/conf.d
      #コンテナ起動時の実行SQL(フォルダ内の拡張子.sh/.sql/.sql.gzのファイルをアルファベット順に実行)
      #ボリュームが永続化されており、2回目以降の起動の場合は実行されない
      - ./docker/mariadb/sql:/docker-entrypoint-initdb.d
    #ポート(外部ポート:内部ポート)
    ports:
      - 3306:3306

<nginx>default.conf

c:\docker-projects\[project]\nginx\default.conf

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    root /var/www/html/public;
	index index.html index.htm index.php;

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

    location ~ \.php$ {
        root /var/www/html/public;
        fastcgi_pass   app:9000;
        fastcgi_index  index.php;
        fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
        include        fastcgi_params;
    }
}

<php>Dockerfile

c:\docker-projects\[project]\app\Dockerfile

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

RUN apt-get update \
  && apt-get install -y \
  zlib1g-dev \
  mariadb-client \
  vim \
  libzip-dev

RUN docker-php-ext-install zip pdo_mysql

#Composer install
RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
RUN php composer-setup.php
RUN php -r "unlink('composer-setup.php');"
RUN mv composer.phar /usr/local/bin/composer

# install Node.js
COPY --from=node:20.10.0 /usr/local/bin /usr/local/bin
COPY --from=node:20.10.0 /usr/local/lib /usr/local/lib

ENV COMPOSER_ALLOW_SUPERUSER 1
ENV COMPOSER_HOME /composer
ENV PATH $PATH:/composer/vendor/bin

WORKDIR /var/www/html

RUN composer global require "laravel/jetstream"

ソース配置

最初にソースを配置します。XAMMPのhtdocsから持ってきても良いですし、gitから取得しなおしても良いです。最終的にはこのsourceフォルダのソースが、dockerコンテナ内とバインドされる形になります。

cd c:\docker-projects\[project]\source

git clone -b [branch] [git-clone-url] .

Docker起動

DockerDesktopを起動し、compose.yamlが有るフォルダでコンテナを作成します。

cd c:\docker-projects\[project]

docker-compose up -d
[+] Running 3/3
 ✔ Container mariadb  Started                                                                                                                                                                    0.5s 
 ✔ Container app      Started                                                                                                                                                                    0.5s 
 ✔ Container nginx    Started

コンテナに接続し、ビルドする

あとは通常の開発方法と同じで、npmインストールや、Vueのビルドを行います。Viteサーバを起動する場合は「npm run dev」です。マイグレーションも忘れずに行いましょう。

docker exec -it app /bin/bash

npm install

npm run build

動作確認

ブラウザで「http://localhost:8080/」に接続すると対象アプリが表示されます。