Spring Boot & React 프로젝트 도커(Docker)로 직접 배포하기

보통 클라우드 배포를 할 때 CI/CD 도구를 쓰기도 하지만, 서버의 동작 원리를 정확히 이해하려면 수동으로 직접 이미지를 빌드하고 옮겨보는 과정이 반드시 필요합니다. 이번 포스팅에서는 Spring Boot와 React를 각각 도커 컨테이너로 띄우고 포트를 배치하는 전 과정을 정리합니다.

 

1. Spring Boot 백엔드 배포 (Gradle)

① 실행 가능한 Jar(bootJar) 생성

Spring Boot 프로젝트를 배포할 때는 반드시 모든 라이브러리가 포함된 'Fat Jar'가 필요합니다. build.gradle에 org.springframework.boot 플러그인이 있는지 확인하고 빌드를 수행합니다.

PowerShell

 

# 1. 기존 빌드 정리 및 실행 가능 Jar 생성
./gradlew clean bootJar

• 주의: build/libs 폴더에 plain.jar와 일반 jar가 같이 생길 경우, 반드시 용량이 더 큰 진짜 실행 파일을 선택해야 합니다.

② 백엔드 Dockerfile 작성

Dockerfile

 

FROM eclipse-temurin:17-jdk-jammy
COPY build/libs/*-SNAPSHOT.jar app.jar
ENTRYPOINT ["java", "-jar", "/app.jar"]

③ 이미지 빌드 및 서버 전송

PowerShell

 

# 이미지 빌드
docker build -t rotp-server-app .

# .tar 파일로 이미지 추출 (서버 전송용)
docker save -o rotp-server.tar rotp-server-app

# SCP로 우분투 서버 전송
scp rotp-server.tar username@server-ip:~/

• 주의: docker가 작업할 PC에 설치되어있지 않다면 오류가 발생할 수 있으니 docker를 설치해야 합니다.

---

2. React 프론트엔드 배포 (Nginx 활용)

리액트는 정적 파일이므로 가벼운 웹 서버인 Nginx를 베이스 이미지로 사용합니다.

① 리액트 Dockerfile 작성 (Multi-stage 빌드)

Dockerfile

 

# 1단계: 빌드
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 2단계: 배포 (Nginx)
FROM nginx:stable-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

② 이미지 빌드 및 전송

백엔드와 동일하게 docker build 후 .tar 파일로 추출하여 FTP를 이용해 서버로 전송합니다.

---

3. 우분투 서버에서 컨테이너 가동

서버에 접속하여 .tar 파일을 이미지로 다시 로드하고, 서비스 성격에 맞게 포트를 지정하여 실행합니다.

① 포트 배치 전략

• 프론트엔드(React): 80 포트 (사용자가 주소창에 포트 없이 접속 가능하도록)
• 백엔드(Spring): 8080 포트 (프론트엔드 API 호출용)

② 실행 명령어

Bash

 

# 1. 이미지 로드
sudo docker load -i ~/rotp-server.tar
sudo docker load -i ~/rotp-admin.tar

# 2. 백엔드 실행 (8080 포트)
sudo docker run -d -p 8080:8080 --name rotp-app rotp-server-app

# 3. 프론트엔드 실행 (80 포트)
sudo docker run -d -p 80:80 --name rotp-admin-container rotp-admin

---

4. 트러블슈팅 및 팁

1. no main manifest attribute 에러: bootJar가 아닌 일반 jar를 도커 이미지에 넣었을 때 발생합니다. 빌드 시 반드시 bootJar를 사용하세요.
2. Conflict 에러: 동일한 이름의 컨테이너가 이미 있을 때 발생합니다. docker rm -f [컨테이너명]으로 기존 컨테이너를 삭제 후 다시 실행하세요.
3. CORS 에러: 프론트(80)와 백엔드(8080) 포트가 다르므로, Spring Boot 설정에서 addCorsMappings를 통해 프론트엔드 주소를 허용해 주어야 합니다.
4. 환경 변수 활용: 컨테이너 실행 시 -v 옵션으로 설정 파일을 마운트하거나 -e 옵션으로 DB 주소 등을 주입하면 이미지 재빌드 없이 설정을 바꿀 수 있습니다.