[Docker] 윈도우 Spring Boot + React 풀스택 프로젝트 실행하기

도커 설치

[Docker] Windows 11 도커 설치하기

 

완료된 예제 GitHub 참고하기

 

GitHub - jungyr98/docker-example

 

 

과정 미리 보기

🧱 Spring Boot 백엔드 Docker + 빌드
⚛️ React 프론트엔드 Docker + 빌드
🧭 Nginx로 프론트 정적 파일 서빙
🔁 Nginx에서 /api → 백엔드 프록시 설정
🐳 docker compose로 전체 실행
🌐 프론트에서 백엔드 API 호출 및 결과 출력

 

폴더 구조 미리 보기

my-fullstack-app/
├── backend/                         # Spring Boot 백엔드
│   ├── Dockerfile                   # Java 앱 컨테이너 정의
│   └── (기타 Spring Boot 프로젝트 파일들)
│
├── frontend/                        # React 프론트엔드
│   ├── Dockerfile                   # React 앱 빌드 & nginx 배포
│   └── (기타 React 프로젝트 파일들)
│
├── k8s/                             # Kubernetes 설정 폴더 (나중에)
│   ├── backend-deployment.yaml      # 백엔드 배포 설정
│   ├── backend-service.yaml         # 백엔드 서비스 (ClusterIP)
│   ├── frontend-deployment.yaml     # 프론트엔드 배포 설정
│   └── frontend-service.yaml        # 프론트엔드 서비스 (NodePort or LoadBalancer)
└── docker-compose.yml               # 로컬 개발용 통합 실행

 

 

✅  1. 로컬 프로젝트 폴더 생성하기

> mkdir my-fullstack-app
> cd my-fullstack-app
> my-fullstack-app> mkdir backend frontend

# 예시
my-fullstack-app/
├── backend/                         # Spring Boot 백엔드
└── frontend/                        # React 프론트엔드

 

✅ 2. Spring Boot 프로젝트 생성하기

Spring Initializr 에서 다음과 같이 설정:

 

• Project: Gradle
• Language: Java
• Spring Boot: 최신
• Dependencies:
  • Spring Web
  • (Optional: Spring DevTools)

다운로드한 프로젝트를 backend 폴더에 넣고, 아래 간단한 REST API 테스트 코드를 추가

package com.example.demo;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    @GetMapping("/api/hello")
    public String hello() {
        return "Hello from backend!";
    }
}

 

 

 

✅ 3. React 프로젝트 생성하기

/frontend 폴더에서 create-react-app 실행

npm create-react-app
npm install axios

 

App.js 수정하기

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [msg, setMsg] = useState('');

  useEffect(() => {
    axios.get('/api/hello')
      .then(res => setMsg(res.data))
      .catch(err => console.error(err));
  }, []);

  return (
    <div>
      <h1>{msg || 'Loading...'}</h1>
    </div>
  );
}

export default App;

 

프록시 설정을 위해 /frontend 하위에 nginx.conf 파일 생성 후 아래 코드 작성

server {
  listen 80;

  # 프론트엔드 정적 파일 처리
  location / { 
    root /usr/share/nginx/html; # 정적 파일을 찾을 기본 경로 (프론트 빌드 결과물이 이 위치에 복사됨)
    index index.html index.htm; # 기본으로 보여줄 파일들 (순서대로 시도함)
    try_files $uri /index.html; # 요청한 경로에 해당 파일이 없으면 index.html로 대체함 → SPA(Router) 대응용
  }

  # 백엔드 API 요청 프록시 처리
  location /api/ { # /api/... 로 들어오는 요청만 해당
    proxy_pass http://backend:8080; #실제 요청을 도커 네트워크 내부의 backend 서비스로 전달함
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

 

✅ 4. Dockerize 하기

/backend 내에 Dockerfile 생성

backend> New-Item -Name Dockerfile -ItemType "File"

 

VSCode에서 아래 내용 추가하기

# 1단계: 빌더 이미지 (Gradle로 JAR 빌드)
FROM gradle:8.5-jdk21 AS builder
WORKDIR /app
COPY . .
RUN gradle build -x test

# 2단계: 실행 이미지 (가벼운 JDK만 있는 이미지)
FROM openjdk:21-jdk-slim
WORKDIR /app
COPY --from=builder /app/build/libs/*.jar app.jar
ENTRYPOINT ["java", "-jar", "app.jar"]

 

/frontend 내에 Dockerfile 생성

frontend> New-Item -Name Dockerfile -ItemType "File"

 

VSCode에서 아래 내용 추가하기

# 1단계: 빌드용 Node 이미지
FROM node:20 AS builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

# 2단계: 실행용 Nginx 이미지
FROM nginx:alpine
COPY --from=builder /app/build /usr/share/nginx/html

# Nginx 설정
COPY nginx.conf /etc/nginx/conf.d/default.conf

 

Trouble Shooting

PowerShell에서 echo 같은 걸로 Dockerfile 만들면 인코딩 관련 오류가 굉장히 자주 발생.
→ Windows는 BOM 포함한 UTF-16 저장을 기본으로 하니까

문제	해결
��# 같은 깨진 주석 경고	Dockerfile 인코딩을 UTF-8 (without BOM)으로 저장
RST_STREAM with INTERNAL_ERROR	주로 인코딩 문제 + Docker 내부 gRPC 통신 실패

 

✅ 5. Docker Compose로 백엔드/프론트엔드 함께 실행시키도록 설정하기

 

my-fullstack-app 하위에 docker-compose.yml 파일 생성

my-fullstack-app> New-Item -Name docker-compose.yml -ItemType "File"

 

아래 코드 추가

services:
  backend:
    build:
      context: ./backend
      dockerfile: Dockerfile
    ports:
      - "8080:8080"

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    ports:
      - "3000:80"

 

 

✅ 6. 도커에서 빌드 후 실행하기

my-fullstack-app 경로에서 docker 명령어 실행

> cd my-fullstack-app

# 전체 빌드 (frontend + backend)
my-fullstack-app> docker compose build

# 전체 실행
my-fullstack-app> docker compose up

 

서버 접속 후 결과 확인

• 프론트에서 axios.get('/api/hello') → Nginx가 /api/ 요청을 backend:8080으로 프록시
• 백엔드는 @RestController에서 메시지 반환
• 브라우저엔 Hello from Spring Boot! 같은 결과가 <h1> 안에 출력됨

 

 

2025.05.29 - [kubernetes] - [K8s] Docker 환경 쿠버네티스에 배포하기 (Windows & Minikube)

[K8s] Docker 환경 쿠버네티스에 배포하기 (Windows & Minikube)