前端脚本自动化部署（非jenkins）

vue自动化部署前端项目（脚本部署，未用jenkins）

本文所需资料：链接：https://pan.baidu.com/s/1EKmWGAMEv_V2-dQzv1TL1Q
提取码：e4wp
复制这段内容后打开百度网盘手机App，操作更方便哦
用到的技术：vue,npm,pscp,nginx,linux,python,putty,git等

前端自动化部署原理：

首先从git服务器拉取前端项目代码，然后把拉取来的代码打包成dist文件，把打包好的文件上传linux中的nginx服务器，重启nginx服务器。该过程用到git版本控制工具拉取代码，用到前端打包命令（需要npm技术）所以要安装node，需要用到从本地window系统上传文件到远程linux系统用到了putty技术，另外要自动化启动用到了python技术，最后要启动nginx服务器，用到nginx启动和停止的命令。

1.安装putty环境

下载putty安装包
找到putty-0.60-installer.exe双击
傻瓜式安装

2.安装Python环境(Python开发环境)

下载python安装包python-3.6.5-amd64
双击并傻瓜式安装
配置环境变量

3.安装node环境（vue开发环境）

可以参考https://blog.csdn.net/jzc12345611/article/details/96485022

4.安装git环境

下载git安装包
傻瓜式安装
配置git拉取代码的用户和密码，并记住用户名和密码
注意：配置记住密码是为了后面脚本从git服务器拉取代码时不用输入用户名和密码
如果遇到配置好的git不能记住密码，请参考https://blog.csdn.net/jzc12345611/article/details/101543956

5.使用git拉取服务器代码

找到前端对应的给git服务器的地址，使用git拉取前端代码，首次拉取的vue代码需要下载依赖 cd 到项目目录下使用npm install 下载项目依赖然后可以正常使用了

6.linux项目部署环境

可以参考

1).linux环境下安装nginx

(https://blog.csdn.net/jzc12345611/article/details/100702335

2).离线纯净版redhet6.8安装nginx

https://blog.csdn.net/jzc12345611/article/details/98585737

3).vue项目打包部署到tomcat或nginx服务器

https://blog.csdn.net/jzc12345611/article/details/97645589

4). vue前端项目用nginx做负载均衡部署

https://blog.csdn.net/jzc12345611/article/details/100701761

7.Python脚本文件环境

1）在window下的python环境中添加依赖
2）把site-packages的解压包放在C:\Python\Lib目录下

8. Python脚本编写

在restart_nginx项目中编写python代码

1） 编写远程删除静态文件的代码

import paramiko
import os
import time

class Linux2(object):
    def __init__(self, ip, username, password, timeout=30):
        self.ip = ip
        self.username = username
        self.password = password
        self.timeout = timeout
        self.t = ''
        self.chan = ''
        self.try_times = 3

def run_command(self, cmd_line):
    ssh = paramiko.SSHClient()
    ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
    ssh.connect(self.ip, '22', self.username, self.password)
    stdin, stdout, stderr = ssh.exec_command(cmd_line)
    for line in stdout:
        print(line.strip("\n"))
    ssh.close()
if __name__ == "__main__":
    my_delete= Linux2('10.45.4.220', 'ouos', 'ouos')
    my_delete.run_command('cd /usr/local/nginx/html;rm -rf ouos')
    time.sleep(5)
my_delete.run_command('cd /usr/local/nginx/html;mkdir ouos')

2） 编写远程启动nginx脚本的编码

import paramiko
import os
import time

class Linux(object):
    def __init__(self,ip,username,password,timeout=30):
        self.ip=ip
        self.username=username
        self.password=password
        self.timeout=timeout
        self.t=''
        self.chan=''
        self.try_times=3

    def run_command(self,cmd_line):
        ssh=paramiko.SSHClient()
        ssh.set_missing_host_key_policy(paramiko.AutoAddPolicy())
        ssh.connect(self.ip,'22',self.username,self.password)
        stdin,stdout,stderr=ssh.exec_command(cmd_line)
        for line in stdout:
            print(line.strip("\n"))
        ssh.close()
if __name__=="__main__":
    my_restart=Linux('10.45.4.220','ouos','ouos')
    my_restart.run_command('cd /usr/local/nginx/sbin;./nginx -s stop')
    time.sleep(10)
    my_restart.run_command('cd /usr/local/nginx/sbin;./nginx')

9.修改自动化脚本安装包

1）项目配置文件sit.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"sit"',
  BASE_API:'"http:// 10.45.4.220:8092"'
 // BASE_API: '"http://10.243.140.208:8092"',
}

2）总环境启动脚本frontend_devops.bat

echo "pull code from git"
call C:\devops\frontend_devops\pull_code.bat
echo "modiify config"
call C:\devops\frontend_devops\modiify_config.bat
echo "start compile..."
call C:\devops\frontend_devops\compile.bat
echo "change dist to ouos"
call C:\devops\frontend_devops\change_ouos.bat
echo "delete_source_file"
call C:\devops\frontend_devops\delete_source_file.bat
echo "transfor file to linux"
call C:\devops\frontend_devops\transfor_file.bat
echo "restart nginx"
call C:\devops\frontend_devops\restart_nginx.bat

3）git拉取代码脚本pull_code.bat

cd C:\devops\code\OrientSecuritiesWeb
git checkout .
git pull

注意：此步骤是git记住密码后的操作，如果没配置记住密码脚本启动时会弹出输入密码，阻碍脚本执行
如果git未记住密码请参考：https://blog.csdn.net/jzc12345611/article/details/101543956

4)修改项目配置脚本modiify_config.bat

copy /y C:\devops\frontend_devops\sit.env.js C:\devops\code\OrientSecuritiesWeb\config\sit.env.js

5）项目打包脚本compile.bat

cd C:\devops\code\OrientSecuritiesWeb
npm run build
TIMEOUT /T 10

6）删除服务器中静态资源

python C:\devops\restart_nginx\venv\delete_source_file.py

7）上传打包文件到服务器脚本transfor_file.bat

cd C:\Program Files (x86)\PuTTY  pscp -pw "ouos" -r  C:/devops/code/OrientSecuritiesWeb/
ouos/ [email protected]:/usr/local/nginx/html/ouos

8）远程控制nginx启动restart_nginx.bat

python C:\devops\restart_nginx\venv\operate_linux.py

说明：以上步骤是自动脚本单节点部署如果是集群需要另外重写一份脚本，也可以继续重构脚本代码，如果用集群需要用第9步脚本代码，已经写了一份复制品，可以按照该方法修改

9）集群启动脚本

echo "start frontend_devops"
call C:\devops\frontend_devops\frontend_devops.bat
echo "start frontend_devops2"
call C:\devops\frontend_devops2\frontend_devops\frontend_devops.bat
pause

说明：以上脚本代码对应放置的路径需要自行对照。

10.启动脚本自动化部署

只需要双击frontend_devops.bat即可启动单个nginx服务器
如果集群环境请使用start_all.bat
启动脚本如果遇到git拉取代码时需要代码认证，参考：https://blog.csdn.net/jzc12345611/article/details/101543956