프론트엔드(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 