【Spring Boot+Next.js】DockerでフロントエンドをNext.jsにしてバックエンドをSpring Bootで環境構築をする
作成日: 更新日:
開発環境
- Visual Studio Code:version 1.73.0
- OS:Windows10
- Docker Engine:v23.0.5
DockerでフロントエンドをNext.jsにしてバックエンドをSpring Bootで環境構築をする手順
DockerでフロントエンドをNext.jsにしてバックエンドをSpring Bootで環境構築をする手順について解説していきます。
ディレクトリ構成
今回のディレクトリ構成は下記を目指していきます。
1project-root/ 2├── docker/ 3│ ├── frontend/ # Next.js用Dockerfile 4│ ├── backend/ # Spring Boot用Dockerfile 5│ ├── database/ # MySQLコンテナ(Dockerfile) 6│ └── nginx/ # Nginxコンテナ(Dockerfile + 設定ファイル) 7├── frontend/ # Next.jsプロジェクト 8├── backend/ # Spring Bootプロジェクト 9└── 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: spring_backend 24 volumes: 25 - ./backend:/var/www/html 26 ports: 27 - "8080:8080" 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
Javaコンテナを作成
次にJavaコンテナを作成していきます。
docker/backend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/backend/Dockerfile 2# Debian ベースの OpenJDK を使用する 3FROM openjdk:23-jdk-slim 4 5WORKDIR /var/www/html 6 7# Mavenのバージョンを指定 8ENV MAVEN_VERSION=3.9.6 9ENV MAVEN_HOME=/opt/maven 10ENV PATH="${MAVEN_HOME}/bin:${PATH}" 11 12# Mavenをダウンロードしてインストール 13RUN apt-get update && apt-get install -y curl 14RUN curl -fsSL https://downloads.apache.org/maven/maven-3/${MAVEN_VERSION}/binaries/apache-maven-${MAVEN_VERSION}-bin.tar.gz \ 15 | tar -xz -C /opt/ \ 16 && ln -s /opt/apache-maven-${MAVEN_VERSION} ${MAVEN_HOME} \ 17 && apt-get clean 18 19# javaプロジェクトをコピーする 20COPY ./backend /var/www/html/
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 # Spring Boot APIへのルーティング（例: http://localhost/api/test） 8 # -------------------------------------------------- 9 location /api/ { 10 proxy_pass http://backend:8080; 11 proxy_set_header Host $host; 12 proxy_set_header X-Real-IP $remote_addr; 13 } 14 15 # -------------------------------------------------- 16 # Next.js へのプロキシ（例: http://localhost/） 17 # -------------------------------------------------- 18 location / { 19 proxy_pass http://frontend:3000; 20 proxy_set_header Host $host; 21 proxy_set_header X-Real-IP $remote_addr; 22 } 23}
Next.jsプロジェクトとSpring Bootプロジェクトの作成
次にNext.jsプロジェクトとSpring Bootプロジェクトの作成をしていきます。 まずは以下のコマンドでプロジェクトディレクトリに移動します。
1cd project-root
以下のコマンドでコンテナをビルドします。
1docker-compose build
以下のコマンドでNext.jsプロジェクトを作成します。
1docker-compose run --rm frontend sh -c 'npx create-next-app .'
以下のコマンドでSpring Bootプロジェクトを作成します。
1docker-compose run --rm backend sh -c " 2 curl -X GET 'https://start.spring.io/starter.tgz?dependencies=web,data-jpa,mysql&type=maven-project&language=java&bootVersion=3.4.0&javaVersion=23&groupId=com.example&artifactId=backend&name=backend&packageName=com.example.springboot' \ 3 | tar -xz 4"
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: spring_backend 25 volumes: 26 - ./backend:/var/www/html 27+ command: mvn spring-boot:run 28 ports: 29 - "8080:8080" 30 depends_on: 31 - db 32 networks: 33 - app-network 34 35 nginx: 36 build: 37 context: . 38 dockerfile: docker/nginx/Dockerfile 39 container_name: nginx_proxy 40 ports: 41 - "80:80" 42 volumes: 43 - ./docker/nginx/default.conf:/etc/nginx/conf.d/default.conf 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
Nodeコンテナを作成
次にNodeコンテナを作成していきます。
docker/frontend/ディレクトリの直下にDockerfileを作成し、以下のようにしてください。
1# docker/frontend/Dockerfile 2FROM node:lts-alpine3.21 3 4WORKDIR /var/www/html 5 6COPY ./frontend . 7+ RUN npm install
Dockerコンテナを再ビルド
以下のコマンドでDockerコンテナを再ビルドします。
1docker-compose build --no-cache
Spring Bootアプリケーションの環境設定
次にSpring Bootアプリケーションの環境設定をしていきます。
Spring Bootアプリケーションのapplication.properties設定を以下のように修正します。
1# web/src/main/resources/application.properties 2spring.application.name=backend 3 4# MySQLの設定 5spring.datasource.url=jdbc:mysql://db:3306/app_db 6spring.datasource.username=user 7spring.datasource.password=password 8spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver 9 10# JPAの設定 11spring.jpa.database-platform=org.hibernate.dialect.MySQL8Dialect 12spring.jpa.hibernate.ddl-auto=update 13spring.jpa.show-sql=true 14spring.jpa.properties.hibernate.format_sql=true 15 16# CORSを一旦全部許可（開発用） 17spring.mvc.cors.allowed-origins=* 18spring.mvc.cors.allowed-methods=GET,POST,PUT,DELETE
動作テスト
動作テストのためにコードを追記していきます。 まずはSpring BootにAPIを追加していきます。
1// backend/src/main/java/com/example/springboot/controller/TestController.java 2package com.example.springboot.controller; 3 4import org.springframework.beans.factory.annotation.Autowired; 5import org.springframework.jdbc.core.JdbcTemplate; 6import org.springframework.web.bind.annotation.GetMapping; 7import org.springframework.web.bind.annotation.RestController; 8import java.util.Map; 9 10@RestController 11public class TestController { 12 @Autowired 13 private JdbcTemplate jdbcTemplate; 14 15 @GetMapping("/api/test") 16 public Map getTest() { 17 return Map.of("message", "Hello from Spring Boot!"); 18 } 19 20 @GetMapping("/api/test-connection") 21 public Map testConnection() { 22 try { 23 jdbcTemplate.execute("SELECT 1"); 24 return Map.of("status", "OK"); 25 } catch (Exception e) { 26 return Map.of("status", "NG"); 27 } 28 } 29}
次に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 const [connectionStatus, setConnectionStatus] = useState(''); 9 10 useEffect(() => { 11 fetch('/api/test') 12 .then(res => res.json()) 13 .then(data => setMessage(data.message)) 14 .catch(err => { 15 console.error('API Error:', err); 16 setMessage('API接続エラーが発生しました'); 17 }); 18 19 fetch('/api/test-connection') 20 .then(res => res.json()) 21 .then(data => setConnectionStatus(data.status)) 22 .catch(err => { 23 console.error('API Error:', err); 24 setConnectionStatus('データベース接続エラーが発生しました'); 25 }); 26 }, []); 27 28 return ( 29 30 31# Next.js + Spring Boot API 接続確認 32 33 34 35メッセージ: {message} 36 37 38 39接続ステータス: {connectionStatus} 40 41 42 ); 43}
次に以下のコマンドでコンテナを起動します。
1docker-compose up
ブラウザでhttp://localhost/testにアクセスし、「メッセージ: Hello from Spring Boot!」と「接続ステータス: OK」が表示されていれば成功です。
まとめ
今回はDockerでSpring BootとNext.jsの環境構築をする手順について解説していきましたが、いかがだったでしょうか。 近年、フロントエンドとバックエンドを分けて運用するアプリケーションが増えてきましたが、Dockerを使えば簡単に開発環境を構築することができます。 Dockerを使った開発は必須となりつつありますので、是非、チャレンジしてみてください。