Add README files for root, backend, and frontend
This commit is contained in:
parent
d79b92a8fa
commit
5855a6f08a
3 changed files with 207 additions and 9 deletions
63
README.md
Normal file
63
README.md
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
# 🎬 FFmpeg GUI
|
||||
|
||||
온라인 영상 URL을 입력하여 다운로드할 수 있는 웹 기반 FFmpeg GUI 애플리케이션입니다.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## ✨ 주요 기능
|
||||
|
||||
- 🔗 **URL 기반 다운로드** - 온라인 영상 URL 입력으로 간편하게 다운로드
|
||||
- ✂️ **구간 설정** - 시작/종료 시간 지정으로 원하는 부분만 추출
|
||||
- 📝 **파일명 지정** - 다운로드 시 원하는 파일명으로 저장
|
||||
- 🛡️ **헤더 옵션** - User-Agent, Referer 설정으로 403 에러 우회
|
||||
- ⚡ **실시간 스트리밍** - FFmpeg 직접 스트리밍으로 빠른 다운로드
|
||||
|
||||
---
|
||||
|
||||
## 📁 프로젝트 구조
|
||||
|
||||
```
|
||||
ffmpeg-gui/
|
||||
├── frontend/ # React + Vite 프론트엔드
|
||||
├── backend/ # Node.js + Express 백엔드
|
||||
├── docker-compose.yml # Docker Compose 설정
|
||||
└── Dockerfile # Docker 빌드 파일
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 실행 방법
|
||||
|
||||
### Docker (권장)
|
||||
|
||||
```bash
|
||||
docker compose up -d
|
||||
```
|
||||
|
||||
### 개발 모드
|
||||
|
||||
```bash
|
||||
# 백엔드
|
||||
cd backend && npm install && npm start
|
||||
|
||||
# 프론트엔드
|
||||
cd frontend && npm install && npm run dev
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌐 접속
|
||||
|
||||
- **URL**: https://ffmpeg.caadiq.co.kr
|
||||
- **포트**: 3000 (내부)
|
||||
|
||||
---
|
||||
|
||||
## 📄 라이선스
|
||||
|
||||
MIT License
|
||||
79
backend/README.md
Normal file
79
backend/README.md
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
# 🖥️ FFmpeg GUI - Backend
|
||||
|
||||
FFmpeg를 활용한 영상 다운로드/변환 API 서버입니다.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ 기술 스택
|
||||
|
||||
| 기술 | 설명 |
|
||||
| ----------- | ------------- |
|
||||
| **Node.js** | 런타임 환경 |
|
||||
| **Express** | 웹 프레임워크 |
|
||||
| **FFmpeg** | 영상 처리 |
|
||||
| **UUID** | 고유 ID 생성 |
|
||||
|
||||
---
|
||||
|
||||
## 📡 API 엔드포인트
|
||||
|
||||
### `POST /api/download-request`
|
||||
|
||||
다운로드 요청을 생성합니다.
|
||||
|
||||
**Request Body:**
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "영상 URL",
|
||||
"title": "파일명 (선택)",
|
||||
"options": {
|
||||
"startTime": "00:00:00",
|
||||
"endTime": "00:01:00",
|
||||
"userAgent": "브라우저 UA",
|
||||
"referer": "리퍼러 URL"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Response:**
|
||||
|
||||
```json
|
||||
{
|
||||
"id": "uuid-v4-format"
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### `GET /api/download/:id`
|
||||
|
||||
생성된 요청 ID로 영상을 다운로드합니다.
|
||||
|
||||
- 요청은 **5분 후 자동 만료**됩니다.
|
||||
- `Content-Type: video/mp4`로 스트리밍됩니다.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 실행 방법
|
||||
|
||||
```bash
|
||||
# 의존성 설치
|
||||
npm install
|
||||
|
||||
# 서버 실행
|
||||
npm start
|
||||
```
|
||||
|
||||
서버는 **포트 3000**에서 실행됩니다.
|
||||
|
||||
---
|
||||
|
||||
## ⚠️ 요구사항
|
||||
|
||||
- Node.js 18+
|
||||
- FFmpeg 설치 필요 (`ffmpeg`, `ffprobe`)
|
||||
|
|
@ -1,16 +1,72 @@
|
|||
# React + Vite
|
||||
# 🎨 FFmpeg GUI - Frontend
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
FFmpeg GUI의 웹 인터페이스입니다.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
|
||||
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
---
|
||||
|
||||
## React Compiler
|
||||
## 🛠️ 기술 스택
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
| 기술 | 설명 |
|
||||
| --------------- | -------------- |
|
||||
| **React 18** | UI 라이브러리 |
|
||||
| **Vite** | 빌드 도구 |
|
||||
| **TailwindCSS** | CSS 프레임워크 |
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
---
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
## ✨ 주요 기능
|
||||
|
||||
- 📱 **반응형 디자인** - 모바일/데스크톱 최적화
|
||||
- 🎯 **직관적인 UI** - 간단한 입력 폼
|
||||
- ⏱️ **시간 설정** - 시작/종료 시간 입력
|
||||
- 🔧 **고급 옵션** - User-Agent, Referer 설정
|
||||
|
||||
---
|
||||
|
||||
## 🚀 실행 방법
|
||||
|
||||
### 개발 모드
|
||||
|
||||
```bash
|
||||
# 의존성 설치
|
||||
npm install
|
||||
|
||||
# 개발 서버 실행
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 프로덕션 빌드
|
||||
|
||||
```bash
|
||||
# 빌드
|
||||
npm run build
|
||||
|
||||
# 빌드 결과물: dist/
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 구조
|
||||
|
||||
```
|
||||
frontend/
|
||||
├── src/
|
||||
│ ├── App.jsx # 메인 앱 컴포넌트
|
||||
│ ├── App.css # 스타일
|
||||
│ └── main.jsx # 엔트리 포인트
|
||||
├── public/
|
||||
│ └── favicon.svg # 파비콘
|
||||
└── index.html # HTML 템플릿
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ⚙️ 환경 설정
|
||||
|
||||
| 변수 | 기본값 | 설명 |
|
||||
| -------------- | ------ | -------------- |
|
||||
| `VITE_API_URL` | `/api` | API 엔드포인트 |
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue