# clue_front

**Repository Path**: wyx_develop/clue_front

## Basic Information

- **Project Name**: clue_front
- **Description**: 蛛丝马迹（Clue）项目是分布式网络链路监控系统的服务器端，该项目是前端项目，需要配合后端项目clue_backend进行搭配

- **Primary Language**: NodeJS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-07-22
- **Last Updated**: 2022-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 蛛丝马迹-前端

## 1. 概述
蛛丝马迹（Clue）项目是分布式网络链路监控系统，该项目是前端项目，需要配合后端项目[clue_backend](https://gitee.com/paultest/clue_backend)进行搭配

有以下特点：
* 精益运维：发现闲置资源，无效网络策略，节能增效
* 网络可视化：动态生成拓扑，集群情况一目了然
* 网络透视：生成策略列表，风险策略告警
* 问题定位：偶现问题事后回溯
* 对应用透明：金融系统的复杂度高，关联系统多，所有系统均接入Zipkin类调用链不现实(Java, Nodejs, Cobol, Python, Golang,  C++, C#)

<br>

该前端框架是基于Vue框架来实现的，页面比较简单，只实现了总览页、链路拓扑页、数据分析页、流量分析页和安全预警页，其中流量分析页和安全预警页还在开发中。

<br>

注意：该项目需要配合后端（clue_backend），数据都是获取后端的API接口来获取的


## 2. 效果页面
总览页

![image-20201107164705669](https://gitee.com/paultest/Images/raw/master/img/image-20201107164705669.png)



链路拓扑图

![image-20201107164348553](https://gitee.com/paultest/Images/raw/master/img/image-20201107164348553.png)

并且点击某个IP可以查该IP的关联：

![image-20201107164443790](https://gitee.com/paultest/Images/raw/master/img/image-20201107164443790.png)



数据分析页

![image-20201107164601475](https://gitee.com/paultest/Images/raw/master/img/image-20201107164601475.png)



Todo 流量分析页和安全预警页还在进行中



## 3. 安装步骤

#### A. 安装node
我这里使用的node版本为10.23
```shell
# 修改yum源
curl -sL https://rpm.nodesource.com/setup_10.x | bash -

# 安装nodejs
yum install nodejs

# 查看版本
node -v
npm -v
```
注意：需要有外网权限

<br>

由于墙的原因，建议使用淘宝源
```shell
npm config set registry https://registry.npm.taobao.org
```
验证是否已经切换
```shell
npm config get registry
// 或
npm info express
```

#### B. 拉代码
```shell
cd /home/data/devops/
git clone https://gitee.com/paultest/clue_front.git
```

<br>

#### C. npm install
npm进行install的时候，这一步比较耗时
```shell
npm install
```
注意：需要有外网权限

<br>

#### D. 修改配置
配置文件在.env文件中，复制对应环境的env文件即可，比如.env.dev

#### E. npm run
```shell
npm run dev
```
或者是后台启动
```shell
nohup npm run dev > /dev/null 2> /dev/null &
```
注意：建议使用pm2来管理npm进程，不要直接nohup启动

<br>

启动之后可通过以下命令查看是否运行：
```shell
ps -ef | grep npm
ps -ef | grep node
netstat -anp | grep 8080
```

#### F. 配置nginx
直接拷贝nginx目录下的clue-front.devops.com.conf（生产环境）或者是clue-front.tdevops.com.conf（测试环境）到nginx的配置目录下（一般是/etc/nginx/conf.d）
```shell
cp -R /home/data/devops/clue_front/nginx/clue-front.tdevops.com.conf /etc/nginx/conf.d/
```
注意：域名可自定义的

<br/>

检查nginx是否正确
```shell
nginx -t
```

<br/>

重新加载nginx
```shell
nginx -s reload
```

<br/>

在其他机器，设置hosts即可访问：clue-front.tdevops.com

## 4. 相关配置
* 端口：8080
* 域名：clue-front.devops.com（生产）、clue-front.tdevops.com（测试）
* 环境配置：clue_front/.env
* nginx配置：nginx目录，需要把对应文件拷贝到/etc/nginx/conf.d/