【Laravel+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする
作成日: 更新日:
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Docker Engine:v23.0.5
DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする手順
DockerでフロントエンドをNext.jsにしてバックエンドをLaravelで環境構築をする手順について解説していきます。
ディレクトリ構成
今回のディレクトリ構成は下記を目指していきます。
1# Directory structure 2project-root/ 3├── docker/ 4│ ├── frontend/ # Next.js用Dockerfile 5│ ├── backend/ # Laravel用Dockerfile 6│ ├── database/ # MySQLコンテナ(Dockerfile) 7│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル) 8├── frontend/ # Next.jsプロジェクト 9├── backend/ # Laravelプロジェクト 10└── docker-compose.yml
最初に必要なディレクトリを作成しておいてください。
docker-compose.ymlを作成
まずはdocker-compose.ymlを作成していきます。 ルートディレクトリの直下にdocker-compose.ymlを作成し、以下のようにしてください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14 depends_on: 15 - nginx 16 networks: 17 - app-network 18 19 backend: 20 build: 21 context: . 22 dockerfile: docker/backend/Dockerfile 23 container_name: laravel_backend 24 volumes: 25 - ./backend:/var/www/html 26 ports: 27 - "9000:9000" 28 depends_on: 29 - db 30 networks: 31 - app-network 32 33 nginx: 34 build: 35 context: . 36 dockerfile: docker/nginx/Dockerfile 37 container_name: nginx_proxy 38 ports: 39 - "80:80" 40 volumes: 41 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 42 - ./backend:/var/www/html 43 depends_on: 44 - backend 45 networks: 46 - app-network 47 48 db: 49 build: 50 context: . 51 dockerfile: docker/database/Dockerfile 52 container_name: mysql_db 53 environment: 54 MYSQL_DATABASE: app_db 55 MYSQL_ROOT_PASSWORD: root 56 MYSQL_USER: user 57 MYSQL_PASSWORD: password 58 ports: 59 - "3306:3306" 60 volumes: 61 - db_data:/var/lib/mysql 62 networks: 63 - app-network 64 65volumes: 66 db_data: 67 68networks: 69 app-network: 70 driver: bridge
PHPコンテナを作成
次にPHPコンテナを作成していきます。
docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/backend/Dockerfile 2FROM php:8.2-fpm 3 4WORKDIR /var/www/html 5 6COPY ./backend . 7 8RUN apt-get update 9RUN apt-get install -y \ 10 zip unzip curl \ 11 && docker-php-ext-install pdo pdo_mysql 12 13COPY /usr/bin/composer /usr/bin/composer
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend .
MySQLコンテナを作成
次にMySQLコンテナを作成していきます。
docker/database/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/database/Dockerfile 2FROM mysql:8.0
Nginxコンテナを作成
次にNginxコンテナを作成していきます。
docker/nginx/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/nginx/Dockerfile 2FROM nginx:alpine 3COPY ./docker/nginx/default.conf /etc/nginx/conf.d/default.conf
docker/nginx/ディレクトリの直下にdefault.confを作成し、以下のようにしてください。
1# docker/nginx/default.conf 2server { 3 listen 80; 4 server_name localhost; 5 6 # -------------------------------------------------- 7 # Laravel用のroot（APIエンドポイントにのみ使う） 8 # -------------------------------------------------- 9 root /var/www/html/public; 10 index index.php index.html; 11 12 # -------------------------------------------------- 13 # Next.js へのプロキシ（例: http://localhost/） 14 # -------------------------------------------------- 15 location / { 16 proxy_pass http://next_frontend:3000; 17 proxy_http_version 1.1; 18 proxy_set_header Upgrade $http_upgrade; 19 proxy_set_header Connection 'upgrade'; 20 proxy_set_header Host $host; 21 proxy_cache_bypass $http_upgrade; 22 } 23 24 # -------------------------------------------------- 25 # Laravel APIへのルーティング（例: http://localhost/api/test） 26 # -------------------------------------------------- 27 location ^~ /api/ { 28 try_files $uri $uri/ /index.php?$query_string; 29 } 30 31 # -------------------------------------------------- 32 # PHPファイルの実行（FastCGI で Laravel を処理） 33 # -------------------------------------------------- 34 location ~ \.php$ { 35 include fastcgi_params; 36 fastcgi_pass laravel_backend:9000; 37 fastcgi_index index.php; 38 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 39 } 40}
Next.jsプロジェクトとLaravelプロジェクトの作成
次にNext.jsプロジェクトとLaravelプロジェクトの作成をしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。
1cd project-root
以下のコマンドでコンテナをビルドします。
1docker-compose build
以下のコマンドでNext.jsプロジェクトを作成します。
1docker-compose run --rm frontend sh -c 'npx create-next-app .'
以下のコマンドでLaravelプロジェクトを作成します。
1docker-compose run --rm backend sh -c 'composer create-project laravel/laravel .'
docker-compose.ymlを修正
次にdocker-compose.ymlを修正していきます。 ルートディレクトリの直下にdocker-compose.ymlを以下のように修正してください。
1# docker-compose.yml 2version: '3.8' 3 4services: 5 frontend: 6 build: 7 context: . 8 dockerfile: docker/frontend/Dockerfile 9 container_name: next_frontend 10 ports: 11 - "3000:3000" 12 volumes: 13 - ./frontend:/var/www/html 14+ command: npm run dev 15 depends_on: 16 - nginx 17 networks: 18 - app-network 19 20 backend: 21 build: 22 context: . 23 dockerfile: docker/backend/Dockerfile 24 container_name: laravel_backend 25 volumes: 26 - ./backend:/var/www/html 27 ports: 28 - "9000:9000" 29 depends_on: 30 - db 31 networks: 32 - app-network 33 34 nginx: 35 build: 36 context: . 37 dockerfile: docker/nginx/Dockerfile 38 container_name: nginx_proxy 39 ports: 40 - "80:80" 41 volumes: 42 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 43 - ./backend:/var/www/html 44 depends_on: 45 - backend 46 networks: 47 - app-network 48 49 db: 50 build: 51 context: . 52 dockerfile: docker/database/Dockerfile 53 container_name: mysql_db 54 environment: 55 MYSQL_DATABASE: app_db 56 MYSQL_ROOT_PASSWORD: root 57 MYSQL_USER: user 58 MYSQL_PASSWORD: password 59 ports: 60 - "3306:3306" 61 volumes: 62 - db_data:/var/lib/mysql 63 networks: 64 - app-network 65 66volumes: 67 db_data: 68 69networks: 70 app-network: 71 driver: bridge
PHPコンテナを作成
次にPHPコンテナを修正していきます。
docker/backend/ディレクトリの直下にDockerfileを以下のように修正してください。
1# docker/backend/Dockerfile 2FROM php:8.2-fpm 3 4WORKDIR /var/www/html 5 6COPY ./backend . 7 8RUN apt-get update 9RUN apt-get install -y \ 10 zip unzip curl \ 11 && docker-php-ext-install pdo pdo_mysql 12 13COPY --from=composer:latest /usr/bin/composer /usr/bin/composer 14 15+ RUN composer install
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend . 7 8+ RUN npm install
Dockerコンテナを再ビルド
以下のコマンドでDockerコンテナを再ビルドします。
1docker-compose build --no-cache
Laravel環境設定
次にLaravelの環境設定をしていきます。
まずは.env設定を修正していきます。
1# .env 2DB_CONNECTION=mysql 3DB_HOST=mysql_db 4DB_PORT=3306 5DB_DATABASE=app_db 6DB_USERNAME=user 7DB_PASSWORD=password
次にディレクトリの権限設定をしていきます。 まずはwebコンテナに入ります。
1docker exec -it laravel_backend bash
次にコンテナ内で以下のコマンドを実行し、権限を変更していきます。
1chown -R www-data:www-data /var/www/html/storage 2chown -R www-data:www-data /var/www/html/bootstrap/cache 3chmod -R 775 /var/www/html/storage 4chmod -R 775 /var/www/html/bootstrap/cache
次にLaravelのマイグレーションを実行していきます。
1php artisan migrate
動作テスト
動作テストのためにコードを追記していきます。 まずはLaravelにAPIを追加していきます。
1# /backend/routes/web.php 2<?php 3 4use Illuminate\Support\Facades\Route; 5 6Route::get('/', function () { 7 return view('welcome'); 8}); 9 10+ Route::get('api/test', function () { 11+ return response()->json(['message' => 'Hello from Laravel API!']); 12+ });
次にNext.jsにページを追加していきます。
1# /frontend/src/app/test/page.tsx 2'use client'; 3 4import { useEffect, useState } from 'react'; 5 6export default function Home() { 7 const [message, setMessage] = useState(''); 8 9 useEffect(() => { 10 fetch('/api/test') 11 .then(res => res.json()) 12 .then(data => setMessage(data.message)) 13 .catch(err => { 14 console.error('API Error:', err); 15 setMessage('エラーが発生しました'); 16 }); 17 }, []); 18 19 return ( 20 <main> 21 <h1>Next.js + Laravel API 接続確認</h1> 22 <p>{message}</p> 23 </main> 24 ); 25}
次に以下のコマンドでコンテナを起動します。
1docker-compose up
ブラウザでhttp://localhost/testにアクセスし、「Hello from Laravel API!」が表示されていれば成功です。
まとめ
今回はDockerでLaravelとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。