eclipse/che-dashboard-dev

che-dashboard-dev 镜像文档

1. 镜像概述

che-dashboard-dev是Eclipse Che生态中的开发专用镜像，专注于Eclipse Che仪表盘（Dashboard）的开发阶段工作。该镜像提供完整的开发环境，方便开发人员构建、调试和优化Che仪表盘界面，支持前端代码实时编译、热重载及界面预览，简化仪表盘功能的开发与测试流程。

2. 核心功能与特性

• 实时开发环境：内置Node.js开发环境及前端构建工具（如Webpack、Babel），支持代码实时编译与热重载。
• 调试工具集成：包含Chrome DevTools等调试工具，支持断点调试、日志输出及性能分析。
• 配置管理：支持自定义仪表盘配置文件挂载，可实时调整界面布局、菜单结构及功能模块。
• 界面预览：提供内置Web服务器，可通过浏览器实时预览仪表盘界面效果，支持多设备适配测试。
• 开发工作流支持：集成Git版本控制工具，支持代码提交、分支管理及开发流程自动化。

3. 使用场景

• Che仪表盘开发人员：用于开发新功能、修复界面bug或优化用户体验。
• 前端开发团队：协作开发Che仪表盘前端组件，共享统一开发环境。
• Che生态扩展开发者：开发自定义仪表盘插件或集成第三方服务界面。

4. 使用方法

4.1 基础使用（Docker Run）

bash
docker run -d \
  --name che-dashboard-dev \
  -p 3000:3000 \  # 前端预览端口
  -p 9229:9229 \  # 调试端口
  -v $(pwd)/dashboard-src:/app/src \  # 挂载本地代码目录
  -e NODE_ENV=development \  # 开发环境模式
  -e CHE_API_URL=http://che-server:8080/api \  # 连接Che服务器API（可选）
  che-dashboard-dev

说明：$(pwd)/dashboard-src需替换为本地Che仪表盘源代码目录路径，容器启动后可通过http://localhost:3000访问实时预览界面。

4.2 Docker Compose 配置

创建docker-compose.yml文件：

yaml
version: '3'
services:
  che-dashboard-dev:
    image: che-dashboard-dev
    ports:
      - "3000:3000"
      - "9229:9229"
    volumes:
      - ./dashboard-src:/app/src
      - ./config:/app/config  # 挂载自定义配置目录（可选）
    environment:
      - NODE_ENV=development
      - CHE_API_URL=http://che-server:8080/api
      - LOG_LEVEL=debug  # 调试日志级别（可选）
    restart: unless-stopped

启动命令：docker-compose up -d

5. 配置参数说明

5.1 端口映射

• 3000：前端预览端口，用于访问仪表盘实时预览界面。
• 9229：Node.js调试端口，用于连接调试工具（如VS Code Debugger）。

5.2 环境变量

5.3 数据卷挂载

• /app/src：仪表盘源代码目录，挂载本地代码实现实时开发。
• /app/config：配置文件目录，用于覆盖默认配置（如界面布局、菜单定义等）。

6. 开发工作流示例

1. 代码挂载：将本地仪表盘源代码目录挂载至容器/app/src。
2. 启动容器：通过docker run或docker-compose启动开发环境。
3. 实时预览：访问http://localhost:3000查看界面效果，代码修改后自动热重载。
4. 调试：通过IDE（如VS Code）连接localhost:9229进行断点调试。
5. 配置调整：修改挂载的/app/config目录下配置文件，实时更新界面配置。

7. 注意事项

• 该镜像仅用于开发环境，生产环境请使用正式发布的che-dashboard镜像。
• 本地代码需满足Che仪表盘前端项目结构（如基于React、TypeScript等），否则可能导致编译失败。
• 若需连接远程Che服务器，确保CHE_API_URL可访问且配置跨域权限。