jenkins⾃动构建发布vue项⽬
⽂章⽬录
简介
Jenkins是⼀个开源的、提供友好操作界⾯的持续集成(CI)⼯具，起源于Hudson（Hudson是商⽤的），主要⽤于持续、⾃动的构建/测试软件项⽬、监控外部任务的运⾏（这个⽐较抽象，暂且写上，不做解释）。Jenkins⽤Java语⾔编写，可在Tomcat等流⾏的servlet容器中运⾏，也可独⽴运⾏。通常与版本管理⼯具(SCM)、构建⼯具结合使⽤。常⽤的版本控制⼯具有SVN、GIT，构建⼯具有Maven、Ant、Gradle。
jenkins安装
1.安装JDK
yum install -y java
2.安装jenkins
把Jenkins库添加到yum库，然后安装
wget -O /pos.po /po
rpm --import /key
yum install -y jenkins
如果yum安装jenkins出现签名认证失败，再启动命令后⾯加上- -nogpgcheck
yum install -y jenkins --nogpgcheck
3.配置jenkis的端⼝
vi /etc/sysconfig/jenkins
#此端⼝不冲突可以不修改
JENKINS_PORT="8080"
4.启动jenkins
# start 启动 stop停⽌,restart重启
service jenkins start/stop/restart
安装成功后Jenkins将作为⼀个守护进程随系统启动
系统会创建⼀个“jenkins”⽤户来允许这个服务，如果改变服务所有者，同时需要修改/var/log/jenkins, /var/lib/jenkins,
和/var/cache/jenkins的所有者
启动的时候将从/etc/sysconfig/jenkins获取配置参数
5.打开jenkins
初始密码在：/var/lib/jenkins/secrets/initialAdminPassword ⽂件⾥⾯
6.安装插件
登陆进去之后，然后就开始安装推荐插件了.
发布vue项⽬
1.安装插件
如果jenkins和vue应⽤部署在同⼀台电脑，后⾯2个插件不⽤安装
安装NodeJS插件
点击系统管理，然后点击插件管理，在可选插件⾥⾯搜索NodeJS插件，然后安装
安装连接SSH的插件
Publish Over SSH⽤于连接远程服务器
安装把应⽤发布到远程服务器的插件
Deploy to container插件⽤于把打包的应⽤发布到远程服务器
linux安装jdk rpm安装
2.配置git和NodeJS环境
打开系统管理⾥⾯的全局⼯具配置
安装配置git
如果 下载过就不需要再下载了。
#安装git
yum install git
#查看git的执⾏⽂件位置, 默认是在 /usr/bin/git
whereis git
配置git执⾏命令⽬录
安装配置NodeJS
⾃动下载会出现在构建任务的时候卡半天 (不推荐)
⾃动下载的NodeJS⽂件保存在/var/lib/jenkins/tools/ls.NodeJSInstallation/ 下⾯⼿动下载NodeJS压缩包上传到服务器指定位置
#把下载好的压缩包上传到服务器的这个⽬录下⾯
/var/lib/jenkins/tools/ls.NodeJSInstallation/
#压缩
cd /var/lib/jenkins/tools/ls.NodeJSInstallation/
tar zxvf node-v12.18.
3.配置git凭证信息
配置git账号密码信息
点击系统管理下⾯的 Manage Credentials
点击Jenkins
点击全局凭据
点击添加凭据
设置连接git的账号密码信息，然后再设置凭据的唯⼀ID
4.新建任务
新建任务，然后点构建⼀个⾃由风格的软件项⽬
配置git地址和凭证信息
点击源码管理，然后配置代码仓库和对应的凭据信息
指定分⽀
设置项⽬的⾃动发布的触发条件
⽬前使⽤的是轮询,
H/5 * * * * * 表⽰每5分钟去查看git代码有没有更新，有更新⾃动发布
配置构建环境
选中之前在全局配置添加的NodeJS名称
设置构建参数和执⾏的命令
下⾯2种情况，根据实际需求选择配置
发布项⽬到本机
设置构建命令
点击增加构建步骤，选择执⾏shell
把构建项⽬的命令放进去，然后点击保存就⾏
#切换⽬录(我的vue项⽬在git源码根路径的ocrweb⽬录下，你们的如果是在根路径下⾯,cd这个命令请忽略) #cd ocrweb
#加载依赖
npm install
#构建代码
npm run build
#复制构建后的⽂件到nginx⾥⾯项⽬对应的部署⽬录下
cp dist/* -rf /usr/local/nginx/jenkins/www/ocrweb
由于jenkins服务默认是有jenkins⽤户启动的，所以要给vue项⽬发布的⽬录授权
chmod 777 /usr/local/nginx/jenkins/www/ocrweb
⽴即构建项⽬
1.点击我的视图
2.点击刚刚新建的任务
3.点击⽴即构建
4.点击查看控制台⽇志
可以看到打印了我们之前配置命令
看到下⾯的Finished: SUCCESS代表着已经发布成功了。
最后看到⽂件已经发布到了我配置的nginx容器的⽬录下⾯了。
发布项⽬到远程服务器
需要先设置远程服务器的host，账号，密码
点击系统管理->点击系统配置，到Publish over SSH选项
需要配置Name,Hostname,Username,Remote Directory
账号认证可以使⽤密码,key⽂件,key内容
参数说明
字段描述
Passphrase服务器的密码
Path to key连接远程服务器密钥⽂件的路径Key密钥⽂件的内容
Name⾃定义服务器名
HostName服务器IP外⽹地址
UserName服务器⽤户名Remote Directory连接上ssh后的默认路径
设置构建命令
⽐上⾯写的单机部署的少了cp命令，多个打包命令
#加载依赖
npm install
#构建程序
npm run build
#切换了编译后的⽬录
cd dist
#移除之前的压缩包
rm -f
#把当前⽬录的所有⽂件打包成
tar -zcvf *
构建后操作
点击增加构建后操作，选中Send build artifacts over SSH
#Source files
dist/
#Remove prefix
dist
#Remote directory
usr/local/nginx/jenkins/www/ocrweb
#Exec command
cd /usr/local/nginx/jenkins/www/ocrweb
tar -zxvf
rm -f
参数说明
字段描述
Source files项⽬构建后在⼯作空间的相对⽬录(我这边构建时候打包的⽂件名是ocrweb，所以填写的 dist/) Remove prefix去前缀 (如果不去除的话，会在发布的⽬录后⾯新增dist⽬录)
Remote directoty 发布的⽬录 (系统配置的路径/这个⽬录, 由于我配置ssh根路径写了/，所以我这⾥写的路径是
usr/local/nginx/jenkins/www/ocrweb)
Exec command发布完执⾏的命令 (先cd切换到⽂件发布的⽬录，然后执⾏解压操作，然后删除压缩包)
配置完成后，保存，然后点击⽴即构建，查看控制台⽇志，看到SSH: Transferred 1 file(s)
Finished: SUCCESS就代表⽂件已经上传到远程服务了。
登录远程服务器验证⽂件是否存在。
到这⾥,⼤概把jenkins部署vue项⽬步骤写的差不多了，不早，睡觉了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。