Spring Bootのstatic/に Reactをビルドしたモジュールを配置し、ビルドまでを1つのコンテナで実行する

はじめに

これまでの記事で、以下を行いました。

• Reactをフロントエンドに、SpringBootをバックエンドにした構成でjarファイルを構築する
• SpringBootをコンテナ環境でビルドする
• Reactをコンテナ環境でビルドする

https://qiita.com/y-hys/items/f30515cbf15422058d42
https://qiita.com/y-hys/items/972289c5d14e5b667fd0
https://qiita.com/y-hys/items/f4c1b3e8814fd2adc371

今回は合わせ技です。以下を一つのコンテナで行います。

1. Reactをビルド
2. 成果物をSpringBootのstaticに配置
3. SpringBootをビルド

dockerfileの作成

<project-root>
├── backend
└── frontend

上記構成になっているので
<project-root/dockerfile>を作成
マルチステージの構成にします。

1. NodeコンテナでReactをビルド
2. JDKコンテナに1でビルドしたモジュールを配置した状態でSpringBootをビルド
3. JREコンテナに2でビルドしたモジュールを配置

dockerfile

# Node.jsのコンテナ
FROM node:18-alpine AS frontend
WORKDIR /app
COPY frontend/package.json frontend/package-lock.json ./
RUN npm install
COPY frontend ./
RUN npm run build

# 2. # JDKのコンテナ
FROM eclipse-temurin:21-jdk-alpine AS backend
WORKDIR /app
COPY backend ./
COPY --from=frontend /app/dist ./src/main/resources/static
RUN ./gradlew build

# 3. 軽量化のためJREのコンテナ
FROM eclipse-temurin:21-jre
WORKDIR /app
COPY --from=backend /app/build/libs/backend-0.0.1-SNAPSHOT.jar ./backend-0.0.1-SNAPSHOT.jar
CMD ["java", "-jar", "backend-0.0.1-SNAPSHOT.jar"]

dockerignoreの作成

dockerignore

frontend/dist/
frontend/node_modules/
backend/build
backend/.gradle
backend/bin
backend/*.iml

動作確認

docker build -t myapp .
docker run -p 8080:8080 myapp

http://localhost:8080にアクセス

おわりに

ここまでの記事で、

• Reactプロジェクトの作成
• SpringBootアプリの作成
• 上記の統合とビルド
• 各プロジェクトをコンテナ環境でビルド
• 統合した状態でコンテナ環境でビルド

と今まであまり触ってこなかったコンテナ技術を利用しました。
今後の展望は、CI/CDのパイプラインに乗せること。Kubernetesの理解。とインフラ周りの知見を蓄えていきたいです。