DockerでPHP 8.4/Nginx + Node 22 + MySQL環境を構築する方法

Last updated at 2025-01-05Posted at 2025-01-02

概要

チーム開発で重要なのは、全員が同じ環境で作業できることです。本記事では、Dockerを活用して、PHP 8.4、Nginx、Node.js 22、MySQLを連携させた統一開発環境を構築する方法を解説します。Docker Composeを使用して、環境構築を効率化し、Laravelやフロントエンドの実行に最適なベース環境を整えます。

目的

開発環境の統一

チーム開発において、全員が同じ環境で開発を進めるための基盤を構築すること。
各メンバーのローカル環境やOSに依存しない、一貫した開発環境を提供。

コンテナ化によるスムーズなプロジェクトセットアップ

新しいメンバーが簡単に開発環境を構築できるようにする。
セットアップの時間を削減し、即座に開発に取り掛かれる環境を提供。

開発と本番環境のギャップを解消

Dockerを使用することで、本番環境とほぼ同じ環境での開発を実現。
環境差異による動作不具合を防ぎ、よりスムーズなデプロイを可能に。

LaravelやVue.jsを利用したプロジェクトの基盤構築

LaravelやVue.jsを含むモダンなアプリケーション開発のために、必要なバックエンド・フロントエンドの基盤を提供。
特にPHPとNode.jsを組み合わせることで、フルスタック開発を効率化。

前提条件

Macを使用していること
- 本記事はMac環境を前提に手順を記載しています。他のOSをご利用の場合、適宜読み替えてください。(WindowsだとWSL想定)
DockerとDocker Composeがインストールされていること
- Docker DesktopまたはDocker Engineがローカルマシンにインストールされている必要があります。
- Docker Composeのバージョンが最新であることを確認してください。なるだけ現在最新のミドルウェアのコンテナで作成したい。

具体的な手順

構成

Dockerを使ってPHP、Node.js、MySQLの開発環境を構築します。最終的に、srcディレクトリ（アプリケーションのコードを配置）をweb（バックエンド）とnode（フロントエンド）のコンテナにマウントし、サーバーを起動します。

rootdir
  ├─ docker
  │    ├─ backend
  │    │   ├─ default.conf
  │    │   └─ Dockerfile
  │    ├─ db
  │    |   └─ my.cnf
  │    ├─ frontend
  │    │   └─ Dockerfile
  │    └─ docker-compose.yml
  └─ src
       └─ laravel11+vue3+typescript+inertiaを置く予定

docker共通部分

`rootdir/docker/docker-compose.yml`

この設定ファイルでは、以下を実現します：

バックエンド（web）: ポート80で公開（localhostにポート番号をつけたくないため）。
フロントエンド（node）: Viteサーバーのデフォルトポート（5173）で公開。
共通: srcディレクトリをコンテナ内にマウント。

docker-compose.yml

version: '3.9'

services:
  backend:
    build:
      context: ./backend
    container_name: backend-container
    volumes:
      - ../src:/var/www/html
    ports:
      - "80:80"
    depends_on:
      - db

  frontend:
    build:
      context: ./frontend
    container_name: frontend-container
    working_dir: /var/www/html
    ports:
      - "5173:5173"
    volumes:
      - ../src:/var/www/html

  db:
    image: mysql:latest
    container_name: db-container
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: laravel
      MYSQL_USER: laravel
      MYSQL_PASSWORD: laravel
    volumes:
      - db_data:/var/lib/mysql
      - ./mysql/my.cnf:/etc/mysql/my.cnf

volumes:
  db_data:

backend

`rootdir/backend/default.conf`

Nginxの設定：

Laravelの/publicディレクトリをドキュメントルートとして指定。
PHPリクエストをphp-fpmに転送。

default.conf

server {
    listen 80;
    server_name localhost;

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

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

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

    location ~ /\.ht {
        deny all;
    }
}

`rootdir/backend/Dockerfile`

PHPコンテナの設定：

必要なライブラリやツールをインストール。
Nginxの設定ファイルを配置し、php-fpmとNginxを実行。

FROM php:8.4-fpm

RUN apt-get update && apt-get install -y \
    nginx \
    procps \
    curl \
    zip \
    unzip \
    git \
    libpng-dev \
    libonig-dev \
    libxml2-dev \
    libzip-dev \
    && docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd zip

COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

COPY default.conf /etc/nginx/conf.d/default.conf

WORKDIR /var/www/html

CMD ["sh", "-c", "php-fpm & nginx -g 'daemon off;'"]

db

`rootdir/db/my.cnf`

MySQLの設定：

デフォルトのSQLモードを変更し、開発環境向けの設定を適用。

my.cnf

[mysqld]
sql_mode=NO_ENGINE_SUBSTITUTION,STRICT_TRANS_TABLES

frontend

`rootdir/frontend/Dockerfile`

Node.jsコンテナの設定：

必要なツールをインストール。
コンテナ起動時にnpm installとnpm run devを実行。

FROM node:22

WORKDIR /var/www/html

RUN apt-get update && apt-get install -y \
    git \
    && apt-get clean

CMD ["sh", "-c", "npm install && npm run dev"]

ポイント

共通ボリュームのマウント: srcディレクトリをバックエンド（PHP）とフロントエンド（Node.js）のコンテナにマウントすることで、ファイルの変更が即座に反映されます。
シンプルなプロセス管理: 必要最低限のインストールと設定で軽量なコンテナ構成を実現。

これで、効率的な開発環境が整います！

確認

ここまでの構築が正しく動作するか確認します。
注意: srcにLaravelやVueのプロジェクトがまだインストールされていない場合、この手順をスキップすると動作しません。
LaravelやVueのインストール後にエラーが発生すると、切り分けが難しくなるため、まずはテスト的なファイルを作成して動作確認を行います。

rootdir
  ├─ docker
  │    └─ 省略
  └─ src
       ├─ public
       |     └─ index.php
       ├─ package.json
       └─ server.js

以下をコピペして、それぞれのファイルを作成してください。

`rootdir/src/public/index.php`

index.php

<?php
echo "Docker PHP web service is running!";

`rootdir/src/package.json`

package.json

{
    "name": "docker-test",
    "version": "1.0.0",
    "scripts": {
        "start": "node server.js",
        "dev": "node server.js"
    }
}

`rootdir/src/server.js`

server.js

const http = require("http");

const server = http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Docker Node.js service is running!");
});

server.listen(5173, () => {
    console.log("Server running at http://localhost:5173/");
});

コンテナ起動

以下のコマンドを実行して、コンテナを起動します。

$ cd docker
$ docker-compose up -d --build

起動が成功すると、以下のような出力が表示されます：

Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Creating node-container  ... done
Creating mysql-container ... done
Creating web-container   ... done

コンテナ状態の確認

以下のコマンドで、3つのコンテナが正常に起動しているか確認します。

$ docker ps

出力例：

CONTAINER ID   IMAGE             COMMAND                  CREATED         STATUS         PORTS                               NAMES
627c292091eb   docker_backend    "docker-php-entrypoi…"   8 minutes ago   Up 8 minutes   0.0.0.0:80->80/tcp, 9000/tcp        backend-container
e904c72e9ecc   docker_frontend   "docker-entrypoint.s…"   8 minutes ago   Up 8 minutes   0.0.0.0:5173->5173/tcp              frontend-container
39307e73f8c9   mysql:latest      "docker-entrypoint.s…"   8 minutes ago   Up 8 minutes   0.0.0.0:3306->3306/tcp, 33060/tcp   db-container

トラブルシューティング

コンテナが起動していない場合

以下のコマンドで、対象のコンテナのログを確認します。

$ docker logs <コンテナ名>

例: フロントエンドコンテナのログ確認

$ docker logs frontend-container  

up to date, audited 1 package in 518ms

found 0 vulnerabilities
npm error Missing script: "dev"
npm error
npm error To see a list of scripts, run:
npm error   npm run
npm error A complete log of this run can be found in: /root/.npm/_logs/2025-12-29T07_56_38_624Z-debug-0.log

エラーが出力された場合、問題箇所を修正します。

コンテナを再起動

修正後、以下のコマンドで全てのコンテナを停止し、再度起動します。

$ docker-compose down
$ docker-compose up -d --build

表示結果

bakcend

http://localhost にアクセスして、以下のメッセージが表示されれば成功です。

frontend

http://localhost:5173 にアクセスして、以下のメッセージが表示されれば成功です。

まとめ

ここまでで、Dockerを使ったPHP、Node.js、MySQLの統一開発環境を構築し、動作確認までを行いました。この手順を通じて、以下のポイントを押さえることができました：

Dockerを利用した一貫した環境構築
- PHP 8.4、Node.js 22、MySQLといった最新技術を簡単に連携。
- チーム全体で同じ環境を共有し、開発効率を向上。
コンテナごとの役割分担
- バックエンド（web）とフロントエンド（node）、データベース（db）を個別のコンテナで管理することで、柔軟性を確保。
動作確認の重要性
- LaravelやVue.jsをインストールする前に、最小限の構成でコンテナが正常動作することを確認。
- エラー発生時の切り分けを容易にするプロセスを学習。

Dockerを使うことで、開発と本番環境のギャップを減らし、安定した開発基盤を構築できます。この基盤があれば、新しいメンバーがすぐに作業を始められる環境を提供でき、チーム全体の生産性を向上させることができます。

次の記事の紹介

ここまでで基盤となるDocker環境が整いました。次の記事では、実際にLaravel 11とVue 3、TypeScript、Inertia.jsを使ったモダンなフルスタック開発環境を構築していきます。

次の記事はこちら：
Laravel 11 + Inertia.js + Vue 3 + TypeScriptでモダンなフルスタック環境を構築

この記事では、以下のポイントを解説予定です：

LaravelとVueのインストール
TypeScriptによる型安全なフロントエンド開発
Inertia.jsを使ったシームレスなバックエンド連携

引き続き良かったら読んでください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

DockerでPHP 8.4/Nginx + Node 22 + MySQL環境を構築する方法

概要

目的

開発環境の統一

最新の技術スタックで効率的な開発を実現

コンテナ化によるスムーズなプロジェクトセットアップ

開発と本番環境のギャップを解消

LaravelやVue.jsを利用したプロジェクトの基盤構築

前提条件

具体的な手順

構成

docker共通部分

rootdir/docker/docker-compose.yml

backend

rootdir/backend/default.conf

rootdir/backend/Dockerfile

db

rootdir/db/my.cnf

frontend

rootdir/frontend/Dockerfile

ポイント

確認

rootdir/src/public/index.php

rootdir/src/package.json

rootdir/src/server.js

コンテナ起動

コンテナ状態の確認

トラブルシューティング

コンテナが起動していない場合

例: フロントエンドコンテナのログ確認

コンテナを再起動

表示結果

bakcend

frontend

まとめ

次の記事の紹介

`rootdir/docker/docker-compose.yml`

`rootdir/backend/default.conf`

`rootdir/backend/Dockerfile`

`rootdir/db/my.cnf`

`rootdir/frontend/Dockerfile`

`rootdir/src/public/index.php`

`rootdir/src/package.json`

`rootdir/src/server.js`