開発環境(Laravel + Next.js + TypeScript)をDockerで構築してみた

環境情報

ディレクトリ構成

todo
 ├── app/   　　// Next.jsのプロジェクトが入る
 ├── backend/  // Laravelのプロジェクトが入る
 ├── docker/
 │   ├── front/
 │   │   └── Dockerfile
 │   ├── mysql/
 │   │   ├── data/
 │   │   └── my.cnf
 │   ├── nginx/
 │   │   └── default.conf
 │   └── php/
 │       ├── Dockerfile
 │       └── php.ini
 └── compose.yml

開発環境

• PHP 8.2
• Laravel 10
• Nginx
• Node.js 22.3
• Next.js
• Typescript
• MySQL 8.2.0

compose.yml

compose.ymlファイルにコンテナの設定情報を記載します。

compose.yml

services:
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/

  php:
    build: ./docker/php
    volumes:
      - ./backend:/var/www/

  front:
    build: ./docker/front
    volumes:
      - ./app:/app
    environment: 
      - WATCHPACK_POLLING=true  #ホットリロード機能
    command: sh -c "npm run dev"
    ports:
      - "3000:3000"

  db:
    image: mysql:8.2.0
    ports:
      - 3306:3306
    volumes:
      - ./docker/mysql/data:/var/lib/mysql
      - ./docker/mysql/my.cnf:/etc/mysql/conf.d/my.cnf
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: todo_db
      MYSQL_USER: todo_user
      MYSQL_PASSWORD: todo_pass

Nginxの設定

default.conf

server {
    listen 80;
    index index.php index.html;
    server_name localhost;

    root /var/www/public;

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

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

PHPの設定

PHPイメージ作成のための設定を記述します。

Dockerfile

FROM php:8.2-fpm

COPY php.ini /usr/local/etc/php/

RUN apt-get update \
  && apt-get install -y default-mysql-client zlib1g-dev libzip-dev\
  && docker-php-ext-install pdo_mysql zip

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

WORKDIR /var/www

php.ini

[Date]
date.timezone = "Asia/Tokyo"

[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

Next.jsとTypescriptのインストール

appディレクトリ内にNext.jsのプロジェクトを作成します。

npx create-next-app . --ts

Next.jsの設定

フロントを動かすためにNode.jsのイメージを作成します。

Dockerfile

FROM node:22.13-alpine

WORKDIR /app

コンテナの作成と起動

ここまでの設定が完了したらイメージからコンテナを作成し起動させます。

docker compose up -d --build

DockerDesktopを確認し、全てのコンテナが正常に起動していることが確認できれば成功です。

Laravelのインストール

phpコンテナ内でLaravelのプロジェクトを作成します。

composer create-project laravel/laravel . "10.*" --prefer-dist

表示確認

Laravel

http://localhost/ にアクセスするとLaravelの初期画面が表示されました。

Next.js

http://localhost:3000/ にアクセスするとNext.jsの初期画面が表示されました。

おわり。