claude-bot
e4e697d287
직접 실행과 Docker compose 가 같은 .env 한 파일로 PORT/HOST/SESSION_SECRET 등을 공유합니다. 컨테이너는 node:22-bookworm-slim 기반에 ffmpeg + 번들된 yt-dlp 포함, data 볼륨 마운트로 영속화합니다. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
99 lines
5.3 KiB
Markdown
99 lines
5.3 KiB
Markdown
# 비디오 사이트
|
|
## 영상 업로드 및 저장을 위한 사이트
|
|
|
|
## 실행
|
|
|
|
처음 한 번은 `setup` 으로 의존성 + yt-dlp 바이너리 + 빌드까지 한 번에 끝낼 수 있어요:
|
|
|
|
```bash
|
|
cp .env.example .env # 포트/호스트 등 환경변수 편집
|
|
npm run setup # npm install + ./bin/yt-dlp 다운로드 + tsc
|
|
npm start # .env 의 HOST:PORT 로 바인딩
|
|
```
|
|
|
|
수동으로 단계별로 하고 싶다면:
|
|
|
|
```bash
|
|
npm install
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
설정은 전부 `.env` 한 파일로 모았습니다 (`.env.example` 참고). 직접 실행과 Docker compose 양쪽에서 같은 파일을 씁니다.
|
|
|
|
- `HOST` — 바인딩 주소. 외부 노출이 필요하면 `0.0.0.0`, 로컬 전용이면 `127.0.0.1`. Docker 안에서는 반드시 `0.0.0.0`.
|
|
- `PORT` — 바인딩 포트 (기본 `3000`). 바꾸면 compose 의 호스트 포트도 자동으로 따라갑니다.
|
|
- `SESSION_SECRET` — 운영 시 반드시 충분히 긴 랜덤 문자열로 교체.
|
|
- `UPLOAD_MAX_BYTES` — 업로드 용량 한도(바이트). 비우면 무제한.
|
|
- `HTTP_REQUEST_TIMEOUT_MS` — 대용량 업로드용 HTTP 요청 타임아웃(밀리초). `0`/미설정이면 무제한.
|
|
- 관리자 비밀번호는 `account.json` 의 `password` 값 (초기값 `admin`, 운영 시 반드시 변경).
|
|
|
|
## Docker
|
|
|
|
컨테이너로 띄울 거면 `Dockerfile` + `docker-compose.yml` 그대로 쓰면 됩니다. ffmpeg, yt-dlp 도 이미지에 포함됩니다.
|
|
|
|
```bash
|
|
cp .env.example .env # 처음 한 번. HOST=0.0.0.0 인지 확인.
|
|
docker compose up -d --build
|
|
curl http://localhost:3000/ # PORT 바꿨으면 그 포트로
|
|
# LAN 의 다른 기기에서: http://<호스트IP>:<PORT>/
|
|
```
|
|
|
|
핵심: 컨테이너 안에서는 반드시 `HOST=0.0.0.0` 이어야 외부 접근됩니다. compose 가 `.env` 의 `PORT` 를 읽어 호스트 포트 매핑 (`${PORT:-3000}:${PORT:-3000}`) 까지 자동으로 따라갑니다.
|
|
|
|
데이터는 `./data` 가 `/app/data` 에 마운트되어 영속화됩니다 (`folders/`, `jobs/`, `tmp/`).
|
|
|
|
## 외부 의존
|
|
|
|
- `yt-dlp` — YouTube 영상 가져오기. `npm run setup` 이 `./bin/yt-dlp` 로 자동 설치하지만 PATH 에 이미 있어도 됩니다.
|
|
- `ffmpeg` — 영상 트림 저장 (`PATH` 에 설치). 없으면 trim 설정만 저장됩니다. `npm run setup` 이 설치 여부를 검사해 안내 메시지를 출력합니다.
|
|
|
|
## 데이터 위치
|
|
|
|
```
|
|
data/
|
|
folders/<폴더이름>/<videoId>/
|
|
meta.json # 영상 메타 (제목, trim, 원본/편집본 파일명)
|
|
original.<ext> # 원본 (항상 보존)
|
|
edited.<ext> # 편집본 (저장 시 생성)
|
|
jobs/<jobId>.json # YouTube 다운로드 작업 상태
|
|
```
|
|
|
|
## 스펙
|
|
|
|
### 메인 페이지 (/)
|
|
- 동영상이 저장되어있는 폴더를 나열합니다.
|
|
- 폴더를 선택해 안에 영상을 확인할수있습니다.
|
|
- 폴더를 선택하면 /folder/:폴더이름 으로 이동합니다.
|
|
|
|
### 폴더 화면 페이지 (/folder/:폴더이름)
|
|
- 폴더 내부에 영상을 유튜브처럼 목록으로 보여줍니다.
|
|
- 누르면 재생 플레이어가 뜨며 영상이 재생됩니다.
|
|
- 재생플레이어는 /player/:videoId로 합니다.
|
|
- 플레이어는 내부팝업처럼 띄워줍니다.
|
|
|
|
### 관리자 페이지 (/op)
|
|
- 동영상을 추가, 삭제, 관리하는 페이지입니다.
|
|
- https://git.tkrmagid.kr/tkrmagid/minecraft_launcher repo에 사이트에 있는 op페이지에 로그인 로직을 똑같이 가져와서 적용합니다. (navbar도 채택해서 가져오기)
|
|
- 메인 페이지처럼 폴더를 나열하고 우클릭으로 폴더 이름 수정, 삭제가 가능하도록 합니다.
|
|
- 폴더를 선택하면 /op/folder/:폴더이름 으로 이동합니다.
|
|
- 오른쪽위에 폴더추가버튼으로 폴더를 추가할수있도록 합니다.
|
|
- 폴더추가버튼 누르면 팝업으로 생성할 폴더이름을 작성한뒤 생성누르면 폴더 생성되게 설정합니다.
|
|
|
|
### 관리자 폴더 화면 (/op/folder/:폴더이름)
|
|
- 폴더 화면 페이지처럼 유튜브형식으로 영상을 나열하고 우클릭으로 수정, 삭제가 가능하도록 합니다.
|
|
- 오른쪽위에 영상추가버튼으로 영상을 추가할수있도록 합니다.
|
|
- 영상추가버튼 누르면 /op/folder/:폴더이름/video/editor 로 이동합니다.
|
|
|
|
### 영상추가 화면 (/op/folder/:폴더이름/video/editor)
|
|
- 예시1: https://github.com/boostcamp-2020/Project13-Web-Video-Editor
|
|
- 예시2: https://github.com/mifi/lossless-cut
|
|
- 예시1, 예시2 처럼 영상을 수정할수있는 편집기 페이지를 보여줍니다.
|
|
- 영상 추가는 컴퓨터에있는 영상을 드래그 드랍 하거나, 직접 폴더에서 찾거나, 유튜브 영상 주소를 추가해서 영상을 추가할수있도록 합니다.
|
|
- 유튜브에서 영상 가져오는건 백그라운드에서도 진행 되도록해서 하면서 다른걸 할수있도록 합니다.
|
|
- 영상 가져오는 시간을 미리 계산해서 5분 이상 걸릴거같으면 미리 경고를 보냅니다.
|
|
- 위쪽에 네비게이션바를 만듭니다.
|
|
- 네비게이션바 왼쪽에서 영상 이름을 수정합니다.
|
|
- 오른쪽 위에 저장을 누르면 수정한 영상이 저장됩니다.
|
|
- 원본 영상과 수정한 내용을 전부 저장해두고, 관리자폴더화면에서 영상을 우클릭해 수정을 누르면 수정하던 화면을 보여줍니다.
|