feat: Add documentation for API endpoints and directory structure
This commit is contained in:
Peifan Li
182
DEPLOYMENT.md
182
DEPLOYMENT.md
@@ -1,182 +0,0 @@
|
||||
# Deployment Guide for MyTube
|
||||
|
||||
This guide explains how to deploy MyTube to a server or QNAP Container Station.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Docker Hub account
|
||||
- Server with Docker and Docker Compose installed, or QNAP NAS with Container Station installed
|
||||
- Docker installed on your development machine
|
||||
|
||||
## Docker Images
|
||||
|
||||
The application is containerized into two Docker images:
|
||||
|
||||
1. Frontend: `franklioxygen/mytube:frontend-latest`
|
||||
2. Backend: `franklioxygen/mytube:backend-latest`
|
||||
|
||||
## Deployment Process
|
||||
|
||||
### 1. Build and Push Docker Images
|
||||
|
||||
You can customize the build configuration by setting environment variables before running the build script:
|
||||
|
||||
```bash
|
||||
# Optional: Set custom API URLs for the build (defaults to localhost if not set)
|
||||
export VITE_API_URL="http://your-build-server:5551/api"
|
||||
export VITE_BACKEND_URL="http://your-build-server:5551"
|
||||
|
||||
# Make the script executable
|
||||
chmod +x build-and-push.sh
|
||||
|
||||
# Run the script
|
||||
./build-and-push.sh
|
||||
```
|
||||
|
||||
The script will:
|
||||
|
||||
- Build the backend and frontend Docker images optimized for amd64 architecture
|
||||
- Apply the specified environment variables during build time (or use localhost defaults)
|
||||
- Push the images to Docker Hub under your account (franklioxygen)
|
||||
|
||||
### 2. Deploy on Server or QNAP Container Station
|
||||
|
||||
#### For Standard Docker Environment:
|
||||
|
||||
By default, the docker-compose.yml is configured to use Docker's service discovery for container communication:
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
#### For QNAP Container Station or Environments with Networking Limitations:
|
||||
|
||||
If you're deploying to QNAP or another environment where container-to-container communication via service names doesn't work properly, you'll need to specify the host IP:
|
||||
|
||||
1. Create a `.env` file with your server's IP:
|
||||
|
||||
```
|
||||
API_HOST=your-server-ip
|
||||
API_PORT=5551
|
||||
```
|
||||
|
||||
2. Place this file in the same directory as your docker-compose.yml
|
||||
3. Deploy using Container Station or docker-compose:
|
||||
|
||||
```bash
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
#### Volume Paths on QNAP
|
||||
|
||||
The docker-compose file is configured to use the following specific paths on your QNAP:
|
||||
|
||||
```yaml
|
||||
volumes:
|
||||
- /share/CACHEDEV2_DATA/Medias/MyTube/uploads:/app/uploads
|
||||
- /share/CACHEDEV2_DATA/Medias/MyTube/data:/app/data
|
||||
```
|
||||
|
||||
Ensure these directories exist on your server or QNAP before deployment. If they don't exist, create them:
|
||||
|
||||
```bash
|
||||
mkdir -p /share/CACHEDEV2_DATA/Medias/MyTube/uploads
|
||||
mkdir -p /share/CACHEDEV2_DATA/Medias/MyTube/data
|
||||
```
|
||||
|
||||
If deploying to a different server (not QNAP), you may want to modify these paths in the docker-compose.yml file.
|
||||
|
||||
### 3. Access the Application
|
||||
|
||||
Once deployed:
|
||||
|
||||
- Frontend will be accessible at: http://your-server-ip:5556
|
||||
- Backend API will be accessible at: http://your-server-ip:5551/api
|
||||
|
||||
## Docker Networking and Environment Variables
|
||||
|
||||
### Container Networking Options
|
||||
|
||||
The application provides two ways for containers to communicate with each other:
|
||||
|
||||
#### 1. Docker Service Discovery (Default)
|
||||
|
||||
In standard Docker environments, containers can communicate using service names. This is the default configuration:
|
||||
|
||||
```yaml
|
||||
environment:
|
||||
- VITE_API_URL=http://backend:5551/api
|
||||
- VITE_BACKEND_URL=http://backend:5551
|
||||
```
|
||||
|
||||
This works for most Docker environments including Docker Desktop, Docker Engine on Linux, and many managed container services.
|
||||
|
||||
#### 2. Custom Host Configuration (For QNAP and Special Cases)
|
||||
|
||||
For environments where service discovery doesn't work properly, you can specify a custom host:
|
||||
|
||||
```
|
||||
# In .env file:
|
||||
API_HOST=192.168.1.105
|
||||
API_PORT=5551
|
||||
```
|
||||
|
||||
The entrypoint script will detect these variables and configure the frontend to use the specified host and port.
|
||||
|
||||
### How Environment Variables Work
|
||||
|
||||
This application handles environment variables in three stages:
|
||||
|
||||
1. **Build-time configuration** (via ARG in Dockerfile):
|
||||
|
||||
- Default values are set to `http://localhost:5551/api` and `http://localhost:5551`
|
||||
- These values are compiled into the frontend application
|
||||
|
||||
2. **Container start-time configuration** (via entrypoint.sh):
|
||||
|
||||
- The entrypoint script replaces the build-time URLs with runtime values
|
||||
- Uses either service name (backend) or custom host (API_HOST) as configured
|
||||
- This happens every time the container starts, so no rebuild is needed
|
||||
|
||||
3. **Priority order**:
|
||||
- If API_HOST is provided → Use that explicitly
|
||||
- If not, use VITE_API_URL from docker-compose → Service discovery with "backend"
|
||||
- If neither is available → Fall back to default localhost values
|
||||
|
||||
## Volume Persistence
|
||||
|
||||
The Docker Compose setup includes a volume mount for the backend to store downloaded videos:
|
||||
|
||||
```yaml
|
||||
volumes:
|
||||
backend-data:
|
||||
driver: local
|
||||
```
|
||||
|
||||
This ensures that your downloaded videos are persistent even if the container is restarted.
|
||||
|
||||
## Network Configuration
|
||||
|
||||
The services are connected through a dedicated bridge network called `mytube-network`, which enables service discovery by name.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If you encounter issues:
|
||||
|
||||
1. **Network Errors**:
|
||||
|
||||
- If you're using Docker service discovery and get connection errors, try using the custom host method
|
||||
- Create a .env file with API_HOST=your-server-ip and API_PORT=5551
|
||||
- Check if both containers are running: `docker ps`
|
||||
- Verify they're on the same network: `docker network inspect mytube-network`
|
||||
- Check logs for both containers: `docker logs mytube-frontend` and `docker logs mytube-backend`
|
||||
|
||||
2. **Checking the Applied Configuration**:
|
||||
|
||||
- You can verify what URLs the frontend is using with: `docker logs mytube-frontend`
|
||||
- The entrypoint script will show "Configuring frontend with the following settings:"
|
||||
|
||||
3. **General Troubleshooting**:
|
||||
- Ensure ports 5551 and 5556 are not being used by other services
|
||||
- Check for any deployment errors with `docker-compose logs`
|
||||
- If backend fails with Python-related errors, verify that the container has Python installed
|
||||
168
README-zh.md
168
README-zh.md
@@ -21,9 +21,10 @@
|
||||
- **并发下载限制**：设置同时下载的数量限制以管理带宽。
|
||||
- **本地库**：自动保存视频缩略图和元数据，提供丰富的浏览体验。
|
||||
- **视频播放器**：自定义播放器，支持播放/暂停、循环、快进/快退、全屏和调光控制。
|
||||
- **字幕**：自动下载 YouTube 默认语言字幕。
|
||||
- **搜索功能**：支持在本地库中搜索视频，或在线搜索 YouTube 视频。
|
||||
- **收藏夹**：创建自定义收藏夹以整理您的视频。
|
||||
- **订阅功能**：订阅您喜爱的频道，并在新视频发布时收到通知。
|
||||
- **订阅功能**：订阅您喜爱的频道，并在新视频发布时自动下载。
|
||||
- **现代化 UI**：响应式深色主题界面，包含“返回主页”功能和玻璃拟态效果。
|
||||
- **主题支持**：支持在明亮和深色模式之间切换，支持平滑过渡。
|
||||
- **登录保护**：通过密码登录页面保护您的应用。
|
||||
@@ -36,168 +37,15 @@
|
||||
|
||||
## 目录结构
|
||||
|
||||
```
|
||||
mytube/
|
||||
├── backend/ # Express.js 后端 (TypeScript)
|
||||
│ ├── src/ # 源代码
|
||||
│ │ ├── config/ # 配置文件
|
||||
│ │ ├── controllers/ # 路由控制器
|
||||
│ │ ├── db/ # 数据库迁移和设置
|
||||
│ │ ├── routes/ # API 路由
|
||||
│ │ ├── services/ # 业务逻辑服务
|
||||
│ │ ├── utils/ # 工具函数
|
||||
│ │ └── server.ts # 主服务器文件
|
||||
│ ├── uploads/ # 上传文件目录
|
||||
│ │ ├── videos/ # 下载的视频
|
||||
│ │ └── images/ # 下载的缩略图
|
||||
│ └── package.json # 后端依赖
|
||||
├── frontend/ # React.js 前端 (Vite + TypeScript)
|
||||
│ ├── src/ # 源代码
|
||||
│ │ ├── assets/ # 图片和样式
|
||||
│ │ ├── components/ # React 组件
|
||||
│ │ ├── contexts/ # React 上下文
|
||||
│ │ ├── pages/ # 页面组件
|
||||
│ │ ├── utils/ # 工具和多语言文件
|
||||
│ │ └── theme.ts # 主题配置
|
||||
│ └── package.json # 前端依赖
|
||||
├── build-and-push.sh # Docker 构建脚本
|
||||
├── docker-compose.yml # Docker Compose 配置
|
||||
├── DEPLOYMENT.md # 部署指南
|
||||
├── CONTRIBUTING.md # 贡献指南
|
||||
└── package.json # 运行两个应用的根 package.json
|
||||
```
|
||||
有关项目结构的详细说明，请参阅 [目录结构](documents/zh/directory-structure.md)。
|
||||
|
||||
## 开始使用
|
||||
|
||||
### 前提条件
|
||||
|
||||
- Node.js (v14 或更高版本)
|
||||
- npm (v6 或更高版本)
|
||||
- Docker (可选，用于容器化部署)
|
||||
|
||||
### 安装
|
||||
|
||||
1. 克隆仓库：
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd mytube
|
||||
```
|
||||
|
||||
2. 安装依赖：
|
||||
|
||||
您可以使用一条命令安装根目录、前端和后端的所有依赖：
|
||||
|
||||
```bash
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
或者手动安装：
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cd frontend && npm install
|
||||
cd ../backend && npm install
|
||||
```
|
||||
|
||||
#### 使用 npm 脚本
|
||||
|
||||
您可以在根目录下使用 npm 脚本：
|
||||
|
||||
```bash
|
||||
npm run dev # 以开发模式启动前端和后端
|
||||
```
|
||||
|
||||
其他可用脚本：
|
||||
|
||||
```bash
|
||||
npm run start # 以生产模式启动前端和后端
|
||||
npm run build # 为生产环境构建前端
|
||||
npm run lint # 运行前端代码检查
|
||||
npm run lint:fix # 修复前端代码检查错误
|
||||
```
|
||||
|
||||
### 访问应用
|
||||
|
||||
- 前端：http://localhost:5556
|
||||
- 后端 API：http://localhost:5551
|
||||
有关安装和设置说明，请参阅 [开始使用](documents/zh/getting-started.md)。
|
||||
|
||||
## API 端点
|
||||
|
||||
### 视频
|
||||
- `POST /api/download` - 下载视频 (YouTube 或 Bilibili)
|
||||
- `POST /api/upload` - 上传本地视频文件
|
||||
- `GET /api/videos` - 获取所有已下载的视频
|
||||
- `GET /api/videos/:id` - 获取特定视频
|
||||
- `PUT /api/videos/:id` - 更新视频详情
|
||||
- `DELETE /api/videos/:id` - 删除视频
|
||||
- `GET /api/videos/:id/comments` - 获取视频评论
|
||||
- `POST /api/videos/:id/rate` - 评价视频
|
||||
- `POST /api/videos/:id/refresh-thumbnail` - 刷新视频缩略图
|
||||
- `POST /api/videos/:id/view` - 增加观看次数
|
||||
- `PUT /api/videos/:id/progress` - 更新播放进度
|
||||
- `GET /api/search` - 在线搜索视频
|
||||
- `GET /api/download-status` - 获取当前下载状态
|
||||
- `GET /api/check-bilibili-parts` - 检查 Bilibili 视频是否包含多个分P
|
||||
- `GET /api/check-bilibili-collection` - 检查 Bilibili URL 是否为合集/系列
|
||||
|
||||
### 下载管理
|
||||
- `POST /api/downloads/cancel/:id` - 取消下载
|
||||
- `DELETE /api/downloads/queue/:id` - 从队列中移除
|
||||
- `DELETE /api/downloads/queue` - 清空队列
|
||||
- `GET /api/downloads/history` - 获取下载历史
|
||||
- `DELETE /api/downloads/history/:id` - 从历史中移除
|
||||
- `DELETE /api/downloads/history` - 清空历史
|
||||
|
||||
### 收藏夹
|
||||
- `GET /api/collections` - 获取所有收藏夹
|
||||
- `POST /api/collections` - 创建新收藏夹
|
||||
- `PUT /api/collections/:id` - 更新收藏夹 (添加/移除视频)
|
||||
- `DELETE /api/collections/:id` - 删除收藏夹
|
||||
|
||||
### 订阅
|
||||
- `GET /api/subscriptions` - 获取所有订阅
|
||||
- `POST /api/subscriptions` - 创建新订阅
|
||||
- `DELETE /api/subscriptions/:id` - 删除订阅
|
||||
|
||||
### 设置与系统
|
||||
- `GET /api/settings` - 获取应用设置
|
||||
- `POST /api/settings` - 更新应用设置
|
||||
- `POST /api/settings/verify-password` - 验证登录密码
|
||||
- `POST /api/settings/migrate` - 从 JSON 迁移数据到 SQLite
|
||||
- `POST /api/settings/delete-legacy` - 删除旧的 JSON 数据
|
||||
- `POST /api/scan-files` - 扫描现有文件
|
||||
- `POST /api/cleanup-temp-files` - 清理临时下载文件
|
||||
|
||||
## 收藏夹功能
|
||||
|
||||
MyTube 允许您将视频整理到收藏夹中：
|
||||
|
||||
- **创建收藏夹**：创建自定义收藏夹以对视频进行分类。
|
||||
- **添加到收藏夹**：直接从视频播放器或管理页面将视频添加到一个或多个收藏夹。
|
||||
- **从收藏夹中移除**：轻松从收藏夹中移除视频。
|
||||
- **浏览收藏夹**：在侧边栏查看所有收藏夹，并按收藏夹浏览视频。
|
||||
- **删除选项**：选择仅删除收藏夹分组，或连同所有视频文件一起从磁盘删除。
|
||||
|
||||
## 数据迁移
|
||||
|
||||
MyTube 现在使用 SQLite 数据库以获得更好的性能和可靠性。如果您是从使用 JSON 文件的旧版本升级：
|
||||
|
||||
1. 进入 **设置**。
|
||||
2. 向下滚动到 **数据库** 部分。
|
||||
3. 点击 **从 JSON 迁移数据**。
|
||||
4. 该工具将把您现有的视频、收藏夹和下载历史导入到新数据库中。
|
||||
|
||||
## 用户界面
|
||||
|
||||
该应用具有现代化、高级感的 UI，包括：
|
||||
|
||||
- **深色/明亮模式**：根据您的喜好切换主题。
|
||||
- **响应式设计**：在桌面和移动设备上无缝运行，并针对移动端进行了优化。
|
||||
- **视频网格**：便于浏览的视频库网格布局。
|
||||
- **确认模态框**：带有自定义确认对话框的安全删除功能。
|
||||
- **搜索**：集成的搜索栏，用于查找本地和在线内容。
|
||||
- **Snackbar 通知**：为添加/移除视频等操作提供视觉反馈。
|
||||
有关可用 API 端点的列表，请参阅 [API 端点](documents/zh/api-endpoints.md)。
|
||||
|
||||
## 环境变量
|
||||
|
||||
@@ -226,11 +74,7 @@ MAX_FILE_SIZE=500000000
|
||||
|
||||
我们欢迎贡献！请参阅 [CONTRIBUTING.md](CONTRIBUTING.md) 了解如何开始、我们的开发工作流程以及代码质量指南。
|
||||
|
||||
## 部署
|
||||
|
||||
有关如何使用 Docker 或在 QNAP Container Station 上部署 MyTube 的详细说明，请参阅 [DEPLOYMENT.md](DEPLOYMENT.md)。
|
||||
|
||||
## Star History
|
||||
## 星标历史
|
||||
|
||||
[](https://www.star-history.com/#franklioxygen/MyTube&type=date&legend=bottom-right)
|
||||
|
||||
|
||||
176
README.md
176
README.md
@@ -21,6 +21,7 @@ A YouTube/Bilibili/MissAV video downloader and player that supports channel subs
|
||||
- **Concurrent Download Limit**: Set a limit on the number of simultaneous downloads to manage bandwidth.
|
||||
- **Local Library**: Automatically save video thumbnails and metadata for a rich browsing experience.
|
||||
- **Video Player**: Custom player with Play/Pause, Loop, Seek, Full-screen, and Dimming controls.
|
||||
- **Auto Subtitles**: Automatically download YouTube default language subtitles.
|
||||
- **Search**: Search for videos locally in your library or online via YouTube.
|
||||
- **Collections**: Organize videos into custom collections for easy access.
|
||||
- **Modern UI**: Responsive, dark-themed interface with a "Back to Home" feature and glassmorphism effects.
|
||||
@@ -36,180 +37,15 @@ A YouTube/Bilibili/MissAV video downloader and player that supports channel subs
|
||||
|
||||
## Directory Structure
|
||||
|
||||
```
|
||||
mytube/
|
||||
├── backend/ # Express.js backend (TypeScript)
|
||||
│ ├── src/ # Source code
|
||||
│ │ ├── config/ # Configuration files
|
||||
│ │ ├── controllers/ # Route controllers
|
||||
│ │ ├── db/ # Database migrations and setup
|
||||
│ │ ├── routes/ # API routes
|
||||
│ │ ├── services/ # Business logic services
|
||||
│ │ ├── utils/ # Utility functions
|
||||
│ │ └── server.ts # Main server file
|
||||
│ ├── uploads/ # Uploaded files directory
|
||||
│ │ ├── videos/ # Downloaded videos
|
||||
│ │ └── images/ # Downloaded thumbnails
|
||||
│ └── package.json # Backend dependencies
|
||||
├── frontend/ # React.js frontend (Vite + TypeScript)
|
||||
│ ├── src/ # Source code
|
||||
│ │ ├── assets/ # Images and styles
|
||||
│ │ ├── components/ # React components
|
||||
│ │ ├── contexts/ # React contexts
|
||||
│ │ ├── pages/ # Page components
|
||||
│ │ ├── utils/ # Utilities and locales
|
||||
│ │ └── theme.ts # Theme configuration
|
||||
│ └── package.json # Frontend dependencies
|
||||
├── build-and-push.sh # Docker build script
|
||||
├── docker-compose.yml # Docker Compose configuration
|
||||
├── DEPLOYMENT.md # Deployment guide
|
||||
├── CONTRIBUTING.md # Contributing guidelines
|
||||
└── package.json # Root package.json for running both apps
|
||||
```
|
||||
For a detailed breakdown of the project structure, please refer to [Directory Structure](documents/en/directory-structure.md).
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- Node.js (v14 or higher)
|
||||
- npm (v6 or higher)
|
||||
- Docker (optional, for containerized deployment)
|
||||
- Python 3.8+ (for yt-dlp and PO Token provider)
|
||||
- yt-dlp (installed via pip/pipx)
|
||||
|
||||
### Installation
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd mytube
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
|
||||
You can install all dependencies for the root, frontend, and backend with a single command:
|
||||
|
||||
```bash
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
Or manually:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cd frontend && npm install
|
||||
cd ../backend && npm install
|
||||
```
|
||||
|
||||
**Note**: The backend installation will automatically build the `bgutil-ytdlp-pot-provider` server. However, you must ensure `yt-dlp` and the `bgutil-ytdlp-pot-provider` python plugin are installed in your environment:
|
||||
|
||||
```bash
|
||||
# Install yt-dlp and the plugin
|
||||
pip install yt-dlp bgutil-ytdlp-pot-provider
|
||||
# OR using pipx (recommended)
|
||||
pipx install yt-dlp
|
||||
pipx inject yt-dlp bgutil-ytdlp-pot-provider
|
||||
```
|
||||
|
||||
#### Using npm Scripts
|
||||
|
||||
You can use npm scripts from the root directory:
|
||||
|
||||
```bash
|
||||
npm run dev # Start both frontend and backend in development mode
|
||||
```
|
||||
|
||||
Other available scripts:
|
||||
|
||||
```bash
|
||||
npm run start # Start both frontend and backend in production mode
|
||||
npm run build # Build the frontend for production
|
||||
npm run lint # Run linting for frontend
|
||||
npm run lint:fix # Fix linting errors for frontend
|
||||
```
|
||||
|
||||
### Accessing the Application
|
||||
|
||||
- Frontend: http://localhost:5556
|
||||
- Backend API: http://localhost:5551
|
||||
For installation and setup instructions, please refer to [Getting Started](documents/en/getting-started.md).
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Videos
|
||||
- `POST /api/download` - Download a video (YouTube or Bilibili)
|
||||
- `POST /api/upload` - Upload a local video file
|
||||
- `GET /api/videos` - Get all downloaded videos
|
||||
- `GET /api/videos/:id` - Get a specific video
|
||||
- `PUT /api/videos/:id` - Update video details
|
||||
- `DELETE /api/videos/:id` - Delete a video
|
||||
- `GET /api/videos/:id/comments` - Get video comments
|
||||
- `POST /api/videos/:id/rate` - Rate a video
|
||||
- `POST /api/videos/:id/refresh-thumbnail` - Refresh video thumbnail
|
||||
- `POST /api/videos/:id/view` - Increment view count
|
||||
- `PUT /api/videos/:id/progress` - Update playback progress
|
||||
- `GET /api/search` - Search for videos online
|
||||
- `GET /api/download-status` - Get status of active downloads
|
||||
- `GET /api/check-bilibili-parts` - Check if a Bilibili video has multiple parts
|
||||
- `GET /api/check-bilibili-collection` - Check if a Bilibili URL is a collection/series
|
||||
|
||||
### Download Management
|
||||
- `POST /api/downloads/cancel/:id` - Cancel a download
|
||||
- `DELETE /api/downloads/queue/:id` - Remove from queue
|
||||
- `DELETE /api/downloads/queue` - Clear queue
|
||||
- `GET /api/downloads/history` - Get download history
|
||||
- `DELETE /api/downloads/history/:id` - Remove from history
|
||||
- `DELETE /api/downloads/history` - Clear history
|
||||
|
||||
### Collections
|
||||
- `GET /api/collections` - Get all collections
|
||||
- `POST /api/collections` - Create a new collection
|
||||
- `PUT /api/collections/:id` - Update a collection (add/remove videos)
|
||||
- `DELETE /api/collections/:id` - Delete a collection
|
||||
|
||||
### Subscriptions
|
||||
- `GET /api/subscriptions` - Get all subscriptions
|
||||
- `POST /api/subscriptions` - Create a new subscription
|
||||
- `DELETE /api/subscriptions/:id` - Delete a subscription
|
||||
|
||||
### Settings & System
|
||||
- `GET /api/settings` - Get application settings
|
||||
- `POST /api/settings` - Update application settings
|
||||
- `POST /api/settings/verify-password` - Verify login password
|
||||
- `POST /api/settings/migrate` - Migrate data from JSON to SQLite
|
||||
- `POST /api/settings/delete-legacy` - Delete legacy JSON data
|
||||
- `POST /api/scan-files` - Scan for existing files
|
||||
- `POST /api/cleanup-temp-files` - Cleanup temporary download files
|
||||
|
||||
## Collections Feature
|
||||
|
||||
MyTube allows you to organize your videos into collections:
|
||||
|
||||
- **Create Collections**: Create custom collections to categorize your videos.
|
||||
- **Add to Collections**: Add videos to one or more collections directly from the video player or manage page.
|
||||
- **Remove from Collections**: Remove videos from collections easily.
|
||||
- **Browse Collections**: View all your collections in the sidebar and browse videos by collection.
|
||||
- **Delete Options**: Choose to delete just the collection grouping or delete the collection along with all its video files from the disk.
|
||||
|
||||
## Data Migration
|
||||
|
||||
MyTube now uses a SQLite database for better performance and reliability. If you are upgrading from an older version that used JSON files:
|
||||
|
||||
1. Go to **Settings**.
|
||||
2. Scroll down to the **Database** section.
|
||||
3. Click **Migrate Data from JSON**.
|
||||
4. The tool will import your existing videos, collections, and download history into the new database.
|
||||
|
||||
## User Interface
|
||||
|
||||
The application features a modern, premium UI with:
|
||||
|
||||
- **Dark/Light Mode**: Toggle between themes to suit your preference.
|
||||
- **Responsive Design**: Works seamlessly on desktop and mobile devices, with mobile-specific optimizations.
|
||||
- **Video Grid**: Easy-to-browse grid layout for your video library.
|
||||
- **Confirmation Modals**: Safe deletion with custom confirmation dialogs.
|
||||
- **Search**: Integrated search bar for finding local and online content.
|
||||
- **Snackbar Notifications**: Visual feedback for actions like adding/removing videos.
|
||||
For a list of available API endpoints, please refer to [API Endpoints](documents/en/api-endpoints.md).
|
||||
|
||||
## Environment Variables
|
||||
|
||||
@@ -238,10 +74,6 @@ Copy the `.env.example` files in both frontend and backend directories to create
|
||||
|
||||
We welcome contributions! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details on how to get started, our development workflow, and code quality guidelines.
|
||||
|
||||
## Deployment
|
||||
|
||||
For detailed instructions on how to deploy MyTube using Docker or on QNAP Container Station, please refer to [DEPLOYMENT.md](DEPLOYMENT.md).
|
||||
|
||||
## Star History
|
||||
|
||||
[](https://www.star-history.com/#franklioxygen/MyTube&type=date&legend=bottom-right)
|
||||
|
||||
46
documents/en/api-endpoints.md
Normal file
46
documents/en/api-endpoints.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# API Endpoints
|
||||
|
||||
## Videos
|
||||
- `POST /api/download` - Download a video (YouTube or Bilibili)
|
||||
- `POST /api/upload` - Upload a local video file
|
||||
- `GET /api/videos` - Get all downloaded videos
|
||||
- `GET /api/videos/:id` - Get a specific video
|
||||
- `PUT /api/videos/:id` - Update video details
|
||||
- `DELETE /api/videos/:id` - Delete a video
|
||||
- `GET /api/videos/:id/comments` - Get video comments
|
||||
- `POST /api/videos/:id/rate` - Rate a video
|
||||
- `POST /api/videos/:id/refresh-thumbnail` - Refresh video thumbnail
|
||||
- `POST /api/videos/:id/view` - Increment view count
|
||||
- `PUT /api/videos/:id/progress` - Update playback progress
|
||||
- `GET /api/search` - Search for videos online
|
||||
- `GET /api/download-status` - Get status of active downloads
|
||||
- `GET /api/check-bilibili-parts` - Check if a Bilibili video has multiple parts
|
||||
- `GET /api/check-bilibili-collection` - Check if a Bilibili URL is a collection/series
|
||||
|
||||
## Download Management
|
||||
- `POST /api/downloads/cancel/:id` - Cancel a download
|
||||
- `DELETE /api/downloads/queue/:id` - Remove from queue
|
||||
- `DELETE /api/downloads/queue` - Clear queue
|
||||
- `GET /api/downloads/history` - Get download history
|
||||
- `DELETE /api/downloads/history/:id` - Remove from history
|
||||
- `DELETE /api/downloads/history` - Clear history
|
||||
|
||||
## Collections
|
||||
- `GET /api/collections` - Get all collections
|
||||
- `POST /api/collections` - Create a new collection
|
||||
- `PUT /api/collections/:id` - Update a collection (add/remove videos)
|
||||
- `DELETE /api/collections/:id` - Delete a collection
|
||||
|
||||
## Subscriptions
|
||||
- `GET /api/subscriptions` - Get all subscriptions
|
||||
- `POST /api/subscriptions` - Create a new subscription
|
||||
- `DELETE /api/subscriptions/:id` - Delete a subscription
|
||||
|
||||
## Settings & System
|
||||
- `GET /api/settings` - Get application settings
|
||||
- `POST /api/settings` - Update application settings
|
||||
- `POST /api/settings/verify-password` - Verify login password
|
||||
- `POST /api/settings/migrate` - Migrate data from JSON to SQLite
|
||||
- `POST /api/settings/delete-legacy` - Delete legacy JSON data
|
||||
- `POST /api/scan-files` - Scan for existing files
|
||||
- `POST /api/cleanup-temp-files` - Cleanup temporary download files
|
||||
32
documents/en/directory-structure.md
Normal file
32
documents/en/directory-structure.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# Directory Structure
|
||||
|
||||
```
|
||||
mytube/
|
||||
├── backend/ # Express.js backend (TypeScript)
|
||||
│ ├── src/ # Source code
|
||||
│ │ ├── config/ # Configuration files
|
||||
│ │ ├── controllers/ # Route controllers
|
||||
│ │ ├── db/ # Database migrations and setup
|
||||
│ │ ├── routes/ # API routes
|
||||
│ │ ├── services/ # Business logic services
|
||||
│ │ ├── utils/ # Utility functions
|
||||
│ │ └── server.ts # Main server file
|
||||
│ ├── uploads/ # Uploaded files directory
|
||||
│ │ ├── videos/ # Downloaded videos
|
||||
│ │ └── images/ # Downloaded thumbnails
|
||||
│ └── package.json # Backend dependencies
|
||||
├── frontend/ # React.js frontend (Vite + TypeScript)
|
||||
│ ├── src/ # Source code
|
||||
│ │ ├── assets/ # Images and styles
|
||||
│ │ ├── components/ # React components
|
||||
│ │ ├── contexts/ # React contexts
|
||||
│ │ ├── pages/ # Page components
|
||||
│ │ ├── utils/ # Utilities and locales
|
||||
│ │ └── theme.ts # Theme configuration
|
||||
│ └── package.json # Frontend dependencies
|
||||
├── build-and-push.sh # Docker build script
|
||||
├── docker-compose.yml # Docker Compose configuration
|
||||
├── DEPLOYMENT.md # Deployment guide
|
||||
├── CONTRIBUTING.md # Contributing guidelines
|
||||
└── package.json # Root package.json for running both apps
|
||||
```
|
||||
190
documents/en/docker-guide.md
Normal file
190
documents/en/docker-guide.md
Normal file
@@ -0,0 +1,190 @@
|
||||
# Docker Deployment Guide for MyTube
|
||||
|
||||
This guide provides step-by-step instructions to deploy [MyTube](https://github.com/franklioxygen/MyTube "null") using Docker and Docker Compose. This setup is designed for standard environments (Linux, macOS, Windows) and modifies the original QNAP-specific configurations for general use.
|
||||
|
||||
## 🚀 Quick Start (Pre-built Images)
|
||||
|
||||
The easiest way to run MyTube is using the official pre-built images.
|
||||
|
||||
### 1. Create a Project Directory
|
||||
|
||||
Create a folder for your project and navigate into it:
|
||||
|
||||
```
|
||||
mkdir mytube-deploy
|
||||
cd mytube-deploy
|
||||
```
|
||||
|
||||
### 2. Create the `docker-compose.yml`
|
||||
|
||||
Create a file named `docker-compose.yml` inside your folder and paste the following content.
|
||||
|
||||
**Note:** This version uses standard relative paths (`./data`, `./uploads`) instead of the QNAP-specific paths found in the original repository.
|
||||
|
||||
```
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
backend:
|
||||
image: franklioxygen/mytube:backend-latest
|
||||
container_name: mytube-backend
|
||||
pull_policy: always
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5551:5551"
|
||||
environment:
|
||||
- PORT=5551
|
||||
# Optional: Set a custom upload directory inside container if needed
|
||||
# - VIDEO_DIR=/app/uploads/videos
|
||||
volumes:
|
||||
- ./uploads:/app/uploads
|
||||
- ./data:/app/data
|
||||
networks:
|
||||
- mytube-network
|
||||
|
||||
frontend:
|
||||
image: franklioxygen/mytube:frontend-latest
|
||||
container_name: mytube-frontend
|
||||
pull_policy: always
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5556:5556"
|
||||
environment:
|
||||
# Internal Docker networking URLs (Browser -> Frontend -> Backend)
|
||||
# In most setups, these defaults work fine.
|
||||
- VITE_API_URL=/api
|
||||
- VITE_BACKEND_URL=
|
||||
depends_on:
|
||||
- backend
|
||||
networks:
|
||||
- mytube-network
|
||||
|
||||
networks:
|
||||
mytube-network:
|
||||
driver: bridge
|
||||
```
|
||||
|
||||
### 3. Start the Application
|
||||
|
||||
Run the following command to start the services in the background:
|
||||
|
||||
```
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### 4. Access MyTube
|
||||
|
||||
Once the containers are running, access the application in your browser:
|
||||
|
||||
- **Frontend UI:** `http://localhost:5556`
|
||||
|
||||
- **Backend API:** `http://localhost:5551`
|
||||
|
||||
|
||||
## ⚙️ Configuration & Data Persistence
|
||||
|
||||
### Volumes (Data Storage)
|
||||
|
||||
The `docker-compose.yml` above creates two folders in your current directory to persist data:
|
||||
|
||||
- `./uploads`: Stores downloaded videos and thumbnails.
|
||||
|
||||
- `./data`: Stores the SQLite database and logs.
|
||||
|
||||
|
||||
**Important:** If you move the `docker-compose.yml` file, you must move these folders with it to keep your data.
|
||||
|
||||
### Environment Variables
|
||||
|
||||
You can customize the deployment by adding a `.env` file or modifying the `environment` section in `docker-compose.yml`.
|
||||
|
||||
|Variable|Service|Description|Default|
|
||||
|---|---|---|---|
|
||||
|`PORT`|Backend|Port the backend listens on internally|`5551`|
|
||||
|`VITE_API_URL`|Frontend|API endpoint path|`/api`|
|
||||
|`API_HOST`|Frontend|**Advanced:** Force a specific backend IP|_(Auto-detected)_|
|
||||
|`API_PORT`|Frontend|**Advanced:** Force a specific backend Port|`5551`|
|
||||
|
||||
## 🛠️ Advanced Networking (Remote/NAS Deployment)
|
||||
|
||||
If you are deploying this on a remote server (e.g., a VPS or NAS) and accessing it from a different computer, the default relative API paths usually work fine.
|
||||
|
||||
However, if you experience connection issues where the frontend cannot reach the backend, you may need to explicitly tell the frontend where the API is located.
|
||||
|
||||
1. Create a `.env` file in the same directory as `docker-compose.yml`:
|
||||
|
||||
```
|
||||
API_HOST=192.168.1.100 # Replace with your server's LAN/WAN IP
|
||||
API_PORT=5551
|
||||
```
|
||||
|
||||
2. Restart the containers:
|
||||
|
||||
```
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
|
||||
## 🏗️ Building from Source (Optional)
|
||||
|
||||
If you prefer to build the images yourself (e.g., to modify code), follow these steps:
|
||||
|
||||
1. **Clone the Repository:**
|
||||
|
||||
```
|
||||
git clone [https://github.com/franklioxygen/MyTube.git](https://github.com/franklioxygen/MyTube.git)
|
||||
cd MyTube
|
||||
```
|
||||
|
||||
2. **Build and Run:** You can use the same `docker-compose.yml` structure, but replace `image: ...` with `build: ...`.
|
||||
|
||||
Modify `docker-compose.yml`:
|
||||
|
||||
```
|
||||
services:
|
||||
backend:
|
||||
build: ./backend
|
||||
# ... other settings
|
||||
frontend:
|
||||
build: ./frontend
|
||||
# ... other settings
|
||||
```
|
||||
|
||||
3. **Start:**
|
||||
|
||||
```
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
|
||||
## ❓ Troubleshooting
|
||||
|
||||
### 1. "Network Error" or API connection failed
|
||||
|
||||
- **Cause:** The browser cannot reach the backend API.
|
||||
|
||||
- **Fix:** Ensure port `5551` is open on your firewall. If running on a remote server, try setting the `API_HOST` in a `.env` file as described in the "Advanced Networking" section.
|
||||
|
||||
|
||||
### 2. Permission Denied for `./uploads`
|
||||
|
||||
- **Cause:** The Docker container user doesn't have write permissions to the host directory.
|
||||
|
||||
- **Fix:** Adjust permissions on your host machine:
|
||||
|
||||
```
|
||||
chmod -R 777 ./uploads ./data
|
||||
```
|
||||
|
||||
|
||||
### 3. Container Name Conflicts
|
||||
|
||||
- **Cause:** You have another instance of MyTube running or an old container wasn't removed.
|
||||
|
||||
- **Fix:** Remove old containers before starting:
|
||||
|
||||
```
|
||||
docker rm -f mytube-backend mytube-frontend
|
||||
docker-compose up -d
|
||||
```
|
||||
66
documents/en/getting-started.md
Normal file
66
documents/en/getting-started.md
Normal file
@@ -0,0 +1,66 @@
|
||||
# Getting Started
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- Node.js (v14 or higher)
|
||||
- npm (v6 or higher)
|
||||
- Docker (optional, for containerized deployment)
|
||||
- Python 3.8+ (for yt-dlp and PO Token provider)
|
||||
- yt-dlp (installed via pip/pipx)
|
||||
|
||||
## Installation
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd mytube
|
||||
```
|
||||
|
||||
2. Install dependencies:
|
||||
|
||||
You can install all dependencies for the root, frontend, and backend with a single command:
|
||||
|
||||
```bash
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
Or manually:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cd frontend && npm install
|
||||
cd ../backend && npm install
|
||||
```
|
||||
|
||||
**Note**: The backend installation will automatically build the `bgutil-ytdlp-pot-provider` server. However, you must ensure `yt-dlp` and the `bgutil-ytdlp-pot-provider` python plugin are installed in your environment:
|
||||
|
||||
```bash
|
||||
# Install yt-dlp and the plugin
|
||||
pip install yt-dlp bgutil-ytdlp-pot-provider
|
||||
# OR using pipx (recommended)
|
||||
pipx install yt-dlp
|
||||
pipx inject yt-dlp bgutil-ytdlp-pot-provider
|
||||
```
|
||||
|
||||
### Using npm Scripts
|
||||
|
||||
You can use npm scripts from the root directory:
|
||||
|
||||
```bash
|
||||
npm run dev # Start both frontend and backend in development mode
|
||||
```
|
||||
|
||||
Other available scripts:
|
||||
|
||||
```bash
|
||||
npm run start # Start both frontend and backend in production mode
|
||||
npm run build # Build the frontend for production
|
||||
npm run lint # Run linting for frontend
|
||||
npm run lint:fix # Fix linting errors for frontend
|
||||
```
|
||||
|
||||
## Accessing the Application
|
||||
|
||||
- Frontend: http://localhost:5556
|
||||
- Backend API: http://localhost:5551
|
||||
46
documents/zh/api-endpoints.md
Normal file
46
documents/zh/api-endpoints.md
Normal file
@@ -0,0 +1,46 @@
|
||||
# API 端点
|
||||
|
||||
## 视频
|
||||
- `POST /api/download` - 下载视频 (YouTube 或 Bilibili)
|
||||
- `POST /api/upload` - 上传本地视频文件
|
||||
- `GET /api/videos` - 获取所有已下载的视频
|
||||
- `GET /api/videos/:id` - 获取特定视频
|
||||
- `PUT /api/videos/:id` - 更新视频详情
|
||||
- `DELETE /api/videos/:id` - 删除视频
|
||||
- `GET /api/videos/:id/comments` - 获取视频评论
|
||||
- `POST /api/videos/:id/rate` - 评价视频
|
||||
- `POST /api/videos/:id/refresh-thumbnail` - 刷新视频缩略图
|
||||
- `POST /api/videos/:id/view` - 增加观看次数
|
||||
- `PUT /api/videos/:id/progress` - 更新播放进度
|
||||
- `GET /api/search` - 在线搜索视频
|
||||
- `GET /api/download-status` - 获取当前下载状态
|
||||
- `GET /api/check-bilibili-parts` - 检查 Bilibili 视频是否包含多个分P
|
||||
- `GET /api/check-bilibili-collection` - 检查 Bilibili URL 是否为合集/系列
|
||||
|
||||
## 下载管理
|
||||
- `POST /api/downloads/cancel/:id` - 取消下载
|
||||
- `DELETE /api/downloads/queue/:id` - 从队列中移除
|
||||
- `DELETE /api/downloads/queue` - 清空队列
|
||||
- `GET /api/downloads/history` - 获取下载历史
|
||||
- `DELETE /api/downloads/history/:id` - 从历史中移除
|
||||
- `DELETE /api/downloads/history` - 清空历史
|
||||
|
||||
## 收藏夹
|
||||
- `GET /api/collections` - 获取所有收藏夹
|
||||
- `POST /api/collections` - 创建新收藏夹
|
||||
- `PUT /api/collections/:id` - 更新收藏夹 (添加/移除视频)
|
||||
- `DELETE /api/collections/:id` - 删除收藏夹
|
||||
|
||||
## 订阅
|
||||
- `GET /api/subscriptions` - 获取所有订阅
|
||||
- `POST /api/subscriptions` - 创建新订阅
|
||||
- `DELETE /api/subscriptions/:id` - 删除订阅
|
||||
|
||||
## 设置与系统
|
||||
- `GET /api/settings` - 获取应用设置
|
||||
- `POST /api/settings` - 更新应用设置
|
||||
- `POST /api/settings/verify-password` - 验证登录密码
|
||||
- `POST /api/settings/migrate` - 从 JSON 迁移数据到 SQLite
|
||||
- `POST /api/settings/delete-legacy` - 删除旧的 JSON 数据
|
||||
- `POST /api/scan-files` - 扫描现有文件
|
||||
- `POST /api/cleanup-temp-files` - 清理临时下载文件
|
||||
32
documents/zh/directory-structure.md
Normal file
32
documents/zh/directory-structure.md
Normal file
@@ -0,0 +1,32 @@
|
||||
# 目录结构
|
||||
|
||||
```
|
||||
mytube/
|
||||
├── backend/ # Express.js 后端 (TypeScript)
|
||||
│ ├── src/ # 源代码
|
||||
│ │ ├── config/ # 配置文件
|
||||
│ │ ├── controllers/ # 路由控制器
|
||||
│ │ ├── db/ # 数据库迁移和设置
|
||||
│ │ ├── routes/ # API 路由
|
||||
│ │ ├── services/ # 业务逻辑服务
|
||||
│ │ ├── utils/ # 工具函数
|
||||
│ │ └── server.ts # 主服务器文件
|
||||
│ ├── uploads/ # 上传文件目录
|
||||
│ │ ├── videos/ # 下载的视频
|
||||
│ │ └── images/ # 下载的缩略图
|
||||
│ └── package.json # 后端依赖
|
||||
├── frontend/ # React.js 前端 (Vite + TypeScript)
|
||||
│ ├── src/ # 源代码
|
||||
│ │ ├── assets/ # 图片和样式
|
||||
│ │ ├── components/ # React 组件
|
||||
│ │ ├── contexts/ # React 上下文
|
||||
│ │ ├── pages/ # 页面组件
|
||||
│ │ ├── utils/ # 工具和多语言文件
|
||||
│ │ └── theme.ts # 主题配置
|
||||
│ └── package.json # 前端依赖
|
||||
├── build-and-push.sh # Docker 构建脚本
|
||||
├── docker-compose.yml # Docker Compose 配置
|
||||
├── DEPLOYMENT.md # 部署指南
|
||||
├── CONTRIBUTING.md # 贡献指南
|
||||
└── package.json # 运行两个应用的根 package.json
|
||||
```
|
||||
190
documents/zh/docker-guide.md
Normal file
190
documents/zh/docker-guide.md
Normal file
@@ -0,0 +1,190 @@
|
||||
# MyTube Docker 部署指南
|
||||
|
||||
本指南提供了使用 Docker 和 Docker Compose 部署 [MyTube](https://github.com/franklioxygen/MyTube "null") 的详细步骤。此设置适用于标准环境（Linux, macOS, Windows），并针对通用用途修改了原本专用于 QNAP 的配置。
|
||||
|
||||
## 🚀 快速开始 (使用预构建镜像)
|
||||
|
||||
运行 MyTube 最简单的方法是使用官方预构建的镜像。
|
||||
|
||||
### 1. 创建项目目录
|
||||
|
||||
为您的项目创建一个文件夹并进入该目录：
|
||||
|
||||
```
|
||||
mkdir mytube-deploy
|
||||
cd mytube-deploy
|
||||
```
|
||||
|
||||
### 2. 创建 `docker-compose.yml` 文件
|
||||
|
||||
在文件夹中创建一个名为 `docker-compose.yml` 的文件，并粘贴以下内容。
|
||||
|
||||
**注意：** 此版本使用标准的相对路径（`./data`, `./uploads`），而不是原始仓库中特定于 QNAP 的路径。
|
||||
|
||||
```
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
backend:
|
||||
image: franklioxygen/mytube:backend-latest
|
||||
container_name: mytube-backend
|
||||
pull_policy: always
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5551:5551"
|
||||
environment:
|
||||
- PORT=5551
|
||||
# 可选：如果需要，在容器内设置自定义上传目录
|
||||
# - VIDEO_DIR=/app/uploads/videos
|
||||
volumes:
|
||||
- ./uploads:/app/uploads
|
||||
- ./data:/app/data
|
||||
networks:
|
||||
- mytube-network
|
||||
|
||||
frontend:
|
||||
image: franklioxygen/mytube:frontend-latest
|
||||
container_name: mytube-frontend
|
||||
pull_policy: always
|
||||
restart: unless-stopped
|
||||
ports:
|
||||
- "5556:5556"
|
||||
environment:
|
||||
# 内部 Docker 网络 URL（浏览器 -> 前端 -> 后端）
|
||||
# 在大多数设置中，这些默认值都可以正常工作。
|
||||
- VITE_API_URL=/api
|
||||
- VITE_BACKEND_URL=
|
||||
depends_on:
|
||||
- backend
|
||||
networks:
|
||||
- mytube-network
|
||||
|
||||
networks:
|
||||
mytube-network:
|
||||
driver: bridge
|
||||
```
|
||||
|
||||
### 3. 启动应用
|
||||
|
||||
运行以下命令在后台启动服务：
|
||||
|
||||
```
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
### 4. 访问 MyTube
|
||||
|
||||
容器运行后，请在浏览器中访问应用程序：
|
||||
|
||||
- **前端 UI:** `http://localhost:5556`
|
||||
|
||||
- **后端 API:** `http://localhost:5551`
|
||||
|
||||
|
||||
## ⚙️ 配置与数据持久化
|
||||
|
||||
### 卷 (数据存储)
|
||||
|
||||
上面的 `docker-compose.yml` 在当前目录中创建了两个文件夹来持久保存数据：
|
||||
|
||||
- `./uploads`: 存储下载的视频和缩略图。
|
||||
|
||||
- `./data`: 存储 SQLite 数据库和日志。
|
||||
|
||||
|
||||
**重要提示：** 如果您移动 `docker-compose.yml` 文件，必须同时移动这些文件夹以保留您的数据。
|
||||
|
||||
### 环境变量
|
||||
|
||||
您可以通过添加 `.env` 文件或修改 `docker-compose.yml` 中的 `environment` 部分来自定义部署。
|
||||
|
||||
|变量|服务|描述|默认值|
|
||||
|---|---|---|---|
|
||||
|`PORT`|Backend|后端内部监听端口|`5551`|
|
||||
|`VITE_API_URL`|Frontend|API 端点路径|`/api`|
|
||||
|`API_HOST`|Frontend|**高级：** 强制指定后端 IP|_(自动检测)_|
|
||||
|`API_PORT`|Frontend|**高级：** 强制指定后端端口|`5551`|
|
||||
|
||||
## 🛠️ 高级网络 (远程/NAS 部署)
|
||||
|
||||
如果您在远程服务器（例如 VPS 或 NAS）上部署，并从另一台计算机访问它，默认的相对 API 路径通常可以正常工作。
|
||||
|
||||
但是，如果您遇到连接问题（前端无法连接到后端），您可能需要明确告诉前端 API 的位置。
|
||||
|
||||
1. 在与 `docker-compose.yml` 相同的目录中创建一个 `.env` 文件：
|
||||
|
||||
```
|
||||
API_HOST=192.168.1.100 # 替换为您的服务器局域网/公网 IP
|
||||
API_PORT=5551
|
||||
```
|
||||
|
||||
2. 重启容器：
|
||||
|
||||
```
|
||||
docker-compose down
|
||||
docker-compose up -d
|
||||
```
|
||||
|
||||
|
||||
## 🏗️ 从源码构建 (可选)
|
||||
|
||||
如果您更喜欢自己构建镜像（例如，为了修改代码），请按照以下步骤操作：
|
||||
|
||||
1. **克隆仓库：**
|
||||
|
||||
```
|
||||
git clone [https://github.com/franklioxygen/MyTube.git](https://github.com/franklioxygen/MyTube.git)
|
||||
cd MyTube
|
||||
```
|
||||
|
||||
2. **构建并运行：** 您可以使用相同的 `docker-compose.yml` 结构，但将 `image: ...` 替换为 `build: ...`。
|
||||
|
||||
修改 `docker-compose.yml`：
|
||||
|
||||
```
|
||||
services:
|
||||
backend:
|
||||
build: ./backend
|
||||
# ... 其他设置
|
||||
frontend:
|
||||
build: ./frontend
|
||||
# ... 其他设置
|
||||
```
|
||||
|
||||
3. **启动：**
|
||||
|
||||
```
|
||||
docker-compose up -d --build
|
||||
```
|
||||
|
||||
|
||||
## ❓ 故障排除 (Troubleshooting)
|
||||
|
||||
### 1. "Network Error" 或 API 连接失败
|
||||
|
||||
- **原因:** 浏览器无法访问后端 API。
|
||||
|
||||
- **解决方法:** 确保端口 `5551` 在您的防火墙上已打开。如果在远程服务器上运行，请尝试按照“高级网络”部分的说明在 `.env` 文件中设置 `API_HOST`。
|
||||
|
||||
|
||||
### 2. `./uploads` 权限被拒绝 (Permission Denied)
|
||||
|
||||
- **原因:** Docker 容器用户没有主机目录的写入权限。
|
||||
|
||||
- **解决方法:** 调整主机上的权限：
|
||||
|
||||
```
|
||||
chmod -R 777 ./uploads ./data
|
||||
```
|
||||
|
||||
|
||||
### 3. 容器名称冲突 (Container Name Conflicts)
|
||||
|
||||
- **原因:** 您有另一个 MyTube 实例正在运行，或者旧容器未被删除。
|
||||
|
||||
- **解决方法:** 在启动前删除旧容器：
|
||||
|
||||
```
|
||||
docker rm -f mytube-backend mytube-frontend
|
||||
docker-compose up -d
|
||||
```
|
||||
54
documents/zh/getting-started.md
Normal file
54
documents/zh/getting-started.md
Normal file
@@ -0,0 +1,54 @@
|
||||
# 开始使用
|
||||
|
||||
## 前提条件
|
||||
|
||||
- Node.js (v14 或更高版本)
|
||||
- npm (v6 或更高版本)
|
||||
- Docker (可选，用于容器化部署)
|
||||
|
||||
## 安装
|
||||
|
||||
1. 克隆仓库：
|
||||
|
||||
```bash
|
||||
git clone <repository-url>
|
||||
cd mytube
|
||||
```
|
||||
|
||||
2. 安装依赖：
|
||||
|
||||
您可以使用一条命令安装根目录、前端和后端的所有依赖：
|
||||
|
||||
```bash
|
||||
npm run install:all
|
||||
```
|
||||
|
||||
或者手动安装：
|
||||
|
||||
```bash
|
||||
npm install
|
||||
cd frontend && npm install
|
||||
cd ../backend && npm install
|
||||
```
|
||||
|
||||
#### 使用 npm 脚本
|
||||
|
||||
您可以在根目录下使用 npm 脚本：
|
||||
|
||||
```bash
|
||||
npm run dev # 以开发模式启动前端和后端
|
||||
```
|
||||
|
||||
其他可用脚本：
|
||||
|
||||
```bash
|
||||
npm run start # 以生产模式启动前端和后端
|
||||
npm run build # 为生产环境构建前端
|
||||
npm run lint # 运行前端代码检查
|
||||
npm run lint:fix # 修复前端代码检查错误
|
||||
```
|
||||
|
||||
## 访问应用
|
||||
|
||||
- 前端：http://localhost:5556
|
||||
- 后端 API：http://localhost:5551
|
||||
Reference in New Issue
Block a user