flanksource/incident-manager-ui

Mission Control Frontend是一个前端应用镜像，提供用户界面支持，包含本地开发环境配置、组件测试（Storybook）、测试运行及生产构建等功能，适用于前端开发、组件测试和部署流程。

0 次下载activeflanksource镜像

Mission Control Frontend 镜像文档

概述和主要用途

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

核心功能和特性

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

使用场景和适用范围

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

使用方法和配置说明

本地开发环境设置

前提条件

已安装nvm（Node.js版本管理工具）

详细步骤

安装指定Node.js版本
进入项目根目录，运行以下命令安装.nvmrc中指定的Node.js版本：
```
bash
nvm install
```
安装项目依赖
```
bash
npm install
```

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

env
SKIP_PREFLIGHT_CHECK=true
PORT=3004
# ORY_KRATOS_URL=[***]  # 可选：ORY Kratos服务URL
# NEXT_PUBLIC_APP_DEPLOYMENT=CANARY_CHECKER  # 可选：应用部署标识
NEXT_PUBLIC_WITHOUT_SESSION=false  # 是否禁用会话验证
BACKEND_URL=[***]  # 后端服务URL
ENV=localhost  # 环境标识（如localhost、dev、prod）

表1：核心环境变量说明

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

启动开发服务器

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

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

可用开发脚本

脚本命令	描述	使用场景
`npm run storybook`	启动Storybook服务器，独立测试组件	UI组件开发与视觉测试
`npm run start`	启动Next.js监听模式，支持代码热更新	开发过程中实时预览代码变更
`npm run test:ci`	执行自动化测试套件，验证功能正确性	开发完成后或CI流程中验证功能
`npm run build`	执行生产环境构建，生成优化后的应用包	部署前构建可生产环境运行的应用
`npm run dev`	启动开发模式，API代理至开发环境	日常开发与调试主要使用