openbookpublishers/metrics_portal

OPERAS Metrics Website

镜像概述和主要用途

OPERAS Metrics Website是一个基于Ant Design Pro 2.0和UmiJS构建的指标门户网站，主要用于展示和管理指标数据。该镜像支持Docker容器化部署，提供生产、开发多环境配置方案，并集成代码一致性工具，确保开发流程规范和代码质量。

核心功能和特性

• 多环境支持：提供生产环境和开发环境的独立配置与部署方案
• 容器化部署：支持通过Docker Compose快速部署，简化环境配置
• 自动化测试：构建时自动运行测试，也可手动触发全面测试
• 代码一致性保障：集成eslint和prettier工具，通过lint-staged实现提交前代码检查
• 基于成熟框架：采用Ant Design Pro 2.0 UI库和UmiJS框架，具备良好的架构设计和可扩展性

使用场景和适用范围

适用于需要可视化展示和管理指标数据的项目，尤其适合科研、学术或企业内部的指标监控系统。开发团队可利用其多环境配置进行功能开发和生产部署，确保代码质量和环境一致性。

使用方法和配置说明

环境配置准备

首先需在var.env文件中定义API的URL，可参考var.env.example模板文件进行配置。

生产环境部署

使用Docker Compose

bash
# 构建镜像
docker-compose build
# 后台启动服务
docker-compose up -d

手动部署

bash
# 安装依赖
npm install
# 构建生产版本
npm run build

开发环境部署

使用Docker Compose

bash
# 构建开发环境镜像
docker-compose -f docker-compose.dev.yml build
# 后台启动开发服务
docker-compose -f docker-compose.dev.yml up -d

手动部署

bash
# 安装依赖
npm install
# 启动开发服务器
npm start

测试

测试会在构建时自动运行，也可手动执行：

bash
npm run test:all

代码一致性维护

为确保代码风格（包括语法和格式）的一致性，项目使用以下工具：

• https://eslint.org/%EF%BC%9A%E8%AF%AD%E6%B3%95%E6%A3%80%E6%9F%A5%E5%B7%A5%E5%85%B7
• https://prettier.io/%EF%BC%9A%E4%BB%A3%E7%A0%81%E6%A0%BC%E5%BC%8F%E5%8C%96%E5%B7%A5%E5%85%B7

可通过以下命令运行代码检查和格式化：

提交前检查（推荐）

bash
npm run precommit

单独运行eslint

bash
npm run lint

单独运行prettier

bash
npm run prettier

配置文件位置：

• eslint配置：.eslintrc.js
• prettier配置：.prettierrc

注意：开发环境建议安装所有依赖（npm install），husky会自动配置提交钩子，在提交时触发npm run precommit。但应用仍应在容器中运行，以确保在隔离环境中工作正常。

进一步阅读

该指标门户基于Ant Design Pro 2.0（一个由UmiJS驱动的React UI库）构建。为理解代码架构，建议参考这两个框架的官方文档。