flanksource/incident-manager-ui

Mission Control Frontend 镜像文档

概述和主要用途

Mission Control Frontend是一个面向Mission Control的前端应用镜像，提供用户界面支持及完整的开发工作流。该镜像集成了本地开发环境配置、组件独立测试、自动化测试和生产构建等功能，适用于前端开发人员进行应用开发、组件验证、功能测试及部署准备。

核心功能和特性

• 本地开发环境快速搭建：支持通过nvm管理Node.js版本，一键安装依赖并配置开发环境
• 组件独立测试：集成Storybook工具，可在无后端依赖情况下独立测试UI组件
• 多环境配置支持：通过环境变量灵活配置端口、后端URL、会话管理等参数
• 完整开发脚本：提供开发模式启动、测试运行、生产构建等标准化脚本
• 用户认证集成：支持账户注册与登录功能，适配不同环境的用户会话管理

使用场景和适用范围

• 前端开发人员进行Mission Control前端应用的日常开发与调试
• UI/UX设计人员使用Storybook进行组件视觉和交互测试
• 开发团队通过自动化测试脚本（test:ci）验证功能正确性
• 部署前通过生产构建脚本（build）生成可部署的应用包

使用方法和配置说明

本地开发环境设置

前提条件

• 已安装https://github.com/nvm-sh/nvm%EF%BC%88Node.js%E7%89%88%E6%9C%AC%E7%AE%A1%E7%90%86%E5%B7%A5%E5%85%B7%EF%BC%89

详细步骤

1. 安装指定Node.js版本
   进入项目根目录，运行以下命令安装.nvmrc中指定的Node.js版本：

   bash
   nvm install
   

2. 安装项目依赖

   bash
   npm install
   

3. 配置环境变量
   创建.env.local文件，复制.env文件内容并根据需求修改以下配置（关键参数说明见表1）：

   env
   SKIP_PREFLIGHT_CHECK=true
   PORT=3004
   # ORY_KRATOS_URL=http://kratos.canary.lab.flanksource.com/  # 可选：ORY Kratos服务URL
   # NEXT_PUBLIC_APP_DEPLOYMENT=CANARY_CHECKER  # 可选：应用部署标识
   NEXT_PUBLIC_WITHOUT_SESSION=false  # 是否禁用会话验证
   BACKEND_URL=https://incident-commander.demo.aws.flanksource.com  # 后端服务URL
   ENV=localhost  # 环境标识（如localhost、dev、prod）
   

   表1：核心环境变量说明

   变量名	说明	默认值/示例
   SKIP_PREFLIGHT_CHECK	是否跳过预检查（解决依赖版本冲突）	true
   PORT	应用运行端口	3004
   BACKEND_URL	后端API服务地址	https://incident-commander.demo.aws.flanksource.com
   NEXT_PUBLIC_WITHOUT_SESSION	是否禁用会话验证（无需登录）	false
   ENV	环境标识（影响配置加载）	localhost

4. 启动开发服务器

   bash
   npm run dev  # 启动开发模式，API请求代理至开发环境
   

5. 账户注册与登录

   • 若无账户：访问 http://localhost:3000/registration 完成注册
   • 已有账户：访问 http://localhost:3000/login 登录系统

可用开发脚本

贡献指南

代码贡献需遵循https://github.com/flanksource/style-guide/blob/master/docs/front-end.md