jenkins+npm、maven打包+文件传输远程部署流程

  • 步骤一
  • jenkins的安装
  • jenkins服务启动
  • 访问jenkins页面
  • 步骤二
  • npm的安装
  • 前端工程编译
  • 步骤三
  • maven的安装
  • maven配置注意项
  • maven的使用
  • 步骤四
  • 结合jenkins进行自动部署
  • 1.jenkins配置
  • 2.以创建一个自由风格的软件项目为工程
  • 3.源码管理
  • 4.npm的构建
  • 5.maven的构建
  • 6.远程文件传输及shell执行
  • 7.参数化
  • 新增项
  • 20210428 远程节点使用
  • 节点管理->新建节点
  • 设置为固定节点
  • 远程节点工具配置
  • 选择节点
  • 相关问题


linux操作系统
jdk:1.8.0_262
可根据所需步骤操作即可(如多种方式，*号为个人首选方式)：

步骤一

jenkins的安装

安装jenkins，通过远程下载到yum源，再通过yum源安装到本地

sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
sudo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key
sudo yum install jenkins

通过rpm文件安装*
这边以：jenkins-2.204.2-1.1.noarch.rpm 为例，到对应目录下执行下述命令即可

.rpm文件安装
rpm -ivh jenkins-2.204.2-1.1.noarch.rpm

这边.rpm包可以在以下网页查找所需版本下载(下载会比较慢，建议启用迅雷下载)
http://mirrors.jenkins-ci.org/redhat/

安装后这边提一下jenkins相关的文件路径，后续进行配置修改可参考

/usr/lib/jenkins/jenkins.war  #war包路径
/etc/sysconfig/jenkins  #jenkins的配置文件
/var/lib/jenkins/   #默认的JENKINS_HOME目录
/var/log/jenkins/jenkins.log   #Jenkins日志文件

jenkins服务启动

service jenkins start  #启动jenkins服务
service jenkins stop  #关闭jenkins服务

启动过程可能会遇到的问题

jenkins vue项目打包 jenkins npm打包_npm


如上图所示启动失败，可通过描述的命令进行查看错误详情

systemctl status jenkins.service

jenkins vue项目打包 jenkins npm打包_npm_02


这边提供三种解决方式，个人理解是由于jdk授权问题导致：

1.jdk部署的位置调整jdk到公共路径(即root用户路径下)

2.在/etc/init.d/jenkins 下新增一个本机的java地址路径，如下图所示位置添加即可

jenkins vue项目打包 jenkins npm打包_jenkins_03


3.修改jenkins配置的用户为root用户*

/etc/sysconfig/jenkins

jenkins vue项目打包 jenkins npm打包_jenkins_04

jenkins的端口修改(变更后重启jenkins服务即可)

/etc/sysconfig/jenkins

jenkins vue项目打包 jenkins npm打包_git_05

访问jenkins页面

如果linux服务器上的端口未开放，可能通过ip:端口的方式无法访问到该页面，可以在linux的服务器上先通过curl命令进行查看该网页是否是通的

curl 192.168.xx.xx:8083

如下图所示是能够访问的状态，但无法通过Windows浏览器访问该页面的原因，可能是端口未开放

jenkins vue项目打包 jenkins npm打包_jenkins_06


开放指定端口命令：

/sbin/iptables -I INPUT -p tcp --dport 8083 -j ACCEPT  #开放端口

页面首次访问(安装多个插件重启的时候也会)会进行较长时间的加载，等待即可。。。

jenkins vue项目打包 jenkins npm打包_jenkins_07


首次登陆密码如下图路径所示

cat /var/lib/jenkins/secrets/initialAdminPassword

jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_08


初始安装插件，选择安装推荐的插件，后续可能使用可能会再添加额外插件，为保障基础功能能够使用，建议选择安装推荐的插件，安装过程比较长，也可能会出现多个插件安装失败的问题都是正常情况

jenkins vue项目打包 jenkins npm打包_maven_09


步骤一的jenkins安装、配置、以及相关问题的解决到这里基本完成

步骤二

步骤二主要结合项目进行前端工程vue打包，若无该需求可跳过步骤二内容

npm的安装

官方下载速度实在太慢
这边提供淘宝镜像下载，在路径下使用下述wget下载即把node-v4.4.7-linux-x64.tar.gz下载到当前路径下

wget https://npm.taobao.org/mirrors/node/latest-v4.x/node-v4.4.7-linux-x64.tar.gz
tar -zxvf ./node-v4.4.7-linux-x64.tar.gz
export PATH=$PATH:/xxx/node-v4.4.7-linux-x64/bin  #xxx 为你所放置的路径

上述最后一个命令是把npm放到环境变量内，供任意位置调用该命令，但只对当前shell终端生效，换句话说就是与当前session绑定，存在内存中，新开一个shell终端就无法使用，所以建议把该命令编辑到到 /etc/profile 文件内，更新该配置文件即可全局使用

vi /etc/profile  #进入该文件内编辑，或者直接通过echo 把内容插进去也可以
source /etc/profile #把内容编辑完之后退出，执行该命令更新配置文件即可

jenkins vue项目打包 jenkins npm打包_maven_10


大多数命令均可用该方式进行全局配置

前端工程编译

npm install
npm run build

通过git命令下拉的代码目录下进行上述命令操作即可，当然通过jenkins可以省掉手动git的操作，后面会补充基本git命令拉取代码操作

npm install 执行后文件夹会出现一个node_modules文件夹

jenkins vue项目打包 jenkins npm打包_npm_11


首次进行npm install会下载很多依赖，时间会比较久。。。此时可进行npm run build命令进行编译，编译完会出现一个dist文件夹，dist文件夹内的文件即需要拉到后端进行合并编译的文件(把dist内的文件拉到后端工程相应路径下即可)

jenkins vue项目打包 jenkins npm打包_npm_12

前端工作此处基本完成

相关问题：

1.在linux进行npm install时，与Windows区别在于它会更注意大小写区分如下所示，即由于mySanKey.vue写成mySankey.vue导致，而在windows对其进行编译时是无该问题的。

jenkins vue项目打包 jenkins npm打包_npm_13


2.还可能出现如下问题，根据描述运行命令即可

npm install --save alloyfinger raphal #运行完该命令再重新运行npm install 即可

jenkins vue项目打包 jenkins npm打包_jenkins_14


3.vue版本问题

  • vue@2.5.17
  • vue-template-compiler@2.6.16
    This may cause things to work incorrectly. Make sure to use the same version for both.
    If you are using vue-loader@>=10.0, simply update vue-template-compiler.
    If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify sho
    uld bump vue-template-compiler to the latest.

vue版本需要跟vue-template-compiler的版本一致：
运行下面命令：

npm install vue-template-compiler@2.5.17 --save

4.chromedriver可以使用下面镜像下载

jenkins vue项目打包 jenkins npm打包_git_15

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

步骤三

maven的安装

将.gz包下载并上传到服务器上解压

官方下载：https://maven.apache.org/download.cgi

jenkins vue项目打包 jenkins npm打包_maven_16

tar -zxvf ./apache-maven-3.6.3-bin.tar.gz #解压该.gz文件

jenkins vue项目打包 jenkins npm打包_jenkins_17

/xx/apache-maven-3.6.3/bin #bin 路径下的mvn全局使用需要把该路径编辑到/etc/profile文件内，具体操作可参考步骤二的npm安装的环境变量设置

maven配置注意项

maven配置文件路径：/xx/apache-maven-3.6.3/conf/settings.xml
项目在进行打包时，会依赖较多的配置文件，相关配置在settings.xml文件内进行配置，如依赖包所需的下载中心(虽然maven会提供一个默认的下载中心，但不同工程所需的下载中心会有出入，以自己工程的下载中心为主，来保证正常打包)，maven依赖包路径等等

maven的使用

在项目的pom.xml路径下执行如下命令即可，打包完的jar包及配置文件放在 /target路径下

mvn clean install -Dmaven.test.skip=true

步骤四

结合jenkins进行自动部署

1.jenkins配置

1.配置密钥，在系统管理>系统配置 把服务器上的密钥copy到如下方所示，路径为密钥所在路径

jenkins vue项目打包 jenkins npm打包_jenkins_18


2.配置需要远程传输的服务器(如果没有可以忽略)，后续进行远程部署时可以回过来看该项配置

SSH Server 选择高级可弹出输入远程服务器密码选框

Name：自拟该远程服务器名称

Hostname：服务器ip

Username：服务器账号

Remote Directory：传输到远程的指定路径，这边建议为根目录

jenkins vue项目打包 jenkins npm打包_git_19


3.系统管理>全局工具配置

maven的setting文件路径，可都填写一致

jenkins vue项目打包 jenkins npm打包_npm_20


git命令配置

jenkins vue项目打包 jenkins npm打包_jenkins_21

2.以创建一个自由风格的软件项目为工程

后续操作均以该工程为例

jenkins vue项目打包 jenkins npm打包_maven_22


建议展开高级选项来自定义你的工作空间，这边是将远程仓库代码git到本地的指定路径

jenkins vue项目打包 jenkins npm打包_jenkins_23

jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_24

3.源码管理

jenkins提供了便捷的代码git功能，可实现进行参数化的代码分支构建

URL可填写两种，一种是http，一种是ssh

http：需要下方添加你的账号密码凭据

jenkins vue项目打包 jenkins npm打包_jenkins_25


ssh：需要把本地的秘钥上传到git，进行代码拉取操作时不用再额外填写账号密码

jenkins vue项目打包 jenkins npm打包_npm_26


密钥生成：

ssh-keygen -t rsa #一路回车即可
/root/.ssh/id_rsa.pub #密钥存放路径，把该文件内容复制到git上即可

输入指定分支进行拉取

jenkins vue项目打包 jenkins npm打包_maven_27

git本地操作(供参考)

git
git branch 查看当前分支
git branch -r 查看该项目所有分支
git checkout -b 切换到指定分支
git pull origin xxx  更新xxx分支的代码
git push <远程主机名> <本地分支名>:<远程分支名> 将本地更新到远程分支
git push <远程主机名> <本地分支名> 如果远程分支与本地分支名相同可以省略:<远程分支名>

4.npm的构建

这边直接使用shell命令即可

cd 是跳转到上述的自定义工作空间下的代码拉取路径(具体构建路径还需要自己稍微调整)

jenkins vue项目打包 jenkins npm打包_git_28

5.maven的构建

在构建中选择调用顶层Maven目标
目标输入：clean install -Dmaven.test.skip=true

*这边会有个问题，maven的路径是你自定义的工作空间，但是如果你拉下来的代码本身还多了一层路径，会导致在maven的时候找不到路径，则需要在高级选项中输入具体pom.xml路径，如2图所示

jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_29


jenkins vue项目打包 jenkins npm打包_git_30

6.远程文件传输及shell执行

在执行构建后进行操作 Send build artifacts over SSH
Name：为需要远程传输的ip，下拉选择所需远程传输的服务器即可（在步骤四的1jenkins配置有描述到如何去配置）
Source files：为需要传输的文件内容，需要注意是自定义工作空间路径下的内容，可加编辑路径(如：工作空间路径为/mnt，Source files可以写/user，即实际路径为/mnt/user)
/** :传输路径包括文件夹
/*:传输路径文件
Remove prefix：删除路径，由于工作空间是指定路径，若不删除路径会把Source files整个包括路径一起传输过去，而删除路径能够让传输的内容只是删除后的路径内容
Remote directory：目标路径
Exec command：传输后执行的shell命令(是针对远程服务器执行的命令)

jenkins vue项目打包 jenkins npm打包_git_31

7.参数化

提供两个参数化样例：
1.对代码分支参数化
2.获取前一个工程的参数化内容，同时启动后续项目并使用该参数

1.git参数化

将git分支进行参数化，即可在构建时，选择指定分支进行构建

jenkins vue项目打包 jenkins npm打包_git_32


jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_33

2.在1基础上实现获取前一个工程的参数化内容
情景：前端工程编译完成>触发后端工程拉取代码>前端工程编译后的文件复制到后端工程的指定目录下>对后端工程进行打包及部署

前端工程的git参数化如1配置
工程构建后操作添加：Trigger parameterized build on other projects
如果没有该项可以在jenkins的插件管理里面添加该插件

Projects to build：填写需要触发的后续工程名称

Trigger when build is：默认即可

Predefined parameters：将参数化内容赋予（git_branch = ${mbranch}）,这里的git_branch即是后续工程使用的参数

jenkins vue项目打包 jenkins npm打包_npm_34


后端工程配置：

参数化构建过程>添加文本参数

jenkins vue项目打包 jenkins npm打包_npm_35


这时的git_branch即可用于源码管理的分支参数

jenkins vue项目打包 jenkins npm打包_jenkins_36

新增项

20210428 远程节点使用

在实际使用过程中，不断的在jenkins服务所在的服务上部署多个项目，会导致一定的磁盘压力

项目部署在什么服务器上就在该服务器上进行打包部署，同时也减少了传输文件的步骤

jenkins vue项目打包 jenkins npm打包_jenkins_37

节点管理->新建节点

jenkins vue项目打包 jenkins npm打包_npm_38

设置为固定节点

jenkins vue项目打包 jenkins npm打包_maven_39

jenkins vue项目打包 jenkins npm打包_jenkins_40

远程节点工具配置

jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_41


通过全局变量里面-新增Maven来新增指定的maven路径，在构建远程节点上的任务时顶层maven时选择该项即可

jenkins vue项目打包 jenkins npm打包_git_42

选择节点

(注意一点，输入完节点之后会多出现一个空格，去掉即可）

jenkins vue项目打包 jenkins npm打包_maven_43

相关问题

1.通过jenkins远程启动服务时会自动被kill掉的解决方式：
使用启动文件前加入如下：(根据自己服务器上jdk部署路径变更即可)

JAVA_HOME=/opt/java/jdk1.8.0_121
 CLASSPATH=.:/opt/java/jdk1.8.0_121/lib/dt.jar:/opt/java/jdk1.8.0_121/lib/tools.jar
 PATH=/opt/java/jdk1.8.0_121/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin
 JENKINS_NODE_COOKIE=dontKillMe
JAVA_HOME=/opt/java/jdk1.8.0_121
CLASSPATH=.:/opt/java/jdk1.8.0_121/lib/dt.jar:/opt/java/jdk1.8.0_121/lib/tools.jar
PATH=/opt/java/jdk1.8.0_121/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin
JENKINS_NODE_COOKIE=dontKillMe  sh ./startup.sh

如果上述无法解决，可在前面加一个 

export BUILD_ID=dontKillMe
 export BUILD_ID=dontKillMe
 JAVA_HOME=/opt/java/jdk1.8.0_121
 CLASSPATH=.:/opt/java/jdk1.8.0_121/lib/dt.jar:/opt/java/jdk1.8.0_121/lib/tools.jar
 PATH=/opt/java/jdk1.8.0_121/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin
 JENKINS_NODE_COOKIE=dontKillMe sh ./startup.sh

------------------------------------------------------------2021-04-28----------------------------------------------------------------

Build step ‘Execute shell’ marked build as failure

构建时异常，主要是在远程服务器上的且配置在环境变量中的命令无法通过远程来调用的问题

可尝试把环境变量的内容在传输命令时再体现一次，如下：

新增：

export PATH=$PATH:/mnt/node-v4.4.7-linux-x64/bin

jenkins vue项目打包 jenkins npm打包_git_44

2.两台服务器如存在连接问题，解决方案：
如首次配置两台服务器连接，建议先通过ssh连接远程服务器，会把相应的key加到~/.ssh/known_hosts中

-------------------------------------------------------2021-08-05新增------------------------------------------------------------------

1.以windows节点配置为例，新增该节点如下配置：

jenkins vue项目打包 jenkins npm打包_jenkins vue项目打包_45


slave主机访问该页面，点击lanch启动即可作为执行主机来进行分布式任务，若未展示该页面需把被禁用的端口启用即可

jenkins vue项目打包 jenkins npm打包_npm_46


下载完启动，连接上之后file->install as a service 会让该电脑一启动就自动连接

变成服务的话，web自动化启动的时候，是看不到窗口页面出现的，如果不弄成服务会有窗口出现2.jenkins上配置JUnit test result

jenkins vue项目打包 jenkins npm打包_jenkins_47