6.6 KiB
6.6 KiB
🚀 前端 Docker 镜像部署到后端服务器完整指南
📋 部署流程概览
本地构建 → 导出镜像 → 上传服务器 → 导入镜像 → 启动容器
↓ ↓ ↓ ↓ ↓
前端负责 前端负责 前端/后端 后端负责 后端负责
👥 角色分工
🔧 前端开发者职责
- ✅ 构建 Docker 镜像
- ✅ 测试镜像本地运行
- ✅ 导出镜像文件
- ✅ 提供部署文档和配置文件
🖥️ 后端运维职责
- ✅ 提供服务器访问权限
- ✅ 接收镜像文件
- ✅ 导入并运行容器
- ✅ 配置域名和 SSL（如需要）
📝 步骤详解
🎯 第一步：后端提供的信息
后端需要向前端提供：
# 1. 服务器连接信息
服务器IP: 192.168.1.100
用户名: deploy
端口: 22
# 2. 部署目录
部署路径: /app/frontend
# 3. 端口信息
应用端口: 3000
域名: your-domain.com
🏗️ 第二步：前端本地构建镜像
1. 确保代码可正常构建
# 本地测试构建
npm run build
# 检查构建结果
ls -la dist/
2. 构建 Docker 镜像
# 在项目根目录执行
cd d:\work\Aiproject\DeotalandAi\apps\frontend
# 构建镜像（使用版本号标记）
docker build -t deotaland-frontend:v1.0.0 .
# 验证镜像构建成功
docker images | grep deotaland-frontend
3. 本地测试镜像
# 运行容器测试
docker run -d -p 3001:3000 --name test-frontend deotaland-frontend:v1.0.0
# 检查容器状态
docker ps
# 测试访问（本地浏览器）
# 访问: http://localhost:3001
# 停止测试容器
docker stop test-frontend
docker rm test-frontend
📦 第三步：导出镜像
1. 保存镜像为文件
# 导出镜像（文件会很大，这是正常的）
docker save -o deotaland-frontend-v1.0.0.tar deotaland-frontend:v1.0.0
# 检查文件大小
ls -lh deotaland-frontend-v1.0.0.tar
2. 压缩镜像文件（推荐）
# Windows 上压缩
powershell Compress-Archive deotaland-frontend-v1.0.0.tar deotaland-frontend-v1.0.0.tar.zip
# 或者使用 7zip
7z a deotaland-frontend-v1.0.0.tar.gz deotaland-frontend-v1.0.0.tar
🚀 第四步：上传到服务器
方法 A：使用 SCP（推荐）
# 直接上传（需要服务器SSH权限）
scp deotaland-frontend-v1.0.0.tar.gz deploy@192.168.1.100:/app/frontend/
# 如果端口不是22
scp -P 2222 deotaland-frontend-v1.0.0.tar.gz deploy@192.168.1.100:/app/frontend/
方法 B：使用 FTP/SFTP 工具
- FileZilla
- WinSCP
- MobaXterm
方法 C：通过中间存储
# 上传到云存储（如阿里云OSS、AWS S3）
# 后端再从云存储下载
🔧 第五步：后端导入和运行
1. 登录服务器
# 后端操作
ssh deploy@192.168.1.100
# 进入部署目录
cd /app/frontend
2. 解压文件（如果需要）
# 解压 tar.gz
gunzip deotaland-frontend-v1.0.0.tar.gz
# 或者解压 zip
unzip deotaland-frontend-v1.0.0.tar.zip
3. 导入镜像
# 导入 Docker 镜像
docker load -i deotaland-frontend-v1.0.0.tar
# 验证导入成功
docker images | grep deotaland-frontend
4. 准备部署文件
# 创建部署目录
mkdir -p /app/frontend/configs
# 上传 docker-compose 文件（前端提供）
# 保存为 docker-compose.yml
🎯 第六步：启动应用
1. 使用 docker-compose 启动
# 在包含 docker-compose.yml 的目录下执行
cd /app/frontend
# 启动服务
docker-compose -f docker-compose.prod.yml up -d
# 检查状态
docker-compose ps
# 查看日志
docker-compose logs -f
2. 验证部署成功
# 检查容器运行状态
docker ps
# 测试本地访问
curl http://localhost:3000
# 检查端口监听
netstat -tlnp | grep 3000
📁 需要提供的文件清单
📋 前端需要提供给后端的文件：
-
镜像文件（必需）
deotaland-frontend-v1.0.0.tar -
docker-compose 配置文件（必需）
docker-compose.prod.yml -
部署文档（推荐）
DEPLOYMENT_GUIDE.md (本文档) -
版本信息（推荐）
version.txt - 包含版本号和构建时间
🔧 常用命令速查
前端构建命令
# 构建镜像
docker build -t deotaland-frontend:v1.0.0 .
# 导出镜像
docker save -o deotaland-frontend-v1.0.0.tar deotaland-frontend:v1.0.0
# 压缩文件
gzip deotaland-frontend-v1.0.0.tar
后端部署命令
# 导入镜像
docker load -i deotaland-frontend-v1.0.0.tar
# 启动服务
docker-compose -f docker-compose.prod.yml up -d
# 查看状态
docker-compose ps
# 查看日志
docker-compose logs -f
# 停止服务
docker-compose down
# 重启服务
docker-compose restart
🚨 常见问题解决
问题 1：镜像文件太大
解决方案：
- 使用
.dockerignore文件排除不需要的文件 - 使用多阶段构建优化镜像大小
- 考虑使用镜像仓库代替文件传输
问题 2：上传速度慢
解决方案：
- 使用压缩工具（gzip/7zip）
- 分批上传或使用云存储中转
- 优化网络环境
问题 3：容器启动失败
排查步骤：
# 1. 查看容器状态
docker ps -a
# 2. 查看错误日志
docker logs <container-id>
# 3. 检查端口占用
netstat -tlnp | grep 3000
# 4. 检查资源使用
docker stats
问题 4：服务无法访问
排查步骤：
# 1. 检查容器是否运行
docker ps
# 2. 测试容器内服务
docker exec <container-id> curl http://localhost:3000
# 3. 检查防火墙设置
sudo ufw status # Ubuntu
sudo firewall-cmd --list-all # CentOS
# 4. 检查云服务器安全组设置
📊 性能优化建议
镜像优化
- 使用 Alpine Linux 基础镜像
- 实施多阶段构建
- 清理构建缓存
部署优化
- 使用镜像仓库（Docker Registry）
- 实施蓝绿部署
- 配置健康检查
监控建议
- 设置容器资源限制
- 配置日志收集
- 实施监控告警
🎯 下一步建议
- 建立 CI/CD 流程：自动化构建和部署
- 使用镜像仓库：替代文件传输
- 配置域名和 SSL：提供 HTTPS 访问
- 设置监控告警：及时发现问题
- 实施自动扩容：应对流量高峰
📞 支持联系方式
- 前端开发支持：前端团队
- 后端运维支持：运维团队
- 紧急问题：电话/微信 XXX-XXXX-XXXX
最后更新时间：2025年1月21日
文档版本：v1.0
适用范围：前端 Docker 镜像部署到后端服务器