4/24 세미프로젝트 1일차: 기획 및 설계

이제 진짜 프로젝트 시작일이다.

간략하게 어떻게 진행할지 강사님의 설명이 있었고, 바로 팀원들과 프로젝트가 시작됐다.

망구성도

오전에는 팀원들과 각자 어떻게 구성할지 이야기해보고 시작했다.

나는 바로 어제 계획한 서버들의 네트워크 구성도를 그렸다.

정리하고 망도를 그리니 점심시간이 다 됐다.

 

그 이후는 DMZ 에 서버들이 사용자 요청에 어떻게 연계되고 연결 되어야 하는지 한 번 적어봤다.

[사용자 웹 브라우저]
    ↓ 클릭 (영화 재생 버튼)
[0] 라우터 겸 HAProxy(라운드로빈으로 웹서버 2개로 분산)
    ↓
[1] Vue.js 프론트 (DMZ: NGINX)
    ↓
[2] /api/movies/:id 요청
    ↓
[3] NGINX에서 /api 경로 분기
    ↓
[4] Spring Boot API 서버 (DMZ)
    ↓
[5] DB 서버 (Internal: MariaDB)
    ↓
[6] API 응답: 영상 제목, 경로 (.m3u8) 등 메타데이터 전달
    ↓
[7] 브라우저가 영상 URL (.m3u8)로 스트리밍 요청 시작
    ↓
[8] NGINX에서 /video 경로 분기
    ↓
[9] 스트리밍 서버(NGINX-RTMP, static 파일 제공)
    ↓
[10] 스트리밍 서버가 내부 파일서버(NFS)에서 .ts 조각 읽음
    ↓
[11] 브라우저에서 영상 재생 시작 🎥

시각 구조 흐름도 (텍스트 버전)

plaintext
복사편집
[User]
  │
  ▼
[Router + HAProxy(DMZ)]
  │
  ▼
[NGINX (DMZ)]
  ├── / → Vue 앱 index.html
  ├── /api → Spring API 서버 → Internal DB
  └── /video → 스트리밍 서버 → Internal NFS
                          ↓
              브라우저에서 영상 출력

 

이러한 구조로 요청이 처리될 것이다.

오후에는 Vue.js로 넷플릭스 홈페이지를 따라해 만들고 목데이터를 조금 넣어 메인페이지를 만들었다.

프로젝트 규모 상 메인페이지로만 진행하고 영상 한 두 개 재상할 수 있을 정도로만 만들 예정이다.

 

miniflix 메인화면

 

내일 해야할 거

공통적으로 각 서버들 VM 만들고 연결하기

 

프론트

• axios 요청 url 정리

 

백엔드

• 요구사항 명세서
• API 명세서
• 이 부분은 아주 적은 기능으로만 구현할 거라 아주 간단하게만 정리

 

DB

• 간략하게 스키마 만들고 목데이터 넣기

 

스트리밍 서버

• 스트리밍 서버가 어떻게 동작하는지 공부하기

 

CDN 서버

• 이건 후 순위로 놔두고 일단 VM만 만들어 놓기