创新实训——001

前言

报名了学校的创新实训，小组的主题是“WEB访问日志分析与入侵检测可视化系统”，我负责可视化模块。

项目地址

• github：项目仓库
• 项目博客：项目博客

技术路线

前端

• 前端框架我选用Vue.js，官方网址：Vue.js官方网址
• 组件库我选用了element-ui，其样式丰富，并且基于Vue2.0，其官方文档网址：element-ui官方文档
• 可视化工具我选择配置式的echarts，因为其容易使用、图表样式丰富且美观，虽为配置式工具但已能满足所有需求，官方文档见：echarts官方文档

后端

• 后端框架我选用的是flask，文档：flask文档

本篇博客主要介绍环境搭建

环境搭建

项目在centos7环境下部署

虚拟机搭建

之前没用过centos，下面简答记录一下
搭建centos7，iso在阿里云镜像上下载，链接：centos7iso
选择CentOS-7-x86_64-DVD-2003.iso即可，当然也可选择bt下载
我还是选择了带gnome桌面的，选择手动分区，然后将一用户设置为管理员
安装完后，第一件事是换源：

mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup
curl -o /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo
yum makecache

然后yum -y update
此时快照一次

前端环境搭建

前端使用的Vue.js

安装node.js

首先需要安装node.js
安装依赖yum -y install gcc gcc-c++ openssl-devel
用的淘宝镜像，版本为v10.15.3，链接下载链接
选择node-v10.15.3-linux-x64.tar.gz
或wget https://cdn.npm.taobao.org/dist/node/v10.15.3/node-v10.15.3-linux-x64.tar.gz
此时下载的文件在home文件夹下，tar -zxvf 文件进行解压，解压完后，将文件迁移mv 解压后的文件 /usr/local/src/node
此时cd /usr/local/src/node/bin，执行./npm -v，发现是可以的
下面建立软链接

ln -s /usr/local/src/node/bin/node /usr/bin/node
ln -s /usr/local/src/node/bin/npm /usr/bin/npm

此时全局下npm就可以用了
我们可以使用cnpm加快速度
npm install -g cnpm --registry=https://registry.npm.taobao.org
ln -s /usr/local/src/node/bin/cnpm /usr/bin/cnpm

安装vue-cli

cnpm install -g vue-cli
ln -s /usr/local/src/node/bin/vue /usr/bin/vue
vue --version查看是否成功
新建vue工程
vue init webpack web-log-analyser

初始化好后，工程在home目录下
在工程目录下：cnpm install和cnpm run dev
此时打开浏览器http://localhost:8080/#/，若能正常显示则安装成功，要停止ctrl+c即可。
要修改端口的话在config/index.js下的port字段，这里我改为8090
要写代码感觉在linux下很不熟悉，主要没有一个趁手的编辑器，所以准备下载vs code。

下载vs code

按照vs code 官网上的下载方式就行：

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
yum check-update
sudo yum install code
ln -s /usr/share/code/bin/code /usr/bin/vscode

以后输入vscode即可启动
上面做完了我又想起来为什么要在centos下面写呢，感觉没必要，到时候在widows下写完了打包部署到docker上就行了。
在windows下的node.js等的安装不再详述，相比linux就简单很多，然后vue初始化工程都是一样的，所以下面的过程既可以在windows上，也可以在linux上。啥时候写一下关于vue的用法吧，之前用过，挺好用的，不过也仅局限于基本用途。
还是不太习惯用Linux，所以我现在要开始验证windows下写的vue工程部署到docker上时，centos是否可用。

验证docker可行性

centos7安装docker

yum install -y yum-utils device-mapper-persistent-data lvm2
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum list docker-ce --showduplicates | sort -r
yum install docker-ce-18.03.1.ce
systemctl start docker
//开机启动（可选）
systemctl enable  docker
docker version//查看版本

Windows初始化vue工程并打包

vue init webpack web-log-analyser
cd 项目目录
npm run dev

打包：在项目目录下npm run build，此时你会发现项目中产生了一个dist目录

docker部署

首先通过filezilla将文件从Windows传至centos，然后在centos项目目录下编写Dockerfile，如下所示：

FROM nginx:latest
MAINTAINER 1115198434@qq.com
COPY dist/ /usr/share/nginx/html/

然后docker pull nginx
接着在项目目录下创建镜像：docker build -t xxx .xxx为自定义镜像名
可以通过docker image查看，接着创建容器docker run -d --name xx -p 8081:80 xxx，xx为容器名，xxx即为刚刚新建的镜像名，-p 8081:80: 是将nginx的80映射到8081端口
此时服务已启动，在Windows上访问centos的8081端口即可访问到网页，这说明在Windows上编写然后部署到docker上是可以的
其他操作：

docker stop containerId/containerName #停止容器
docker rm containerId/containerName #删除容器
docker rmi imageId/imageName #删除镜像

前端环境至此搭建完成！

后端环境搭建

后端使用flask，之前打算用spring boot，但是最后还是决定用flask了