뮤직 차트 비교 사이트 만들기 - 풀스택, 개발, 바이브코딩

음악 차트 비교 웹 서비스 만들기 (FastAPI + React + 배포까지)

프로젝트 소개

국내 주요 음악 사이트(멜론, 지니, 벅스)의 차트를 수집하고,
사이트별로 조회하거나 곡/가수 기준으로 비교할 수 있는 웹 서비스를 제작했습니다.

단순한 크롤링을 넘어서

실제 서비스처럼 배포까지 진행한 프로젝트입니다.

---

결과 화면

• 사이트별 차트 조회 (멜론 / 지니 / 벅스)
• TOP10 / TOP50 / TOP100 필터
• 아티스트 비중 시각화
• 곡 / 가수 검색 기능
• 사이트 간 비교 기능

---

기술 스택

Backend

• FastAPI
• BeautifulSoup (크롤링)
• Python

Frontend

• React (Vite + TypeScript)
• Chart 라이브러리 (그래프)

Infra / DevOps

• Ubuntu 서버
• Nginx (리버스 프록시)
• Certbot (HTTPS 적용)
• Crontab (자동 크롤링)
• GitHub (버전 관리)

---

전체 구조

 

사용자 브라우저
    ↓
music-chart.9seebird.me
    ↓
Nginx (80 / 443)
   ├─ /        → React 정적 파일 (frontend/dist)
   └─ /api     → FastAPI (systemd, 8000)
                     ↓
              JSON 데이터 읽기
                     ↓
     backend/data/melon, genie, bugs
                     ↑
         crawler.py (crontab, 매시간 실행)

사용자 → Nginx → React (정적 파일)
                 → FastAPI (API 서버)
                        → 크롤링 데이터 (JSON)

---

주요 기능 구현

1️⃣ 음악 차트 크롤링

각 사이트에서 데이터를 수집하여 JSON 파일로 저장

python crawler.py

 

project/
├── backend/
│ ├── app/
│ │ ├── main.py
│ │ ├── routers/
│ │ └── services/
│ ├── data/
│ │ ├── melon/
│ │ ├── genie/
│ │ └── bugs/
│
├── frontend/
│ ├── src/
│ │ ├── App.tsx
│ │ └── components/

• 사이트별 디렉토리 분리
• 날짜 기준 파일 생성

---

2️⃣ 자동 크롤링 (Crontab)

매 시간 정각마다 크롤링 실행

---

3️⃣ API 서버 (FastAPI)

크롤링된 데이터를 API로 제공

@app.get("/api/chart")

 

---

4️⃣ 프론트엔드 (React)

• 차트 리스트 UI 구성
• 검색 기능 구현
• 그래프 시각화

---

배포 과정

1️⃣ Nginx 설정

• 80 → 443 리다이렉트
• API는 FastAPI로 프록시

server {
    server_name music-chart.9seebird.me;

    root /www/music_chart/frontend/dist;
    index index.html;

    location /api/ {
        proxy_pass http://127.0.0.1:8000;
        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;
    }
}

---

2️⃣ HTTPS 적용 (Certbot)

sudo certbot --nginx -d music-chart.9seebird.me

---

3️⃣ 포트포워딩

• 80, 443 → 서버 연결
• 내부 FastAPI(8000)는 외부 개방 X

---

배포 자동화

코드 수정 후 간단하게 배포 가능하도록 스크립트 작성

프론트 배포

git pull origin main
npm run build
sudo systemctl reload nginx

백엔드 배포

git pull origin main
sudo systemctl restart music-chart

---

트러블슈팅

1️⃣ Certbot 인증 실패

문제:

• DNS 레코드 누락
• www 도메인 미설정

해결:

• A 레코드 추가
• 도메인 연결 확인

---

2️⃣ 포트포워딩 혼란

문제:

• 8000 포트 안 열었는데 접속됨?

원인:

• Nginx가 80/443에서 받아서 내부 8000으로 전달

리버스 프록시 구조 이해

---

3️⃣ 캐시 문제

문제:

• 수정했는데 반영 안됨

해결:

• 강력 새로고침 (Ctrl + Shift + R)

---

느낀 점

• 단순히 기능 구현보다 배포까지 해보는 경험이 훨씬 중요
• Nginx, HTTPS, 포트포워딩 등 실제 서비스 구조 이해
• “내가 만든 서비스가 인터넷에서 돌아간다”는 경험이 가장 컸음

---

앞으로 개선할 점

• Redis 캐싱 적용
• API 속도 개선
• UI/UX 개선
• Docker로 컨테이너화

---

프로젝트 링크

• GitHub: https://github.com/9seebrid/music_chart
• 서비스: https://music-chart.9seebird.me/

---