카테고리 없음

React + Spring Boot 통합 배포 완벽 가이드 (with Nginx & .env)

kangchaewon 2025. 11. 14. 01:38

프론트엔드(React)와 백엔드(Spring Boot)를 각각 개발하다 보면,
최종 배포 시 하나의 서버에서 함께 동작하도록 묶는 과정이 필요합니다.
이번 글에서는 실제 배포 환경(Ubuntu + Nginx 기준)에서 사용 가능한
React 빌드 → Spring Boot 통합 → 환경변수 적용 → 배포 전체 과정을 정리했습니다.

## 프로젝트 구조

agridata/
├── Backend/
│   ├── src/main/resources/
│   │   ├── application.yml
│   │   └── static/      ← React build 파일 들어갈 폴더
│   └── build/libs/spring-0.0.1-SNAPSHOT.jar
└── Frontend/
    ├── package.json
    ├── .env
    └── build/

환경 변수 설정

.env 파일을 프로젝트 루트 또는 백엔드 실행 위치에 둡니다.

DB_HOST=localhost
DB_PORT=3306
DB_NAME=agridata
DB_USERNAME=root
DB_PASSWORD=비밀번호
KAMIS_API_KEY=xxxx
KAMIS_CERT_ID=xxxx

적용 방법

export $(grep -v '^#' .env | xargs)

이 명령은 .env 파일 안의 변수들을 현재 터미널 세션에 등록합니다.

React 빌드

프론트엔드로 이동해서 빌드합니다.

cd Frontend  
npm install  
npm run build

빌드가 완료되면 build/ 폴더가 생성됩니다.

백엔드에 프론트 빌드 파일 통합

Spring Boot는 /src/main/resources/static/ 폴더 안의 정적 파일을 자동으로 서빙합니다.
이제 빌드된 React 파일을 이 위치에 복사합니다.

기존 파일 삭제 (있다면)


rm -rf ../Backend/src/main/resources/static/\*

새로 빌드된 파일 복사


cp -r build/\* ../Backend/src/main/resources/static/

Spring Boot 빌드 및 실행


cd ../Backend  
./gradlew clean build -x test  

빌드가 끝나면 build/libs에 JAR 파일이 생성됩니다.

실행 명령

source .env  
java -jar build/libs/spring-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &  

-> &를 붙이면 백그라운드 실행됩니다.
서버 재부팅 시 자동 실행하고 싶다면 systemctl 서비스 등록도 가능합니다.

Nginx 설정

React + Spring Boot를 한 서버에 둘 경우,
Nginx를 Reverse Proxy로 설정해주면 안정적입니다.

sudo nano /etc/nginx/sites-available/agridata  

아래 내용 추가

server {  
listen 80;  
server\_name your-domain.com;


root /home/ubuntu/agridata/Backend/src/main/resources/static;  
index index.html;

location / {  
try\_files $uri /index.html;  
}

# React → Spring Boot API 프록시

location /api/ {  
proxy\_pass [http://localhost:8080](http://localhost:8080);  
proxy\_http\_version 1.1;  
proxy\_set\_header Host $host;  
proxy\_set\_header X-Real-IP $remote\_addr;  
proxy\_set\_header X-Forwarded-For $proxy\_add\_x\_forwarded\_for;  
proxy\_set\_header X-Forwarded-Proto $scheme;  
}



}  

적용 후 Nginx 재시작:

sudo nginx -t  
sudo systemctl restart nginx