danieltomazdev/netflix-clone

Netflix Clone Docker镜像

该Docker镜像是快速运行Netflix Clone项目的解决方案，适用于开发或生产环境。项目源代码可在https://github.com/DanielTomazDev/Clone-da-Netflix获取。

镜像基于Node.js 18 Alpine和Nginx Alpine构建，具有体积优化和良好性能的特点。开发镜像包含自动热重载功能，便于快速开发。

可用标签

所有标签可在https://hub.docker.com/r/danieltomazdev/netflix-clone查看：

• dev：开发环境，带热重载（Node.js 18 + Vite）
• prod 或 latest：生产环境，已优化（Nginx Alpine，约40MB）

镜像包含完整的OCI标签，提供端口、环境变量、卷和功能等信息。

包含技术

• React 18：前端UI库
• Vite：快速构建工具
• Tailwind CSS：实用型CSS框架
• React Router DOM：SPA路由管理
• Axios：HTTP客户端
• Nginx：生产环境Web服务器

快速开始

开发环境

bash
docker run -it --rm -p 5173:5173 -e VITE_TMDB_API_KEY=你的密钥 docker.xuanyuan.run/danieltomazdev/netflix-clone:dev

访问地址：http://localhost:5173

生产环境

bash
docker run -it --rm -p 3000:80 -e VITE_TMDB_API_KEY=你的密钥 docker.xuanyuan.run/danieltomazdev/netflix-clone:prod

访问地址：http://localhost:3000

必需API Key

TMDB API Key（必填）：

1. 访问：https://www.themoviedb.org/settings/api
2. 注册账号并生成API Key
3. 使用：-e VITE_TMDB_API_KEY=你的密钥

测试密钥：

bash
-e VITE_TMDB_API_KEY=fa7e4d688f969937e7c96565355b6d51

核心功能

智能预告片系统

• 卡片悬停时自动播放预告片
• 音频控制无需重启预告片
• 横幅区域5秒后自动全屏
• 预告片结束后自动切换影片
• 自动滚动以居中活动预告片

优化布局

• 背景图片下重新组织信息
• 带展开/收起按钮的智能剧情简介
• 移动端优先的响应式设计
• 全面支持剧集和电影

Docker Compose

开发环境

bash
docker-compose up netflix-clone-dev

生产环境

bash
docker-compose up netflix-clone

问题解决

错误："API Key无效"

解决方法：检查TMDB密钥是否正确：

bash
# 测试API
curl "https://api.themoviedb.org/3/movie/popular?api_key=你的密钥"

错误："容器无法启动"

解决方法：检查端口是否占用：

bash
# 查看端口使用情况
netstat -tulpn | grep :5173
netstat -tulpn | grep :3000

错误："预告片无法加载"

解决方法：查看容器日志：

bash
docker logs <容器ID>

错误："页面空白"

解决方法：检查API Key是否配置：

bash
docker exec <容器ID> env | grep VITE_TMDB_API_KEY

常用命令

查看日志

bash
docker logs -f <容器ID>

停止容器

bash
docker-compose down

修改后重建

bash
docker-compose build
docker-compose up

链接

• GitHub：https://github.com/DanielTomazDev/Clone-da-Netflix
• Docker Hub：https://hub.docker.com/r/danieltomazdev/netflix-clone
• TMDB API文档：https://www.themoviedb.org/documentation/api

开发者：Daniel Tomaz | https://github.com/DanielTomazDev