環境構築

Dockerを用いてチーム開発する際のフォルダ構成例

前提

下記のようなコマンドだけで誰でも起動でき、端末間の差によって起動できない・できるが発生しないようにする

$ git clone https://github.com/dataich/sample-docker.git
$ cd sample-docker
$ docker-compose up

この場合、ローカルでインストールが必要なものは下記３点のみ

1. Git

• 適当に調べてインストール

2. Docker

• 公式からDocker Desktopをインストール

3. Docker Compose

• 大抵の場合Docker Desktopに組み込まれている

フォルダ構成

フロントはAngular、バックエンドはSpring bootにする場合

sample-docker/
├── backend/                  # Spring Boot アプリケーション
│   ├── Dockerfile
│   └── ...（src、pom.xml など）
│
├── frontend/                 # Angular アプリケーション
│   ├── Dockerfile
│   └── ...（src、angular.json など）
│
├── docker-compose.yml        # フロント・バック統合起動用
└── README.md                 # 起動手順などのドキュメント

プロジェクトの作成手順

🔹 Step 1：ルートディレクトリの作成

mkdir sample-docker
cd sample-docker

🔹 Step 2：Spring Boot アプリの作成

mkdir backend
cd backend

• Spring Initializr を使うと簡単（Web GUI または CLI）

• 必要な設定（Web GUIの場合）：

  • Project: Maven
  • Language: Java
  • Spring Boot: 最新安定版
  • Dependencies: Spring Web, Spring Boot DevTools, Lombok など必要に応じて

ダウンロード後、backend/ に展開して以下の構成にする：

backend/
├── src/
├── pom.xml
└── Dockerfile ← 後で作る

🔹 Step 3：Angular アプリの作成

ng new frontend --standalone

※ @angular/cli が必要

• CSS or SCSS → お好みで

frontend/
├── src/
├── angular.json
├── package.json
└── Dockerfile ← 後で作る

🔹 Step 4：Dockerfile の作成

🔸 backend/Dockerfile

Dockerfile

# ---------- ビルド用ステージ ----------
FROM maven:3.9.10-eclipse-temurin-17 AS build

WORKDIR /app

# 依存関係のダウンロードをキャッシュするため先にpom.xmlをコピー
COPY pom.xml .
RUN mvn dependency:go-offline

# ソースコードをコピーしてビルド
COPY . .
RUN mvn clean package -DskipTests

# ---------- 実行用ステージ ----------
FROM eclipse-temurin:17-jdk

WORKDIR /app

# build ステージから jar ファイルをコピー
COPY --from=build /app/target/*.war app.war

EXPOSE 8080

ENTRYPOINT ["java", "-jar", "app.war"]

🔸 frontend/Dockerfile（開発用）

Dockerfile

# Node.js v20.18.0 を使用
FROM node:20.18.0-alpine

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

# package.jsonとpackage-lock.jsonを先にコピー
COPY package*.json ./

# 依存関係をインストール
RUN npm ci

# アプリ全体をコピー
COPY . .

# ポート4200でサーバを公開（ng serve のデフォルト）
EXPOSE 4200

# 開発用のコマンド（本番なら build 後に serve などに変更）
CMD ["npm", "run", "start"]

• ※ package.json の start に ng serve があることを確認。
• ※npm ciはpackage-lock.jsonからnode_moduleを再作成するため、npm installに比べ全員が確実に同じ環境にできる利点がある

また、package.jsonのstartのscriptを下記のように修正

 "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0 --poll=1000", // ←ここ！
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

🔹 Step 5：docker-compose.yml をルートに作成

version: '3.8'
services:
  backend:
    build: ./backend
    ports:
      - "8080:8080"
    networks:
      - app-network

  frontend:
    build: ./frontend
    ports:
      - "4200:4200"
    networks:
      - app-network
    volumes:
      - ./frontend:/app
      - /app/node_modules

networks:
  app-network:

🔹 Step 6：動作確認

// docker-compose.yml に定義されたサービス（コンテナ）を ビルドして起動 するコマンド
docker-compose up --build

// 起動中のすべてのサービス（コンテナ）を 停止して削除 するコマンド
docker-compose down 

• Angular： http://localhost:4200/
• Spring Boot： http://localhost:8080/

確認コマンド

Docker

docker --version
// 実行結果は、Docker version 28.0.1, build 068a01e

Docker compose

docker compose version
// 実行結果は、Docker Compose version v2.33.1-desktop.1

Node.js

node -v
// 実行結果は、v20.18.0

npm

npm -v
// 実行結果は、10.8.2

Angular CLI

ng version
// 実行結果は、Angular CLI: 18.2.12

Java

java -version
// 実行結果は、openjdk version "17.0.15" 2025-04-15 LTS

Maven

mvn -v
// 実行結果は、Apache Maven 3.9.10 (5f519b97e944483d878815739f519b2eade0a91d)