React + Spring Boot 풀스택 배포

sudo nano /etc/nginx/sites-available/fullstack-app

# 백엔드 업스트림 upstream spring_backend { server localhost:8080; } server { listen 443 ssl http2; server_name example.com www.example.com; # SSL 인증서 ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem; # ============================================ # 📁 프론트엔드 (React) - 정적 파일 서빙 # ============================================ root /var/www/frontend; index index.html; location / { try_files $uri $uri/ /index.html; # SPA 라우팅 대응 } # React 정적 에셋 캐싱 (해시 포함된 파일) location /static/ { expires 1y; add_header Cache-Control "public, immutable"; } # ============================================ # 🍃 백엔드 (Spring Boot) - 리버스 프록시 # ============================================ location /api/ { proxy_pass http://spring_backend; 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; # 타임아웃 proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; } # ============================================ # 🔧 기타 설정 # ============================================ # 파일 업로드 크기 제한 client_max_body_size 10M; # gzip 압축 gzip on; gzip_vary on; gzip_min_length 256; gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml; # 에러 페이지 error_page 404 /index.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } } # HTTP → HTTPS 리다이렉트 server { listen 80; server_name example.com www.example.com; return 301 https://$host$request_uri; }

// React에서 API 호출 (같은 도메인이므로 /api/만 사용) const response = await fetch('/api/users'); const users = await response.json(); // 환경별 설정이 필요하면 환경변수 사용 const API_BASE = process.env.REACT_APP_API_URL || ''; const response = await fetch(`${API_BASE}/api/users`);

{ "proxy": "<http://localhost:8080>" }

/var/www/frontend/ ← React 빌드 결과물 ├── index.html ├── static/ │ ├── js/ │ ├── css/ │ └── media/ ├── favicon.ico └── manifest.json /home/ubuntu/app/ ← Spring Boot ├── myapp.jar ├── application-prod.yml (선택) └── logs/ (선택)

#!/bin/bash # deploy.sh — 풀스택 배포 스크립트 set -e # 에러 발생 시 중단 echo "📦 프론트엔드 빌드..." cd /home/ubuntu/my-react-app git pull origin main npm install npm run build echo "📁 프론트엔드 배포..." sudo rm -rf /var/www/frontend/* sudo cp -r build/* /var/www/frontend/ sudo chown -R www-data:www-data /var/www/frontend echo "🍃 백엔드 빌드 및 배포..." cd /home/ubuntu/my-spring-app git pull origin main ./gradlew clean build -x test echo "🔄 백엔드 재시작..." sudo systemctl restart myapp echo "⏳ Spring Boot 시작 대기..." sleep 10 echo "🧪 헬스 체크..." curl -f <http://localhost:8080/actuator/health> || echo "⚠️ 헬스체크 실패!" echo "✅ 배포 완료!"

📁 C:\\DEV\\k-rules\\ ├── 📁 frontend\\ ← React Vite 프로젝트 │ ├── 📁 src\\ │ ├── 📁 dist\\ ← 빌드 결과 (npm run build) │ ├── 📄 .env.local │ ├── 📄 .env.production │ └── 📄 deploy.bat ← 프론트 배포 자동화 │ ├── 📁 backend\\ ← Spring Boot 프로젝트 │ ├── 📁 src\\ │ ├── 💻 build\\libs\\APP.war ← 빌드 결과 (bootWar) │ ├── 📜 start.sh / stop.sh / restart.sh │ └── 📄 deploy.bat ← 백엔드 배포 자동화 │ └── 📄 deploy-all.bat ← 🌟 풀스택 통합 배포

📁 /var/www/krules/ ├── 📁 frontend/ ← React 정적 파일 │ ├── 📄 index.html │ └── 📁 assets/ │ ├── 📁 backend/ ← Spring Boot WAR │ ├── 💻 APP.war │ ├── 📜 start.sh │ ├── 📜 stop.sh │ └── 📜 restart.sh │ └── 📁 log/ └── 📰 appwar_*.log ← Spring Boot 실행 로그

# 서버 접속 ssh alohaserver4 # 디렉토리 생성 mkdir -p /var/www/krules/frontend mkdir -p /var/www/krules/backend mkdir -p /var/www/krules/log

# Vite는 VITE_ 접두사 필수 VITE_API_URL=http://localhost:8080/api # VITE_API_URL=http://192.168.30.19:8080/api # 사내망 테스트

# 풀스택 = 같은 도메인 → 상대 경로 사용 권장 VITE_API_URL=/api # 또는 명시적으로 # VITE_API_URL=https://xn--3e0b91t.com/api

// 로컬: <http://localhost:8080/api/products> // 배포: /api/products (같은 도메인) const res = await fetch(`${import.meta.env.VITE_API_URL}/products`);

server: port: 8080 forward-headers-strategy: framework # ⭐ Nginx 프록시 헤더 인식 필수! spring: profiles: active: prod # 세션 쿠키 설정 (OAuth 세션 유지) session: cookie: secure: true # HTTPS에서만 전송 http-only: true # JS에서 접근 불가 (XSS 방지) same-site: lax # OAuth 리다이렉트 허용 # Actuator (헬스체크) management: endpoints: web: exposure: include: health

ssh alohaserver4 nano /etc/nginx/conf.d/krules.conf

# Spring Boot 업스트림 upstream krules_backend { server localhost:8080; keepalive 32; } server { listen 80; server_name xn--3e0b91t.com www.xn--3e0b91t.com; # ════════════════════════════════════════ # 📁 프론트엔드 (React Vite) # ════════════════════════════════════════ root /var/www/krules/frontend; index index.html; # Vite 에셋 캐싱 (해시 파일명이라 안전하게 장기 캐시) location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; } # ════════════════════════════════════════ # 🍃 백엔드 API (Spring Boot) # ════════════════════════════════════════ location /api/ { proxy_pass http://krules_backend; 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; proxy_set_header X-Forwarded-Host $host; proxy_http_version 1.1; proxy_connect_timeout 60s; proxy_send_timeout 60s; proxy_read_timeout 60s; client_max_body_size 20M; } # ════════════════════════════════════════ # 🔐 OAuth 소셜 로그인 경로 (중요!) # ════════════════════════════════════════ # Spring Security OAuth2 기본 엔드포인트를 백엔드로 전달 location /oauth2/ { proxy_pass http://krules_backend; 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; proxy_set_header X-Forwarded-Host $host; # 🍪 OAuth 세션 쿠키가 리다이렉트 후에도 유지되도록 proxy_cookie_path / "/; Secure; SameSite=Lax"; } location /login/oauth2/ { proxy_pass http://krules_backend; 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; proxy_set_header X-Forwarded-Host $host; proxy_cookie_path / "/; Secure; SameSite=Lax"; } # ════════════════════════════════════════ # 🌐 React SPA 라우팅 (맨 마지막에!) # ════════════════════════════════════════ location / { try_files $uri $uri/ /index.html; } # ════════════════════════════════════════ # 공통 설정 # ════════════════════════════════════════ gzip on; gzip_vary on; gzip_min_length 256; gzip_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml; # 로그 access_log /var/log/nginx/krules_access.log; error_log /var/log/nginx/krules_error.log; }

nginx -t && systemctl reload nginx

@echo off chcp 65001 > nul echo. echo ============================================= echo [Frontend] React Vite Build ^& Deploy echo ============================================= set PROJECT_DIR=%~dp0 set REMOTE_USER=root set REMOTE_HOST=alohaserver4.cafe24.com set REMOTE_PATH=/var/www/krules/frontend/ set REMOTE_PASS=❓❓❓❓❓ cd /d %PROJECT_DIR% echo [1/2] npm run build... call npm run build if errorlevel 1 ( pause & exit /b 1 ) echo [2/2] dist/ 업로드... pscp -pw %REMOTE_PASS% -r dist\\* %REMOTE_USER%@%REMOTE_HOST%:%REMOTE_PATH% if errorlevel 1 ( pause & exit /b 1 ) echo. echo 프론트엔드 배포 완료! echo <https://xn--3e0b91t.com> pause

@echo off chcp 65001 > nul echo. echo ============================================= echo [Backend] Spring Boot bootWar ^& Deploy echo ============================================= set PROJECT_DIR=%~dp0 set REMOTE_USER=root set REMOTE_HOST=alohaserver4.cafe24.com set REMOTE_PATH=/var/www/krules/backend set REMOTE_PASS=❓❓❓❓❓ cd /d %PROJECT_DIR% echo [1/3] bootWar 빌드... call gradlew.bat clean bootWar if errorlevel 1 ( pause & exit /b 1 ) echo [2/3] APP.war + sh 업로드... pscp -pw %REMOTE_PASS% build\\libs\\APP.war %REMOTE_USER%@%REMOTE_HOST%:%REMOTE_PATH%/APP.war pscp -pw %REMOTE_PASS% start.sh stop.sh restart.sh %REMOTE_USER%@%REMOTE_HOST%:%REMOTE_PATH%/ if errorlevel 1 ( pause & exit /b 1 ) echo [3/3] 서버에서 restart.sh 실행... plink -pw %REMOTE_PASS% %REMOTE_USER%@%REMOTE_HOST% "chmod +x %REMOTE_PATH%/*.sh && cd %REMOTE_PATH% && bash restart.sh" if errorlevel 1 ( pause & exit /b 1 ) echo. echo 백엔드 배포 완료! pause

@echo off chcp 65001 > nul echo. echo ===================================================== echo 🚀 k-rules Full-Stack Deploy echo ===================================================== echo. set ROOT=%~dp0 :: ──────────────────────────────────────────── :: [1] 백엔드 먼저 배포 (API 먼저 준비) :: ──────────────────────────────────────────── echo [1/2] Backend 배포 시작... echo. cd /d %ROOT%backend call deploy.bat if errorlevel 1 ( echo [실패] 백엔드 배포 실패 - 프론트 배포 중단 pause exit /b 1 ) :: ──────────────────────────────────────────── :: [2] 프론트엔드 배포 :: ──────────────────────────────────────────── echo. echo [2/2] Frontend 배포 시작... echo. cd /d %ROOT%frontend call deploy.bat if errorlevel 1 ( echo [실패] 프론트엔드 배포 실패 pause exit /b 1 ) echo. echo ===================================================== echo ✅ 풀스택 배포 완료! echo 🌐 <https://xn--3e0b91t.com> echo ===================================================== pause

spring: security: oauth2: client: registration: google: client-id: ${GOOGLE_CLIENT_ID} client-secret: ${GOOGLE_CLIENT_SECRET} scope: - profile - email # ⭐ context-path: /api 이므로 /api/ 가 붙어야 함! redirect-uri: "https://xn--3e0b91t.com/api/login/oauth2/code/google" kakao: client-id: ${KAKAO_CLIENT_ID} client-secret: ${KAKAO_CLIENT_SECRET} redirect-uri: "<https://xn--3e0b91t.com/api/login/oauth2/code/kakao>" authorization-grant-type: authorization_code client-authentication-method: client_secret_post scope: - profile_nickname - account_email provider: kakao: authorization-uri: <https://kauth.kakao.com/oauth/authorize> token-uri: <https://kauth.kakao.com/oauth/token> user-info-uri: <https://kapi.kakao.com/v2/user/me> user-name-attribute: id

# ✅ {baseUrl} 방식 — 환경별 도메인이 자동 적용됨 spring: security: oauth2: client: registration: google: client-id: ${GOOGLE_CLIENT_ID} client-secret: ${GOOGLE_CLIENT_SECRET} scope: [profile, email] redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}" # ↑ Spring Security 기본값! # context-path: /api 이면 {baseUrl} = https://xn--3e0b91t.com/api # → 실제 URL: https://xn--3e0b91t.com/api/login/oauth2/code/google ✅ kakao: client-id: ${KAKAO_CLIENT_ID} client-secret: ${KAKAO_CLIENT_SECRET} redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}" authorization-grant-type: authorization_code client-authentication-method: client_secret_post scope: [profile_nickname, account_email] provider: kakao: authorization-uri: <https://kauth.kakao.com/oauth/authorize> token-uri: <https://kauth.kakao.com/oauth/token> user-info-uri: <https://kapi.kakao.com/v2/user/me> user-name-attribute: id

// VITE_API_URL 에서 /api 접미를 제거해 호스트만 추출 // 예) <http://localhost:8080/api> → <http://localhost:8080> // <https://xn--3e0b91t.com/api> → <https://xn--3e0b91t.com> export const getBackendBaseUrl = () => { const base = import.meta.env.VITE_API_URL || '<http://localhost:8080/api>'; return base.replace(/\\/api\\/?$/, ''); }; // 소셜 로그인 시작: 백엔드 /api/oauth2/authorization/{provider} 로 이동 // context-path: /api 이므로 /api/ 접두사가 반드시 필요! export const startSocialLogin = (provider) => { const host = getBackendBaseUrl(); window.location.href = `${host}/api/oauth2/authorization/${provider}`; }; // 이미 로그인된 상태에서 소셜 계정 연동 시작 export const startSocialLink = async (provider) => { const host = getBackendBaseUrl(); await api.post(`/me/social/link-init/${provider}`, {}, { withCredentials: true }); window.location.href = `${host}/api/oauth2/authorization/${provider}`; };

// LoginPage.jsx import { startSocialLogin } from '../services/memberService'; function LoginPage() { return ( <> <button onClick={() => startSocialLogin('google')}>구글로 로그인</button> <button onClick={() => startSocialLogin('kakao')}>카카오로 로그인</button> </> ); }

// C:\\DEV\\k-rules\\backend\\src\\main\\java\\...\\OAuth2SuccessHandler.java @Component public class OAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler { @Override public void onAuthenticationSuccess( HttpServletRequest request, HttpServletResponse response, Authentication authentication) throws IOException { // 로그인 후 프론트의 특정 페이지로 이동 String targetUrl = "/login/success"; // 상대 경로! Nginx가 알아서 처리 getRedirectStrategy().sendRedirect(request, response, targetUrl); } }

// SecurityConfig.java http .oauth2Login(oauth -> oauth .successHandler(oAuth2SuccessHandler) .failureUrl("/login?error=oauth") );

#!/bin/bash cd "$(dirname "$0")" LOG_DIR="../log" mkdir -p "$LOG_DIR" LOG_FILE="$LOG_DIR/appwar_$(date +%Y%m%d_%H%M%S).log" JAVA_CMD=${JAVA_HOME:-}/bin/java if [ ! -x "$JAVA_CMD" ]; then JAVA_CMD=java fi JAVA_OPTS="-Xms128m -Xmx256m" # ⭐ OAuth 환경변수 (별도 파일에서 로드) if [ -f ./env.sh ]; then source ./env.sh fi $JAVA_CMD $JAVA_OPTS -jar APP.war > "$LOG_FILE" 2>&1 &

#!/bin/bash export GOOGLE_CLIENT_ID="xxxxx.apps.googleusercontent.com" export GOOGLE_CLIENT_SECRET="xxxxx" export KAKAO_CLIENT_ID="xxxxx" export KAKAO_CLIENT_SECRET="xxxxx" export SPRING_PROFILES_ACTIVE=prod

# 서버에서 env.sh 파일 보호 chmod 600 /var/www/krules/backend/env.sh

# Let's Encrypt 인증서 발급 sudo certbot --nginx -d xn--3e0b91t.com -d www.xn--3e0b91t.com # HTTP → HTTPS 리다이렉트는 certbot이 자동 추가 # 자동 갱신 확인 sudo certbot renew --dry-run

upstream krules_backend { server localhost:8080; keepalive 32; } # HTTP → HTTPS 리다이렉트 server { listen 80; server_name xn--3e0b91t.com www.xn--3e0b91t.com; return 301 https://$host$request_uri; } server { listen 443 ssl http2; server_name xn--3e0b91t.com www.xn--3e0b91t.com; ssl_certificate /etc/letsencrypt/live/xn--3e0b91t.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/xn--3e0b91t.com/privkey.pem; # ⭐ 보안 헤더 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always; add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; root /var/www/krules/frontend; index index.html; location /assets/ { expires 1y; add_header Cache-Control "public, immutable"; } # API + OAuth 공통 프록시 설정 location ~ ^/(api|oauth2|login/oauth2)/ { proxy_pass http://krules_backend; 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; proxy_set_header X-Forwarded-Host $host; proxy_http_version 1.1; # OAuth 세션 쿠키 보호 proxy_cookie_path / "/; Secure; SameSite=Lax"; proxy_connect_timeout 60s; proxy_read_timeout 60s; client_max_body_size 20M; } location / { try_files $uri $uri/ /index.html; } gzip on; gzip_types text/plain text/css application/json application/javascript text/xml; }