jenkins+阿里code配置vue项目自动部署

jenkins+阿里code配置vue项目自动部署 1、jenkins是什么？

Jenkins是一个开源的、提供友好 *** 作界面的持续集成(CI)工具，起源于Hudson（Hudson是商用的），主要用于持续、自动的构建/测试软件项目、监控外部任务的运行（这个比较抽象，暂且写上，不做解释）。Jenkins用Java语言编写，可在Tomcat等流行的servlet容器中运行，也可独立运行。通常与版本管理工具(SCM)、构建工具结合使用。常用的版本控制工具有SVN、GIT，构建工具有Maven、Ant、Gradle。

欢迎大家访问我的个人博客：博客地址

2、java jdk安装

首先我们需要检查下linux服务器自带的java版本，输入：

java -version

如果java版本小于1.8的话建议重新安装大于1.8的jdk

这里已为大家备好java 1.8jdk文件：

链接: https://pan.baidu.com/s/1QSc6YjgO3mnaH6hoB7vkvg?pwd=rsxj 

提取码: rsxj

下载好jdk压缩包后在/usr/local下新建java文件夹并上传

mkdir /usr/local/java

进入java目录

cd /usr/local/java

上传java文件,如果没有rz命令，先使用yum install lrzsz进行安装

rz -y 

解压jdk文件

tar -zxvf jdk-8u144-linux-x64.tar

解压好后进行环境变量配置

vim /etc/profile

加入java环境变量

export PATH=$PATH:/home/node/node-v16.9.0-linux-x64/bin
export JAVA_HOME=/usr/local/java/jdk1.8.0_144
export CLASSPATH=.:${JAVA_HOME}/jre/lib/rt.jar:${JAVA_HOME}/lib/dt.jar:${JAVA_HOME}/lib/tools.jar
export PATH=$PATH:${JAVA_HOME}/bin

让配置立即生效

source /etc/profile

配置好后我们再看下java版本，如果出现这个就OK了

[root@iZ2zedvvu3fuovquj11cdgZ /]# java -version
java version "1.8.0_144"
Java(TM) SE Runtime Environment (build 1.8.0_144-b01)
Java HotSpot(TM) 64-Bit Server VM (build 25.144-b01, mixed mode)

查看java安装路劲，用来配置软连接

which java

出现我们刚才安装的路劲

/usr/local/java/jdk1.8.0_144

配置软连接

ln -s /usr/local/java/jdk1.8.0_144/bin/java /usr/bin/java

再次查看java路劲，会发现从方才的usr/local到usr/bin了

which java

显示

/usr/bin/java

至此java jdk安装成功，接下来我们安装jenkins

3、jenkin安装

这里jenkins的安装我推荐使用rpm的方式，jenkins的rpm包已备好：

链接: https://pan.baidu.com/s/1lkn-lk4pkuuxi1Maeon-ZQ?pwd=yewq 

提取码: yewq

下载好我们安装在上传至home文件夹下

cd /home

选择jenkins的rpm包进行上传

rz -y

上传成功后进行安装

rpm -ivh jenkins-2.263.4-1.1.noarch.rpm

安装成功后我们需要修改下jenkins的默认配置，这里我建议暂时修改两处即可：

修改jenkins配置文件，进入后按‘o’键进入编辑模式，找到JENKINS_PORT和JENKINS_USER配置

vim /etc/sysconfig/jenkins

修改默认端口（根据自己需要修改，默认是8080，一般情况下8080会被使用的）

JENKINS_PORT="8090"

修改jenkins用户为root，避免后续 *** 作出现权限不足的情况

JENKINS_USER="root"

修改成功后，按Esc键输入:wq进行保存退出。启动jenkins服务（stop和restart是停止和重启）

service jenkins start

停止jenkins

service jenkins stop

重启jenkins

service jenkins restart

至此jenkins安装成功，在浏览器输入：你服务器的域名+端口(8090)进行访问，出现以下页面

输入cat /var/lib/jenkins/secrets/initialAdminPassword查看初始密码并填写即可，就是上图红色提示的那个路劲

cat /var/lib/jenkins/secrets/initialAdminPassword

然后进入下一步，这里选择推荐插件即可，等待安装成功

正在安装......

安装成功后点击确定进入下一步设置第一个管理员的账号，就是你以后登录的账号，根据自己的实际情况输入即可

输入成功后点击确定-保存并完成，会等待一下然后jenkins的初始化配置成功了，接下来我们配置配合阿里code来构建项目

4、项目构建配置

首先我们先安装下nodejs,如果项目中需要打包或者安装依赖会使用到，点击系统管理-插件管理-可选插件输入nodeJs找到后安装

这里因为我已经安装了node所以不在可选插件中，而是在已安装中，如果你们没安装的话就选择可选插件，输入nodeJs找到后进行安装

安装成功后返回主面板，点击新建一个任务

选择构建一个自由风格的项目，点击确定

第一步输入项目描述信息，选择丢弃旧的构建，避免每次构建都构建旧的代码

源码管理选择Git，如果这里没有git选项就去插件管理里安装git插件，输入你的阿里code的项目仓库地址，使用https的地址，然后点击添加，就是添加阿里code的账号密码，用来拉去代码

输入你的阿里账号和密码，点击添加 然后选择你刚才添加的账号和密码，刚才仓库地址的错误提示就没有了

然后增加构建步骤选择执行shell

输入测试信息（echo就是输出的意思）

然后先点击应用，在点击保存

点击立即构建测试

之后会出现构建任务，点击#1查看控制台输出

出现了我们刚才输出的hello world，并且Finished也为SUCCESS，说明我们的配置是正确的，接下来我们要做的就是将jenkins拉下来的代码进行 *** 作并移动到我们的项目目录里面

接下来我们返回到工程，再点击配置，继续配置构建任务，定位到构建环境选择Provide Node & npm bin/ folder to PATH,这个选项我们在安装nodeJs插件后就会出现，如果没有这个选项，就去插件管理里重新安装，输入一个名字，建议输入node，其他的默认就行

然后我们去这行shell的地方修改我们的命令，把jenkins工作空间的项目进行打包移动到我们的项目目录里

解释下执行这些命令都是干什么的，因为这是我的项目目录结构，了解这些命令是干什么的以后你就可以根据自己的项目进行配置了

cd /var/lib/jenkins/workspace/test
node -v
npm -v
npm install
rm -rf ./dist/*
npm run build
cd dist
zip -r webhtml.zip *
rm -f /home/webhtml.zip
mv /var/lib/jenkins/workspace/test/dist/webhtml.zip /home
unzip -o /home/webhtml.zip -d /home/webhtml

第一行命令的作用是进入的jenkins的工作空间内，（/var/lib/jenkins/workspace/这个路径就是我们安装jenkins并创建任务进行构建后生成的工作空间目录，我们从git上拉下来的项目都在这个目录下，我们可以去看下）

cd /var/lib/jenkins/workspace/
ll

如图所示，test就是我刚才执行构建后的目录，这个里面的文件跟我们git上得目录一样，就是我们的项目文件

第二行和第三行命令是查看服务器node和npm的版本号的，这个大家都知道

node -v
npm -v

第四行命令是用来安装项目依赖的，因为我这个是vue项目，所以需要先安装项目的依赖，第一步我们进入到了jenkins的工作空间目录，并且进入到了我们的项目目录，执行npm install就可以直接安装项目依赖文件

npm install

第五行命令的作用是删除项目目录的dist文件夹下的所有文件，众所周知，我们vue项目打包后生成的目录就是dist文件夹，可以根据自己的需要修改，比如react打包就是build，那我们就把dist改为build就行了（当然我们不删除也行，因为vue项目每次打包都会自动删除，根据自己的需要类配置，但是建议还是加上这行命令）

rm -rf ./dist/*

第六行命令是项目打包的命令，vue脚手架创建的项目打包都是这个命令，react也一样，如果不是的话，改为实际项目打包命令就行了

npm run build

第七行命令是打包完成后进入到打包的dist目录里，如果不是dist就根据实际情况修改

cd dist

第八行命令是压缩所有dist下文件为webhtml.zip压缩包，这个压缩包的名字建议跟你服务器项目目录的名字一致，例如我的服务器是nginx监测的项目目录，前端文件我监测的就是/home/webhtml文件夹，这样方便我们后续解压 *** 作

zip -r webhtml.zip *

第九行命令是删除之前的压缩包，当然不删除直接覆盖也行，我的前端文件就在/home/webhtml下（你们根据自己的需要修改就行）

rm -f /home/webhtml.zip

第十行的命令是移动我刚才打包为webhtml.zip的压缩文件到home目录下（保持跟你的前端项目目录同级就行）

mv /var/lib/jenkins/workspace/test/dist/webhtml.zip /home

第十一行命令是解压刚才移动到home目录的webhtml.zip文件到项目目录下（-o是强制覆盖）

unzip -o /home/webhtml.zip -d /home/webhtml

然后点击应用，再点击保存，我们来点击立即构建进行测试，到控制台输出查看

我们发现npm install正在执行，之后执行npm run build等我们设置的shell命令

至此我们手动jenkin配合git构建项目就OK了，以后上传服务器就没那么麻烦了，接下来我们看下如果监测git仓库变化来自动部署项目，实现有提交就更新。 5、jenkins配合阿里code实现git自动部署 首先我们到系统管理-插件管理区安装Generic Webhook Trigger这个插件，安装成功后到任务配置里定位到构建触发器选择Generic Webhook Trigger

接下来在token这里设置一个token，这里是我随便输入的，你们根据自己的情况填写，记住这个token,接下来要用，设置好后点击应用，再点击保存

然后进入到你们阿里code项目（阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台）目录下，点击设置-WebHooks，输入这个地址，替换成你得jenkins的url地址，记得带上端口，蓝色圈起来的就是刚才我们设置的token，点击增加WEBHOOKS就行，这样以后只要我们git代码有提交，jenkins就会自动执行部署任务。

至此，大功告成