一、前言

1、服务器中已安装好nginx，如没有安装，可参考此博客：【Shell脚本】Linux安装Nginx以及开机自启

2、如果已有试图，则直接新建任务；如没有视图，则新建一个视图即可。一个项目一个视图就可以

二、新建前端流水线

1、点击新建任务

2、填写流水线名称（这里我选择的是自由风格的软件项目），任务名称一般格式为：项目名称-前后端

3、创建成功后的结果

三、配置前端流水线

1、进入刚创建好的任务页面中，点击配置

2、General配置

描述：XXX前端-前端XXX服务测试环境-项目构建

创建人：创建者姓名

时间：创建时间

保持构建天数：2

保持最大构建个数：3

3、设置项目运行的节点

这里的节点要看Jenkins集群的具体配置，在安装Jenkins时配置的节点。现在使用的Jenkins配置为Front_Node.（如果是新搭建的Jenkins，去查看安装时配置的从节点名称）

4、源码管理

4.1、如果没有配置过git账号的话，需要进行一个git账号的配置

添加完成之后，选择你新添加的凭据即可

5、构建触发器（将触发器全部置为空）

6、配置shell脚本

6.1、shell脚本根据自己的打包需求进行配置（这里配置对应前端项目打包），下面给出参考项

#!/bin/sh
echo $PATH
node -v
npm -v
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build-dev
cd ns-front
rm -rf ns-front.tar.gz
tar -zcvf ns-front.tar.gz *
cd ../

6.2、查看运行项目命令

在前端项目中的package.json中，可以看到我们在启动前端项目时，使用的命令