# Docker + PM2 部署快速参考 ## 🚀 快速开始 ```bash # 本地构建测试 yarn build yarn preview # Docker 部署 docker-compose up -d --build # 查看日志 docker-compose logs -f ``` ## 📝 常用命令 ### 本地开发 ```bash yarn dev # 启动开发服务器 yarn build # 构建生产版本 yarn preview # 预览构建结果 yarn clean # 清理构建产物 ``` ### Docker 操作 ```bash # 基础操作 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 管理(容器内) ```bash pm2 list # 查看进程列表 pm2 logs # 查看日志 pm2 restart nex-design # 重启应用 pm2 monit # 实时监控 ``` ## 🔧 故障排查 ### 文档无法加载 ```bash # 检查 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 ``` ### 文档修改后未生效 ```bash # 卷挂载方案下,修改应立即生效 # 如果未生效,检查浏览器缓存 # 使用 Ctrl+Shift+R 强制刷新 # 验证容器内文件已更新 docker exec nex-design-app cat /app/dist/docs/DESIGN_COOKBOOK.md ``` ### 容器启动失败 ```bash # 查看详细日志 docker-compose logs nex-design # 检查端口占用 lsof -i :3000 ``` ### 内存不足 ```bash # 查看资源使用 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: ```nginx 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` 完整配置。