🐳 MBE前端应用Docker部署指南
🚀 快速开始
方式1: 使用docker-compose（推荐）
1. 构建并启动所有前端应用
# 进入项目根目录
cd d:\Mises\mises-behavior-engine
# 构建并启动所有服务
docker-compose -f opensource/docker-compose.frontend.yml up --build -d
2. 访问应用
✅ MBE Education: http://localhost:3001
✅ AIGC Committee: http://localhost:3002
✅ Civil Lawyer: http://localhost:3004
✅ Nginx (可选): http://localhost:80
方式2: 单独构建镜像
MBE Education
# 构建镜像
docker build \
-f opensource/Dockerfile.frontend \
--build-arg APP_NAME=mbe-education \
--build-arg PORT=3001 \
-t mbe-education:latest \
.
# 运行容器
docker run -d \
--name mbe-education \
-p 3001:3001 \
-e NEXT_PUBLIC_API_URL=http://localhost:8000 \
mbe-education:latest
AIGC Committee
docker build \
-f opensource/Dockerfile.frontend \
--build-arg APP_NAME=mbe-aigc-committee \
--build-arg PORT=3002 \
-t mbe-aigc-committee:latest \
.
docker run -d \
--name mbe-aigc-committee \
-p 3002:3002 \
mbe-aigc-committee:latest
Civil Lawyer
docker build \
-f opensource/Dockerfile.frontend \
--build-arg APP_NAME=mbe-civil-lawyer \
--build-arg PORT=3004 \
-t mbe-civil-lawyer:latest \
.
docker run -d \
--name mbe-civil-lawyer \
-p 3004:3004 \
mbe-civil-lawyer:latest
📦 镜像架构
多阶段构建优化
Stage 1: Dependencies (deps)
→ 安装node_modules
→ 复制设计系统包依赖
Stage 2: Builder
→ 构建@mbe/design-tokens
→ 构建@mbe/ui
→ 构建@mbe/tailwind-config
→ 构建应用（Next.js build）
Stage 3: Runner
→ 只复制必要的构建产物
→ 使用non-root用户
→ 最小化镜像大小
镜像大小优化
✅ 使用node:18-alpine → 减少50%体积
✅ 多阶段构建 → 只保留运行时文件
✅ .dockerignore → 排除不必要文件
✅ pnpm → 节省空间和时间
🔧 环境变量配置
创建 .env 文件
# .env.production
# MBE Education
MBE_EDUCATION_API_URL=http://mbe-api:8000
PORT_EDUCATION=3001
# AIGC Committee
AIGC_API_URL=http://aigc-api:8001
PORT_AIGC=3002
# Civil Lawyer
CIVIL_LAWYER_API_URL=http://lawyer-api:8002
PORT_CIVIL=3004
# Nginx
NGINX_PORT=80
NGINX_SSL_PORT=443
使用环境文件
docker-compose \
-f opensource/docker-compose.frontend.yml \
--env-file .env.production \
up -d
🌐 Nginx配置（可选）
创建nginx配置文件
# config/nginx/nginx.conf
events {
worker_connections 1024;
}
http {
upstream mbe_education {
server mbe-education:3001;
}
upstream aigc_committee {
server mbe-aigc-committee:3002;
}
upstream civil_lawyer {
server mbe-civil-lawyer:3004;
}
server {
listen 80;
server_name education.mbe.local;
location / {
proxy_pass http://mbe_education;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
server {
listen 80;
server_name aigc.mbe.local;
location / {
proxy_pass http://aigc_committee;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
server {
listen 80;
server_name lawyer.mbe.local;
location / {
proxy_pass http://civil_lawyer;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
}
📊 管理Docker容器
查看状态
# 查看所有运行的容器
docker-compose -f opensource/docker-compose.frontend.yml ps
# 查看日志
docker-compose -f opensource/docker-compose.frontend.yml logs -f
# 查看特定应用日志
docker logs -f mbe-education
docker logs -f mbe-aigc-committee
docker logs -f mbe-civil-lawyer
停止和启动
# 停止所有服务
docker-compose -f opensource/docker-compose.frontend.yml stop
# 启动所有服务
docker-compose -f opensource/docker-compose.frontend.yml start
# 重启特定服务
docker-compose -f opensource/docker-compose.frontend.yml restart mbe-education
清理和重建
# 停止并删除容器
docker-compose -f opensource/docker-compose.frontend.yml down
# 删除镜像
docker rmi mbe-education:latest
docker rmi mbe-aigc-committee:latest
docker rmi mbe-civil-lawyer:latest
# 完全重建
docker-compose -f opensource/docker-compose.frontend.yml up --build --force-recreate -d
🔍 故障排查
问题1: 构建失败
# 检查Docker版本
docker --version
docker-compose --version
# 清理缓存重新构建
docker builder prune -a
docker-compose -f opensource/docker-compose.frontend.yml build --no-cache
问题2: 容器无法启动
# 查看容器日志
docker logs mbe-education
# 进入容器调试
docker exec -it mbe-education sh
# 检查端口占用
netstat -ano | findstr :3001
netstat -ano | findstr :3002
netstat -ano | findstr :3004
问题3: 设计系统包未找到
# 确保设计系统包已构建
docker build -f packages/Dockerfile.packages -t mbe-design-system:latest .
# 检查构建产物
docker run --rm mbe-design-system:latest ls -la packages/mbe-ui/dist
📈 性能优化
1. 使用构建缓存
# 启用BuildKit
$env:DOCKER_BUILDKIT=1
# 使用缓存挂载
docker build --cache-from=mbe-education:latest ...
2. 并行构建
# 并行构建所有镜像
docker-compose -f opensource/docker-compose.frontend.yml build --parallel
3. 资源限制
# docker-compose.frontend.yml
services:
mbe-education:
deploy:
resources:
limits:
cpus: '1.0'
memory: 1G
reservations:
cpus: '0.5'
memory: 512M
🚀 生产环境部署
1. 构建优化镜像
# 使用生产配置
docker-compose \
-f opensource/docker-compose.frontend.yml \
-f opensource/docker-compose.prod.yml \
build
2. 推送到镜像仓库
# Docker Hub
docker tag mbe-education:latest your-registry/mbe-education:v1.0.0
docker push your-registry/mbe-education:v1.0.0
# 阿里云
docker tag mbe-education:latest registry.cn-shenzhen.aliyuncs.com/mbe/education:v1.0.0
docker push registry.cn-shenzhen.aliyuncs.com/mbe/education:v1.0.0
3. 服务器拉取运行
# 拉取镜像
docker pull your-registry/mbe-education:v1.0.0
# 运行
docker run -d \
--name mbe-education \
-p 80:3001 \
--restart always \
your-registry/mbe-education:v1.0.0
📝 Next.js standalone模式
确保Next.js配置
// next.config.js
module.exports = {
output: 'standalone',
// 其他配置...
}
这样Docker镜像会更小，只包含必要的运行时文件。
✅ 验证部署
健康检查
# 检查容器健康状态
docker ps --filter "name=mbe-*"
# 测试HTTP响应
curl http://localhost:3001
curl http://localhost:3002
curl http://localhost:3004
性能测试
# 使用ApacheBench
ab -n 1000 -c 10 http://localhost:3001/
# 使用curl测试响应时间
curl -w "@curl-format.txt" -o /dev/null -s http://localhost:3001/
📚 相关文档
部署时间: 2026-02-01
Docker版本: 24.0+
Node版本: 18.x
pnpm版本: 8.15.0
🎉 所有前端应用现在都可以通过Docker部署！ 🐳✨