【Laravel+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする

動画で解説を見る

1 開発環境
2 DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする手順
3 動作テスト
4 まとめ

開発環境

Visual Studio Code:version 1.73.0
OS:Windows10
Docker Engine:v23.0.5

DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする手順

DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする手順について解説していきます。

ディレクトリ構成

今回のディレクトリ構成は下記を目指していきます。

project-root/
├── docker/
│   ├── frontend/       # Next.js用Dockerfile
│   ├── backend/        # Laravel用Dockerfile
│   ├── database/       # MySQLコンテナ(Dockerfile)
│   └── nginx/          # Nginxコンテナ(Dockerfile + 設定ファイル)
├── frontend/           # Next.jsプロジェクト
├── backend/            # Laravelプロジェクト
└── docker-compose.yml

project-root/

├── docker/

│ ├── frontend/ # Next.js用Dockerfile

│ ├── backend/ # Laravel用Dockerfile

│ ├── database/ # MySQLコンテナ(Dockerfile)

│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル)

├── frontend/ # Next.jsプロジェクト

├── backend/ # Laravelプロジェクト

└── docker-compose.yml

最初に必要なディレクトリを作成しておいてください。

docker-compose.ymlを作成

まずはdocker-compose.ymlを作成していきます。

ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: laravel_backend
    volumes:
      - ./backend:/var/www/html
    ports:
      - "9000:9000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: laravel_backend

volumes:

- ./backend:/var/www/html

ports:

- "9000:9000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

PHPコンテナを作成

次にPHPコンテナを作成していきます。

docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM php:8.2-fpm

WORKDIR /var/www/html

COPY ./backend .

RUN apt-get update
RUN apt-get install -y \
    zip unzip curl \
    && docker-php-ext-install pdo pdo_mysql

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

FROM php:8.2-fpm

WORKDIR /var/www/html

COPY ./backend .

RUN apt-get update

RUN apt-get install -y \

zip unzip curl \

&& docker-php-ext-install pdo pdo_mysql

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

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

MySQLコンテナを作成

次にMySQLコンテナを作成していきます。

docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM mysql:8.0

1	FROM mysql:8.0

Nginxコンテナを作成

次にNginxコンテナを作成していきます。

docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM nginx:alpine
COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

1 2	FROM nginx:alpine COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf

docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。

server {
    listen 80;
    server_name localhost;

    # --------------------------------------------------
    # Laravel用のroot（APIエンドポイントにのみ使う）
    # --------------------------------------------------
    root /var/www/html/public;
    index index.php index.html;

    # --------------------------------------------------
    # Next.js へのプロキシ（例: http://localhost/）
    # --------------------------------------------------
    location / {
        proxy_pass http://next_frontend:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }

    # --------------------------------------------------
    # Laravel APIへのルーティング（例: http://localhost/api/test）
    # --------------------------------------------------
    location ^~ /api/ {
        try_files $uri $uri/ /index.php?$query_string;
    }

    # --------------------------------------------------
    # PHPファイルの実行（FastCGI で Laravel を処理）
    # --------------------------------------------------
    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass laravel_backend:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

server {

listen 80;

server_name localhost;

# --------------------------------------------------

# Laravel用のroot（APIエンドポイントにのみ使う）

# --------------------------------------------------

root /var/www/html/public;

index index.php index.html;

# --------------------------------------------------

# Next.js へのプロキシ（例: http://localhost/）

# --------------------------------------------------

location / {

proxy_pass http://next_frontend:3000;

proxy_http_version 1.1;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection 'upgrade';

proxy_set_header Host $host;

proxy_cache_bypass $http_upgrade;

}

# --------------------------------------------------

# Laravel APIへのルーティング（例: http://localhost/api/test）

# --------------------------------------------------

location ^~ /api/ {

try_files $uri $uri/ /index.php?$query_string;

}

# --------------------------------------------------

# PHPファイルの実行（FastCGI で Laravel を処理）

# --------------------------------------------------

location ~ \.php$ {

include fastcgi_params;

fastcgi_pass laravel_backend:9000;

fastcgi_index index.php;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

}

Next.jsプロジェクトとLaravelプロジェクトの作成

次にNext.jsプロジェクトとLaravelプロジェクトの作成をしていきます。

まずは以下のコマンドでプロジェクトディレクトリに移動します。

cd project-root

1	cd project-root

以下のコマンドでコンテナをビルドします。

docker-compose build

1	docker-compose build

以下のコマンドでNext.jsプロジェクトを作成します。

docker-compose run --rm frontend sh -c 'npx create-next-app .'

1	docker-compose run --rm frontend sh -c 'npx create-next-app .'

以下のコマンドでLaravelプロジェクトを作成します。

docker-compose run --rm backend sh -c 'composer create-project laravel/laravel .'

1	docker-compose run --rm backend sh -c 'composer create-project laravel/laravel .'

docker-compose.ymlを修正

次にdocker-compose.ymlを修正していきます。

ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: docker/frontend/Dockerfile
    container_name: next_frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/var/www/html
    command: npm run dev
    depends_on:
      - nginx
    networks:
      - app-network

  backend:
    build:
      context: .
      dockerfile: docker/backend/Dockerfile
    container_name: laravel_backend
    volumes:
      - ./backend:/var/www/html
    ports:
      - "9000:9000"
    depends_on:
      - db
    networks:
      - app-network

  nginx:
    build:
      context: .
      dockerfile: docker/nginx/Dockerfile
    container_name: nginx_proxy
    ports:
      - "80:80"
    volumes:
      - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./backend:/var/www/html
    depends_on:
      - backend
    networks:
      - app-network

  db:
    build:
      context: .
      dockerfile: docker/database/Dockerfile
    container_name: mysql_db
    environment:
      MYSQL_DATABASE: app_db
      MYSQL_ROOT_PASSWORD: root
      MYSQL_USER: user
      MYSQL_PASSWORD: password
    ports:
      - "3306:3306"
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

version: '3.8'

services:

frontend:

build:

context: .

dockerfile: docker/frontend/Dockerfile

container_name: next_frontend

ports:

- "3000:3000"

volumes:

- ./frontend:/var/www/html

command: npm run dev

depends_on:

- nginx

networks:

- app-network

backend:

build:

context: .

dockerfile: docker/backend/Dockerfile

container_name: laravel_backend

volumes:

- ./backend:/var/www/html

ports:

- "9000:9000"

depends_on:

- db

networks:

- app-network

nginx:

build:

context: .

dockerfile: docker/nginx/Dockerfile

container_name: nginx_proxy

ports:

- "80:80"

volumes:

- ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf

- ./backend:/var/www/html

depends_on:

- backend

networks:

- app-network

db:

build:

context: .

dockerfile: docker/database/Dockerfile

container_name: mysql_db

environment:

MYSQL_DATABASE: app_db

MYSQL_ROOT_PASSWORD: root

MYSQL_USER: user

MYSQL_PASSWORD: password

ports:

- "3306:3306"

volumes:

- db_data:/var/lib/mysql

networks:

- app-network

volumes:

db_data:

networks:

app-network:

driver: bridge

PHPコンテナを作成

次にPHPコンテナを修正していきます。

docker/backend/ディレクトリの直下にDockerfileを以下のように修正してください。

FROM php:8.2-fpm

WORKDIR /var/www/html

COPY ./backend .

RUN apt-get update
RUN apt-get install -y \
    zip unzip curl \
    && docker-php-ext-install pdo pdo_mysql

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

RUN composer install

FROM php:8.2-fpm

WORKDIR /var/www/html

COPY ./backend .

RUN apt-get update

RUN apt-get install -y \

zip unzip curl \

&& docker-php-ext-install pdo pdo_mysql

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

RUN composer install

Nodeコンテナを作成

次にNodeコンテナを作成していきます。

docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

FROM node:lts-alpine3.21

WORKDIR /var/www/html

COPY ./frontend .

RUN npm install

Dockerコンテナを再ビルド

以下のコマンドでDockerコンテナを再ビルドします。

docker-compose build --no-cache

1	docker-compose build --no-cache

Laravel環境設定

次にLaravelの環境設定をしていきます。

まずは.env設定を修正していきます。

DB_CONNECTION=mysql
DB_HOST=mysql_db
DB_PORT=3306
DB_DATABASE=app_db
DB_USERNAME=user
DB_PASSWORD=password

DB_CONNECTION=mysql

DB_HOST=mysql_db

DB_PORT=3306

DB_DATABASE=app_db

DB_USERNAME=user

DB_PASSWORD=password

次にディレクトリの権限設定をしていきます。

まずはwebコンテナに入ります。

docker exec -it laravel_backend bash

1	docker exec -it laravel_backend bash

次にコンテナ内で以下のコマンドを実行し、権限を変更していきます。

chown -R www-data:www-data /var/www/html/storage
chown -R www-data:www-data /var/www/html/bootstrap/cache
chmod -R 775 /var/www/html/storage
chmod -R 775 /var/www/html/bootstrap/cache

chown -R www-data:www-data /var/www/html/storage

chown -R www-data:www-data /var/www/html/bootstrap/cache

chmod -R 775 /var/www/html/storage

chmod -R 775 /var/www/html/bootstrap/cache

次にLaravelのマイグレーションを実行していきます。

php artisan migrate

1	php artisan migrate

動作テスト

動作テストのためにコードを追記していきます。

まずはLaravelにAPIを追加していきます。

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

Route::get('api/test', function () {
    return response()->json(['message' => 'Hello from Laravel API!']);
});

<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {

return view('welcome');

});

Route::get('api/test', function () {

return response()->json(['message' => 'Hello from Laravel API!']);

});

次にNext.jsにページを追加していきます。

'use client';

import { useEffect, useState } from 'react';

export default function Home() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    fetch('/api/test')
      .then(res => res.json())
      .then(data => setMessage(data.message))
      .catch(err => {
        console.error('API Error:', err);
        setMessage('エラーが発生しました');
      });
  }, []);

  return (
    <main>
      <h1>Next.js + Laravel API 接続確認</h1>
      <p>{message}</p>
    </main>
  );
}

'use client';

import { useEffect, useState } from 'react';

export default function Home() {

const [message, setMessage] = useState('');

useEffect(() => {

fetch('/api/test')

.then(res => res.json())

.then(data => setMessage(data.message))

.catch(err => {

console.error('API Error:', err);

setMessage('エラーが発生しました');

});

}, []);

return (

<main>

<h1>Next.js + Laravel API 接続確認</h1>

<p>{message}</p>

</main>

);

}

次に以下のコマンドでコンテナを起動します。

docker-compose up

1	docker-compose up

ブラウザでhttp://localhost/testにアクセスし、「Hello from Laravel API!」が表示されていれば成功です。

まとめ

今回はDockerでLaravelとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。

近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。

Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。