Vite(React) + Spring Boot(Java) 기반의 당근마켓 클론 코딩 프로젝트입니다. 본 가이드는 학부생 및 공동 개발자를 위해 로컬 환경 구축 방법부터 오라클 클라우드 배포 가이드까지 설명합니다.
| 구분 | 기술 스택 | 상세 역할 |
|---|---|---|
| Frontend | React, TypeScript, Vite | 사용자 인터페이스, 라우팅 및 화면 구현 |
| Backend | Spring Boot, JPA | REST API 구현, 비즈니스 로직 처리 |
| Database | PostgreSQL | 사용자, 상품, 채팅 데이터의 영구 저장 및 관리 |
| Auth | Firebase Auth (Google) | 구글 계정 기반 사용자 로그인/회원가입 연동 |
| Web Server | Nginx | 운영 서버에서 프론트엔드 배포 및 API 리버스 프록시 역할 |
| Hosting | Oracle Cloud Free Tier | 24시간 중단 없는 클라우드 가상 서버 운영 |
| DNS | DuckDNS | 도메인을 운영 서버의 퍼블릭 IP에 동적 바인딩 |
Mac 환경에서 Homebrew로 PostgreSQL을 시작하고 데이터베이스를 생성합니다.
# 1. PostgreSQL 서비스 시작
brew services start postgresql@18
# 2. carrot 데이터베이스 생성
createdb carrot
# (선택) psql로 직접 데이터베이스 진입해서 조회하기
psql postgres
# psql 진입 후: \c carrot (carrot 데이터베이스로 전환)backend/src/main/resources/application.yml의 데이터베이스 계정명(username)이 본인의 Mac 계정명과 일치하는지 확인 후 실행합니다.
cd backend
# Gradle 빌드 및 컴파일 확인
./gradlew compileJava
# 백엔드 서버 로컬 실행 (포트: 9000)
./gradlew bootRunfrontend/.env 파일에 백엔드 API 주소(VITE_API_BASE_URL=http://localhost:9000/api)가 잘 적혀있는지 확인 후 실행합니다.
cd frontend
# 의존성 패키지 설치
npm install
# 프론트엔드 서버 로컬 실행 (포트: 5999)
npm run dev로컬에서 가짜(Dummy) 데이터를 넣고 기능을 다 만든 뒤, 운영 서버로 이관하기 위해 DDL(테이블 구조)과 DML(테이블 데이터)을 SQL 파일로 백업합니다.
# 로컬 carrot DB의 스키마와 데이터를 sql 파일로 백업하기
pg_dump -U yongwon -d carrot -f carrot_backup.sql
# 💡 이 백업한 'carrot_backup.sql' 파일을 운영 서버로 전송하여 복구합니다!- Oracle Cloud Infrastructure(OCI) 콘솔 로그인 후 **VM 인스턴스(Ubuntu 22.04 LTS)**를 생성합니다.
- 할당받은 공인 IP(Public IP) 주소와 다운로드한 SSH 개인키(
.key)를 확인합니다.
- OCI 가상 클라우드 네트워크(VCN)의 **보안 목록(Security List)**에서 수신 규칙(Ingress Rules)을 추가합니다.
HTTP포트인80번 포트 개방 (Nginx 접속용)
- Ubuntu 서버 내부 방화벽(
iptables/ufw) 설정에서도 80번 포트를 추가 개방합니다.
- 운영 서버(Ubuntu)에 접속하여 PostgreSQL을 설치합니다.
sudo apt update sudo apt install postgresql postgresql-contrib
- 운영 데이터베이스를 만들고, 로컬에서 추출한
carrot_backup.sql을 이용해 복원합니다.# sql 파일을 운영 서버로 복사해 온 뒤 실행 psql -U postgres -d carrot -f carrot_backup.sql
- 프론트엔드 빌드:
# 로컬에서 빌드 후 생성된 dist 폴더를 운영 서버의 /var/www/html 경로로 복사 npm run build - 백엔드 빌드 및 실행:
# 스프링 부트를 빌드하여 생긴 .jar 파일을 운영 서버에서 백그라운드로 실행 nohup java -jar backend-0.0.1-SNAPSHOT.jar &
- Nginx 설정 (
/etc/nginx/sites-available/default수정):server { listen 80; server_name yongwon.duckdns.org; # 본인의 DuckDNS 도메인 주소 # 1. 프론트엔드 서빙 location / { root /var/www/html; index index.html index.htm; try_files $uri $uri/ /index.html; # React SPA 라우팅 지원 } # 2. 백엔드 API 요청 리버스 프록시 location /api/ { proxy_pass http://localhost:9000; # 실행 중인 스프링 부트 서버 포트 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 systemctl restart nginx
- DuckDNS 공식 홈페이지에 접속합니다.
- 원하는 서브도메인(예:
yongwon)을 추가하고, Oracle Cloud 가상 서버의 공인 IP를 지정합니다. - 이제 웹 브라우저에서
http://yongwon.duckdns.org로 접속하면 사용자가 귀하의 사이트에 정상 접속할 수 있습니다!
Firebase Authentication의 구글 로그인은 사전에 등록된 승인 도메인에서만 정상 동작합니다.
- Firebase 콘솔에 접속하여 사용 중인 프로젝트를 선택합니다.
- Build(빌드) ➡️ Authentication ➡️ Settings(설정) 탭으로 이동합니다.
- 왼쪽 메뉴에서 **Authorized domains(승인된 도메인)**를 클릭합니다.
- [Add domain] 버튼을 클릭하여 새로 만든 DuckDNS 도메인(예:
yongwon.duckdns.org)과 서버 공인 IP(예:168.107.38.158)를 각각 등록합니다.