海外短剧源码系统搭建手册（支持H5+APP）

一、项目概述

全开源海外短剧系统 是一款专为海外市场设计的短剧内容平台，支持H5端、APP端（iOS/Android），提供完整的视频点播、用户订阅、支付对接、多语言等功能。本手册将指导你从零开始搭建完整的短剧系统。

---

二、系统特性

核心功能

• 多端支持：响应式H5网站 + 原生APP（React Native/Flutter）

• 内容管理：剧集分类、标签管理、推荐算法

• 用户系统：注册登录、观看历史、收藏夹、订阅管理

• 支付集成：支持Stripe、PayPal、Google Play、App Store支付

• 多语言：英语、西班牙语、阿拉伯语等（支持扩展）

• 实时统计：观看数据、用户行为分析

技术栈

• 后端：Node.js + Express / Python + Django

• 前端H5：Vue.js 3 / React 18

• 移动端：React Native / Flutter

• 数据库：PostgreSQL + Redis

• 视频处理：FFmpeg + HLS/DASH

• 存储：AWS S3 / Cloudflare R2

• 部署：Docker + Nginx

---

三、环境准备

服务器要求

• CPU：4核以上

• 内存：8GB+

• 存储：100GB+ SSD

• 系统：Ubuntu 22.04 LTS

• 带宽：≥100Mbps（建议使用CDN）

开发环境

bash

# 1. 安装Node.js
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 2. 安装Python
sudo apt install python3 python3-pip

# 3. 安装PostgreSQL
sudo apt install postgresql postgresql-contrib

# 4. 安装Redis
sudo apt install redis-server

# 5. 安装FFmpeg
sudo apt install ffmpeg

# 6. 安装Docker
curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

---

四、系统部署步骤

步骤1：获取源代码

bash

# 从GitHub克隆项目（示例仓库）
git clone https://github.com/example/short-video-platform.git
cd short-video-platform

# 项目结构
├── backend/          # 后端API服务
├── web-h5/           # H5前端
├── mobile-app/       # 移动端应用
├── admin-panel/      # 管理后台
├── docker-compose.yml
└── README.md

步骤2：数据库配置

sql

-- 创建数据库
CREATE DATABASE shortvideo_db;
CREATE USER shortvideo_user WITH ENCRYPTED PASSWORD 'your_password';
GRANT ALL PRIVILEGES ON DATABASE shortvideo_db TO shortvideo_user;

-- 导入初始数据
psql -U shortvideo_user -d shortvideo_db -f init.sql

步骤3：后端服务配置

bash

cd backend
cp .env.example .env

# 编辑环境变量
nano .env

# 关键配置
DB_HOST=localhost
DB_PORT=5432
DB_NAME=shortvideo_db
DB_USER=shortvideo_user
DB_PASS=your_password

REDIS_URL=redis://localhost:6379

JWT_SECRET=your_jwt_secret_key_here

AWS_ACCESS_KEY=your_key
AWS_SECRET_KEY=your_secret
AWS_S3_BUCKET=your_bucket

STRIPE_SECRET_KEY=sk_live_xxx
PAYPAL_CLIENT_ID=xxx

步骤4：启动后端服务

bash

# 安装依赖
npm install

# 运行数据库迁移
npm run migrate

# 启动开发服务器
npm run dev

# 或使用Docker
docker-compose up -d backend

步骤5：H5前端部署

bash

cd web-h5
npm install

# 配置环境
cp .env.production .env.production.local

# 构建生产版本
npm run build

# 部署到Nginx
sudo cp -r dist/* /var/www/html/shortvideo/

Nginx配置示例

nginx

server {
    listen 80;
    server_name your-domain.com;
    
    location / {
        root /var/www/html/shortvideo;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
    }
    
    # 视频文件代理
    location /videos {
        proxy_pass http://your-cdn-domain.com;
    }
}

步骤6：移动端APP构建

bash

cd mobile-app

# React Native版本
npm install
cd ios && pod install
# 打开Xcode构建iOS版本
# Android Studio构建Android版本

# 或Flutter版本
flutter pub get
flutter build apk --release
flutter build ios --release

步骤7：支付系统配置

1. Stripe配置

   • 注册Stripe账号获取API密钥

   • 配置Webhook接收支付通知

   • 设置订阅计划和产品

2. 应用内支付

   • iOS：配置App Store Connect

   • Android：配置Google Play Console

---

五、核心功能配置

视频处理流水线

python

# 视频转码脚本示例
import subprocess

def process_video(input_path, output_dir):
    # 转换为HLS格式
    cmd = [
        'ffmpeg', '-i', input_path,
        '-profile:v', 'baseline',
        '-level', '3.0',
        '-start_number', '0',
        '-hls_time', '10',
        '-hls_list_size', '0',
        '-f', 'hls',
        f'{output_dir}/master.m3u8'
    ]
    subprocess.run(cmd)
    
    # 生成缩略图
    subprocess.run([
        'ffmpeg', '-i', input_path,
        '-ss', '00:00:05',
        '-vframes', '1',
        f'{output_dir}/thumbnail.jpg'
    ])

多语言配置

json

// locales/en.json
{
  "home": {
    "title": "Short Drama",
    "trending": "Trending Now",
    "continueWatching": "Continue Watching"
  }
}

// locales/es.json
{
  "home": {
    "title": "Drama Corto",
    "trending": "Tendencias",
    "continueWatching": "Continuar Viendo"
  }
}

---

六、数据监控与维护

健康检查端点

javascript

// 后端健康检查
app.get('/health', (req, res) => {
    res.json({
        status: 'healthy',
        timestamp: new Date(),
        services: {
            database: 'connected',
            redis: 'connected',
            storage: 'available'
        }
    });
});

日志配置

bash

# 使用PM2管理进程
npm install -g pm2
pm2 start ecosystem.config.js

# 查看日志
pm2 logs backend

备份脚本

bash

#!/bin/bash
# backup.sh
DATE=$(date +%Y%m%d_%H%M%S)
pg_dump shortvideo_db > backup/db_$DATE.sql
aws s3 sync /var/www/html/shortvideo s3://backup-bucket/$DATE/

---

七、安全配置建议

1. SSL证书

   bash

   # 使用Let's Encrypt
   sudo apt install certbot python3-certbot-nginx
   sudo certbot --nginx -d your-domain.com

2. 防火墙配置

   bash

   sudo ufw allow 22/tcp
   sudo ufw allow 80/tcp
   sudo ufw allow 443/tcp
   sudo ufw enable

3. API安全

   • 启用JWT令牌刷新机制

   • 实现API速率限制

   • 添加输入验证和XSS防护

---

八、性能优化

1. CDN加速

   • 配置Cloudflare或AWS CloudFront

   • 视频文件使用CDN分发

2. 缓存策略

   nginx

   # Nginx缓存配置
   location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
       expires 365d;
       add_header Cache-Control "public, immutable";
   }

3. 数据库优化

   • 为常用查询添加索引

   • 定期清理旧数据

   • 使用连接池

---

九、常见问题解决

Q1：视频播放卡顿

• 检查CDN配置

• 优化视频码率（建议使用自适应码率）

• 启用HTTP/2或HTTP/3

Q2：支付失败

• 验证支付网关配置

• 检查Webhook端点可访问性

• 确认SSL证书有效

Q3：APP审核被拒

• 确保内容符合平台政策

• 完善用户举报机制

• 添加年龄分级设置