前言
報名了學校的創新實訓，小組的主題是“WEB訪問日誌分析與入侵檢測可視化系統”，我負責可視化模塊。
項目地址
技術路線
前端
- 前端框架我選用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 [email protected]
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了