마켓 백엔드 엔진 4 : Next.js 프론트 생성, Docker Compose로 통합 배포, 더미 데이터 생성

이번 단계에서는 개발 환경을 단일 명령으로 재현하기 위해 Docker Compose로 

프론트엔드 + 백엔드 + PostgreSQL 통합 구성했습니다.

 

Next.js 프론트엔드 초안 생성

상품 리스트 검색 및 주문 생성만 가능한 첫 페이지를 만들었습니다.

 

docker-compose.yml

• 로컬에서 postgres + backend + frontend를 한 번에 실행하는 오케스트레이션 파일입니다.
• backend는 DB 주소를 postgres 서비스로 연결하고, frontend는 BACKEND_ORIGIN=http://backend:8080으로 백엔드와 연결됩니다.
• Postgres 데이터는 marketengine-pgdata 볼륨에 저장해 컨테이너 재생성 후에도 유지됩니다.

 

backend/Dockerfile

• Spring Boot 백엔드 이미지를 만드는 파일입니다(멀티스테이지).
• Gradle로 bootJar 빌드 후, JRE 이미지에 결과 app.jar만 복사해 실행합니다.
• 컨테이너 시작 시 java -jar /app/app.jar로 서버를 띄웁니다.

frontend/Dockerfile

• Next.js 앱 이미지를 만드는 파일입니다(멀티스테이지).
• npm ci로 의존성 설치 → npm run build로 빌드 → 실행용 이미지에서 npm run start로 서비스합니다.
• BACKEND_ORIGIN 빌드 인자를 받아 프록시 대상 주소를 주입합니다.

frontend/next.config.ts (백엔드 주소 환경변수화)

• Next.js 설정 파일입니다.
• /backend/ 요청을 실제 백엔드(BACKEND_ORIGIN)로 프록시(rewrite)해서 프론트에서 같은 도메인처럼 호출하게 해줍니다.

실행 방법

docker compose up --build

접속 주소:

• Frontend: http://localhost:3000
• Backend: http://localhost:8080
• Swagger UI: http://localhost:8080/swagger-ui.html

 

더미데이터 생성

sql문으로 간단한 더미데이터를 생성했습니다.

• members 50건 생성
  • 이메일: user1@... ~ user50@...
  • 이름: User 1 ~ User 50
• products 500건 생성
  • 이름: Product 1 ~ Product 500
  • 가격: 랜덤(대략 10~1000 범위, 소수 2자리)
  • 재고: 랜덤(0~199)
• orders 2000건 생성
  • 회원/상품/수량 랜덤 선택
  • 상태 비율 대략:
    • CREATED 80%
    • CONFIRMED 15%
    • CANCELLED 5%
  • unit_price는 상품 가격 사용
  • total_amount = unit_price * quantity