nex_design/QUICKSTART.md

Docker + PM2 部署快速参考

🚀 快速开始

# 本地构建测试
yarn build
yarn preview

# Docker 部署
docker-compose up -d --build

# 查看日志
docker-compose logs -f

📝 常用命令

本地开发

yarn dev                    # 启动开发服务器
yarn build                  # 构建生产版本
yarn preview                # 预览构建结果
yarn clean                  # 清理构建产物

Docker 操作

# 基础操作
docker-compose up -d                    # 启动服务
docker-compose down                     # 停止并删除容器
docker-compose restart                  # 重启服务
docker-compose logs -f nex-design       # 查看日志

# 重新构建
docker-compose up -d --build            # 重新构建并启动
docker-compose build --no-cache         # 不使用缓存重新构建

# 容器管理
docker exec -it nex-design-app sh       # 进入容器
docker ps                               # 查看运行中的容器
docker stats nex-design-app             # 查看资源使用

PM2 管理（容器内）

pm2 list                    # 查看进程列表
pm2 logs                    # 查看日志
pm2 restart nex-design      # 重启应用
pm2 monit                   # 实时监控

🔧 故障排查

文档无法加载

# 检查 docs 目录是否正确挂载
docker exec nex-design-app ls -la /app/dist/docs/

# 检查挂载配置
docker inspect nex-design-app | grep -A 10 Mounts

# 如果挂载失败，重启容器
docker-compose down
docker-compose up -d

文档修改后未生效

# 卷挂载方案下，修改应立即生效
# 如果未生效，检查浏览器缓存
# 使用 Ctrl+Shift+R 强制刷新

# 验证容器内文件已更新
docker exec nex-design-app cat /app/dist/docs/DESIGN_COOKBOOK.md

容器启动失败

# 查看详细日志
docker-compose logs nex-design

# 检查端口占用
lsof -i :3000

内存不足

# 查看资源使用
docker stats nex-design-app

# 调整 ecosystem.config.js 中的 max_memory_restart

📁 重要文件

文件	说明
ecosystem.config.js	PM2 配置
Dockerfile	Docker 镜像配置
docker-compose.yml	Docker Compose 编排
.dockerignore	Docker 构建忽略
DEPLOYMENT.md	完整部署文档
docs/DOCKER_DOCS_SETUP.md	文档目录问题说明

🌐 访问地址

• 本地开发: http://localhost:5173
• 本地预览: http://localhost:4173
• Docker 容器: http://localhost:3000

⚙️ 环境要求

• Node.js >= 16.0.0
• Yarn >= 1.22.0
• Docker >= 20.10
• Docker Compose >= 2.0

📦 构建流程

源代码
  ↓
vite build → dist/*
  ↓
Docker 镜像: dist → /app/dist
  ↓
卷挂载: ./docs → /app/dist/docs (实时同步)
  ↓
PM2 serve: /app/dist @ :3000

文档更新流程：

编辑 docs/*.md → 立即生效（无需重启）

🔐 生产环境

建议配置 Nginx 反向代理和 SSL：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

详见 DEPLOYMENT.md 完整配置。