Zenn
😮

React × Spring Boot を本番構成で統合してみた｜Docker Composeで開発環境を一体化

に公開
React
Spring Boot
docker-compose
環境構築
本番環境
tech

はじめに

今回の記事では、ReactとSpring Bootを統合して本番構成を意識した形に移行したこと、そしてDocker Composeを用いたローカル開発環境の構築についてまとめています。
具体的には、

  • Reactアプリをビルドし、Spring Bootのresources/staticに配置して統合
  • Spring Bootの設定ファイルをapplication.yml形式に整理し、環境ごとの切り替えを可能に
  • Docker Composeで、Spring Boot、React（ビルド済み）、PostgreSQLをまとめて起動できる構成を作成
    といった内容を扱っています。

これまでの開発の流れや学習過程については、以下の記事にまとめています。
まだ読んでいない方は、あわせてご覧いただくと、今回の内容がより理解しやすくなるかと思います。

このあとからは、具体的な統合手順やDocker構成について順を追って解説していきます。

ReactとSpring Bootの統合

これまで、フロントエンド（React）とバックエンド（Spring Boot）はそれぞれ別々のアプリケーションとして動かしていましたが、今回のステップでは「ReactをビルドしてSpring Bootに組み込む」ことで、一体化された構成へと移行しました。

1. Reactアプリをビルド

まずは、Reactアプリを本番用にビルドします。

npm run build

このコマンドを実行すると、build/ ディレクトリに静的ファイルが出力されます。
これらは最終的に Spring Boot の resources/static へ配置することで、バックエンドサーバーからそのまま配信されるようになります。

2. ビルド成果物を Spring Boot に組み込み

Reactで作成された静的ファイルを、Spring Bootプロジェクトの src/main/resources/static/ にコピーします。

# 例：buildフォルダの中身をstaticディレクトリにコピー
cp -r build/* ../backend/src/main/resources/static/

Spring Boot の static/ 配下に配置されたファイルは、自動的に Web サーバーで公開される仕組みになっているため、特別な設定を追加しなくても React の画面が表示されます。

3. 統合動作の確認

Spring Bootアプリを起動後、ブラウザで http://localhost:8080/ にアクセスし、Reactのトップページが表示されれば統合は成功です。

Docker Compose でローカル開発環境を一体化

ここからは、React + Spring Boot + PostgreSQL を Docker Compose を使って一体化し、ローカル環境でも本番に近い構成で動作確認できるようにした手順をまとめます。

1. Spring Boot の環境設定切り替え（YAML化）

設定ファイルを application.properties から application.yml に移行し、環境ごとに設定を分けて管理できるようにしました。

  • src/main/resources/application.yml：本番（通常の起動）用の設定
spring:
  application:
    name: event-reservation-app

  datasource:
    url: jdbc:postgresql://db:5432/eventdb
    username: user
    password: password
    driver-class-name: org.postgresql.Driver

  jpa:
    hibernate:
      ddl-auto: update
    show-sql: true
    properties:
      hibernate:
        dialect: org.hibernate.dialect.PostgreSQLDialect
  • src/test/resources/application-test.yml：テスト用の設定
spring:
  datasource:
    url: jdbc:h2:mem:testdb;DB_CLOSE_DELAY=-1
    driver-class-name: org.h2.Driver
    username: sa
    password: ""
  jpa:
    hibernate:
      ddl-auto: create-drop
    show-sql: true
  h2:
    console:
      enabled: true

Spring Boot のプロファイルは @SpringBootTest を使って自動切り替えしています（EventReservationApplicationTests にて設定）。

💡 補足：@SpringBootTest とは？
@SpringBootTest は、Spring Bootアプリ全体の起動テストを行うためのアノテーションです。
テスト実行時にアプリケーションコンテキスト全体が立ち上がり、application-test.yml のようなテスト用設定が自動で適用されます。

2. Spring Boot の jar 作成

アプリを Docker イメージとして動かすために、事前に jar ファイルを作成しておきます。

./mvnw package

このコマンドで target/ ディレクトリに jar ファイルが出力されます。

💡 補足：jarファイルとは？
jar（Java ARchive）ファイルは、Javaで作成されたアプリケーションやライブラリをひとまとめにした圧縮ファイルです。
Spring Bootでは、jarファイルにアプリ本体＋Webサーバー（Tomcatなど）を内蔵しており、jar単体でアプリを実行することができます。

あわせて、Spring Boot 側の Dockerfile を用意して、jar ファイルをベースにアプリを起動できるようにします。

3. Spring Boot 用 Dockerfile の作成と配置

jar ファイルをコンテナ上で実行するために、Dockerfile を作成します。
このファイルは、Spring Boot プロジェクトのルートディレクトリ（backend/ ディレクトリ）に配置しました。

📂 backend/
├── Dockerfile ← ここに配置
├── pom.xml
├── src/
└── ...

以下が実際の Dockerfile の内容です。

# Java 17ベース（JDK入り）
FROM openjdk:17-jdk-slim

# 作業ディレクトリ作成
WORKDIR /app

# jarファイルコピー（事前に mvn clean package しておく）
COPY target/event-reservation-app-0.0.1-SNAPSHOT.jar app.jar

# アプリ起動
ENTRYPOINT ["java", "-jar", "app.jar"]

4. Docker Compose の作成と配置

Spring Boot アプリと PostgreSQL をまとめて起動できるようにするため、docker-compose.yml を作成します。
このファイルは、プロジェクトのルートディレクトリに配置します。

📂 プロジェクトルート/
├── backend/ ← Spring Boot（Dockerfileはここ）
├── frontend/ ← React（※今回はビルド済みの静的ファイルを使用）
├── docker-compose.yml ← ここに配置

以下が実際の docker-compose.yml の内容です。

version: '3.8'

services:
  app:
    build:
      context: ./backend
      dockerfile: Dockerfile
    container_name: springboot-app
    ports:
      - "8080:8080"
    depends_on:
      - db
    networks:
      - app-network

  db:
    image: postgres:15
    container_name: postgres-db
    ports:
      - "5432:5432"
    environment:
      POSTGRES_DB: eventdb
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
    volumes:
      - postgres-data:/var/lib/postgresql/data
    networks:
      - app-network

networks:
  app-network:

volumes:
  postgres-data:

ポイント解説

  • app: Spring Boot アプリのサービス。./backend をビルドして、ポート 8080 で公開。
  • db: PostgreSQL のサービス。開発用のシンプルな設定で、データはボリュームに永続化。
  • depends_on: Spring Boot アプリを起動する前に、DB が先に起動されるように設定。
  • networks / volumes: アプリ間通信とデータ永続化のための設定。

これで以下のコマンドを実行するだけで、アプリと DB が一括起動できるようになります。

docker-compose up --build

Dockerfile と docker-compose.yml の役割の違い

ファイル名 主な役割
Dockerfile アプリケーション（例：Spring Boot）の Dockerイメージを定義 するファイル。
ベースとなるOSやJDKのバージョン、jarファイルの配置、起動コマンドなどを記述します。
docker-compose.yml 複数のサービス（例：アプリ＋DB）を まとめて起動・連携 させるためのファイル。
どのサービスをどこからビルドするか、ポートの公開、依存関係などを設定します。

イメージしやすく言うと…

  • Dockerfile は「1つのアプリケーションをどう動かすか」のレシピ。
  • docker-compose.yml は「アプリ＋DBなど、複数のコンテナをどう連携させるか」の設計図。

この2つを組み合わせることで、ローカルでも本番に近い構成を簡単に再現できるようになります！

最後に

今回は、React と Spring Boot の統合、そして Docker Compose を使ったローカル開発環境の構築までを一通りまとめました。
Reactアプリを本番想定で Spring Boot と連携し、さらに Docker でインフラ部分も一体化することで、より現場に近い開発体験ができたと思います。

実際にやってみて「手元でアプリとDBが一括起動できるの便利！」と実感しましたし、環境構築の自動化が進んだことで、今後のデプロイにもつなげやすくなりました。

次回予定していること

次回は、今回作成した Docker イメージを Docker Hub にアップロードし、それを使って AWS へのデプロイ にチャレンジしていく予定です。

  • Docker Hub へのプッシュ
  • AWS へのデプロイ（EC2 または ECS の予定）
  • 環境変数の管理やセキュリティ設定など、本番環境を意識した改善

Discussion