阅读下面文档前默认已经会Jenkins基本操作。
1，Jenkins构建中心的全局工具处配置nodejs工具
2，新建节点加入Jenkins中，
3，创建前端自由风格job,（根据自身情况来，也可以在已有节点上部署）
4，复制构建产物到指定项目路径

1. 配置nodejs工具

登录Jenkins找到Global Tool Configuration选项

这里我选择的是Install automatically（自动安装），可以在version处自行选择版本
如果Jenkins无法访问外网，也可以手动在服务器安装nodejs,然后选择指定服务器的安装路径

2. 新建节点
每个新建节点都需要确保服务器有jdk环境一支持Jenkins的各种环境操作
jdk的目录根据具体节点服务器上的路径来填写
创建节点是填写的远程工作目录需要提前创建好，是Jenkins在节点上的操作目录。里面有各种配置文件，构建产物等。

3. 节点创建完，就可以开始创建job了
点击新建item处会跳转到新界面


输入自定义的job名称
选择 Freestyle project 自由风格
点击确定按钮跳转到具体的参数配置界面

选择保留的构建历史

选择运行改项目的节点

选择拉取代码的仓库，分支，以及用户密码

在构建环境处选择以下两项


这里的nodejs就是上面第一步安装的nodejs

4.配置打包编译代码，以及复制构建产物的命令

#!/bin/bash
node -v
npm -v #检查编译环境
#npm config set registry http://registry.npmjs.org/
#npm install npm@6.10.1 -g
npm -v
npm install
npm run build:test #编译项目

cd /var/lib/jenkins/workspace/agent-front/agent-New/dist/ #复制Jenkins构建产物到自己的项目路径
cp -r ./* /home/lzkj/webapp/agent/
这里/home/lzkj/webapp/agent/ 是nginx的项目路径
最后点击保存，构建即可。

5. 安装nginx,修改配置文件访问静态文件

##转发业主后台
server {
listen 9015;
server_name 10.14.2.220;
add_header Access-Control-Allow-Origin ‘*’;
add_header Access-Control-Allow-Headers X-Requested-With;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
location /{
root /home/lzkj/webapp/agent ;
index index.html index.htm;
try_files $uri KaTeX parse error: Expected 'EOF', got '}' at position 65: ….html; }̲ location /api… /$1 break;
proxy_pass http://10.14.2.220:8104/;
}}

修改完重启你的nginx就可以通过IP+端口来访问部署的前端静态资源了

6，如果想通过域名来访问

则需要有对外的公网IP，如果是云服务器的话，一般都是自带公网IP的，当然要记得开放对应的端口安全组，在你所购买域名的配置界面，选择对外域名，选择A类型解析，填入你服务器的IP就可以。一般是不支持非80端口的解析的，这时候就需要代理服务器或者CDN，或者修改nginx端口了

7，如果想使用CDN来加速静态资源的访问的话，可以在对应的CDN厂商处，做好域名的加速，把得到的域名别名记录值，在你域名商的配置界面把域名解析的类型改成cname,源地址配上CDN得到的别名即可。一般的CDN都是支持带端口的解析的。

至此，利用Jenkins部署前端vue项目就完成了，其他类型的前端都是一个道理，不同的打包命令而已。