在平常开发中,每每可能同时多个项目并行进行开发,功能完成开发,进行代码打包、发布的时候,可能会出现一些问题。如一个基于vue框架的前端项目,部署的环境有测试环境、线上环境,手动打包发布。因为操做失误可能致使发布到测试环境的代码发布到正式环境。因此,一套自动化打包、部署方案对于前端工程师来讲,是颇有必要的。不只可以解决发布操做问题,还能更专一于业务需求的开发。通常这样的事儿是由公司运维去进行的,但对于一些中小型公司来讲,想实现这样的一套方案仍是得程序员本身动手。就当着本身能力的一种提高,也是不错的。
Jenkins是开源CI&CD软件领导者, 提供超过1000个插件来支持构建、部署、自动化, 知足任何项目的须要。同时是基于Java开发的一种持续集成工具,用于监控持续重复的工做,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。主要特色以下:html
啊,多么牛逼一款工具,是否是有种跃跃欲试的感受,接下来开始真正的实现部署的环节。前端
我我的使用的服务器是unbuntu 14.04的,因此基于此,来进行jenkins的安装、java的安装等等。jenkins是基于java的程序,因此咱们首先要作的就是进行java的安装。本案例中安装的是java-1.8。由jenkins版本所决定。vue
加入源路径:java
sudo add-apt-repository ppa:openjdk-r/ppa
更新源信息:node
sudo apt-get update
安装java-1.8:react
sudo apt-get install openjdk-8-jdk
4.切换Java版本(若以前已安装其余版本):nginx
sudo update-alternatives --config java sudo update-alternatives --config javac
最后输入java或javac,如出现如下内容,则安装成功。git
既然jenkins所需的环境已安装好,那么如今就开始进行jenkins的安装了.程序员
wget -q -O - http://pkg.jenkins-ci.org/debian/jenkins-ci.org.key | sudo apt-key add - sudo sh -c 'echo deb http://pkg.jenkins-ci.org/debian binary/ > /etc/apt/sources.list.d/jenkins.list' sudo apt-get update -y sudo apt-get install jenkins -y
注意:最后两步速度很是慢,主要是下载。github
安装完成后,有两个目录是咱们须要注意的。安装目录:/var/lib/jenkins,日志目录:/var/log/jenkins/jenkins.log.
能够经过如下命令来启动、中止jenkins:
sudo /etc/init.d/jenkins start sudo /etc/init.d/jenkins stop
接下来就能够在浏览器中输入:http://外网ip/8080如http://192.168.1.100:8080/就能够访问了。首次出现的网页内容以下:
jenkins默认端口号是8080。若想要修改默认端口号也是能够的,因为我本身的服务器上跑有其余项目,占用了8080端口,因此我将jenkins的端口改成8787。那简单说下怎样去修改jenkins的端口。
分三步骤走:
而后从新启动jenkins, 检查一下:
ps -def | grep java /usr/bin/java -Djava.awt.headless=true -jar /usr/share/jenkins/jenkins.war --webroot=/var/cache/jenkins/war --httpPort=8787
可查看到已成功修改了端口号,而后再次经过ip/端口号的方式在浏览器中进行访问。
以前说过,浏览器输入你的服务器 ip 地址加8787 端口就能够访问了。
输入 cat /var/lib/jenkins/secrets/initialAdminPassword 查看初始密码,并复制到当前输入框中,而后点击继续
这里咱们选择推荐通用插件安装便可,选择后等待完成插件安装以及初始化帐户。
![正在安装推荐的插件[7]
这里安装的时间有时候会稍微有点久,耐心等待安装完成就好,最后建立一个帐号。
,最后登陆进去后就能够看到左侧边栏一些操做菜单了。
由于咱们的项目是要用到node打包的,因此先在jenkins中安装nodeJs插件,安装后进入全局工具配置,配置一个咱们要用到的node版本。
安装完成后,点击应用并保存。
该插件能够帮助咱们实现服务器部署功能。选择系统管理->插件管理,在已安装插件中找Publish Over SSH,若未找到,则在可选插件列表中找到并进行安装
该插件能够帮助咱们进行动态关联远程仓库,便于在进行某些git操做,如提交等自动构建项目,安装步骤如上。
该插件可让咱们对于邮箱进行配置,例如构建项目后,通知相关人员,构建是否成功等,安装步骤如上。
从左侧菜单栏选择新建任务。填写任务名称,选择构建一个自由风格的软件,并点击肯定。
在General面板出勾选GitHub 项目,并填写Github URL。
在源码管理面板,进行以下配置:
在构建环境面板选择"Provide Node & npm bin/ folder to PATH",并选择已安装了的nodjs版本。
最后在"构建"面板中,选择shell执行。
并编写shell脚本。
#!/bin/bash node -v && npm install -g cnpm --registry https://registry.npm.taobao.org && cnpm install && npm run build
最后点击应用、保存。
点击当即构建:
由于这个项目是一个react项目,因此打包完后的目录的build,至此,成功构建github项目。那么接下来就要去作构建代码并发布到远程服务器的操做了。
首先须要对Publish over SSH进行全局配置,目的是使得咱们经过ssh可以访问远程服务器。
系统管理->系统设置,找到Publish over SSH。
这里须要注意服务器端安装了ssh服务,若是忘记了公钥与私有生成过程当中是否输入了密码,则能够从新经过以下命令去生成:
ssh-keygen -t rsa
Passphrase:密码(key的密码,没设置就是空) Path to key:key文件(私钥)的路径 Key:将私钥复制到这个框中(可经过cat id_rsa查看,复制。path to key和key写一个便可,若是在ssh server配置的时候勾选了Use password authentication, or use a different key,则两个均可以不填)
SSH Servers的配置:
SSH Server Name:标识的名字(随便你取什么) Hostname:须要链接ssh的主机名或ip地址(建议ip) Username:用户名 Remote Directory:远程目录(我这里选择了根目录)
高级配置:
Use password authentication, or use a different key:勾选这个可使用密码登陆,不想配ssh的能够用这个先试试
Passphrase / Password:密码登陆模式的密码
Port:端口(默认22)
Timeout (ms):超时时间(毫秒)默认300000
因为我在尝试的过程当中,最初出现了jenkins.plugins.publish_over.BapPublisherException: Failed to connect session for config [131]. Message [Auth fail],这样的错误,经过查找资料,https://blog.csdn.net/u010947...解决此问题。最终的配置以下:
最后点击测试配置,成功。
并点击应用,保存
其次须要对邮箱进行配置,接着往下看。
在咱们对项目进行构建成功或失败后,须要及时知道这一结果,因此进行邮箱的配置是必不可少的。
系统管理→系统设置,进行邮件配置:
PS:这里的发件人邮箱地址切记要和系统管理员邮件地址保持一致(固然,也能够设置专门的发件人邮箱,不过不影响使用,根据具体状况设置便可)
模板内容以下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title> </head> <body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4" offset="0"> <table width="95%" cellpadding="0" cellspacing="0" style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif"> <tr> 本邮件由系统自动发出,无需回复!<br/> 各位同事,你们好,如下为${PROJECT_NAME }项目构建信息</br> <td><font color="#CC0000">构建结果 - ${BUILD_STATUS}</font></td> </tr> <tr> <td><br /> <b><font color="#0B610B">构建信息</font></b> <hr size="2" width="100%" align="center" /></td> </tr> <tr> <td> <ul> <li>项目名称 : ${PROJECT_NAME}</li> <li>构建编号 : 第${BUILD_NUMBER}次构建</li> <li>触发缘由: ${CAUSE}</li> <li>构建状态: ${BUILD_STATUS}</li> <li>构建日志: <a href="${BUILD_URL}console">${BUILD_URL}console</a></li> <li>构建 Url : <a href="${BUILD_URL}">${BUILD_URL}</a></li> <li>工做目录 : <a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li> <li>项目 Url : <a href="${PROJECT_URL}">${PROJECT_URL}</a></li> </ul> <h4><font color="#0B610B">失败用例</font></h4> <hr size="2" width="100%" /> $FAILED_TESTS<br/> <h4><font color="#0B610B">最近提交(#$SVN_REVISION)</font></h4> <hr size="2" width="100%" /> <ul> ${CHANGES_SINCE_LAST_SUCCESS, reverse=true, format="%c", changesFormat="<li>%d [%a] %m</li>"} </ul> 详细提交: <a href="${PROJECT_URL}changes">${PROJECT_URL}changes</a><br/> </td> </tr> </table> </body> </html>
配置内容以下,和Email Extension Plugin插件一样的配置,能够经过勾选经过发送测试邮件测试配置按钮来测试配置是否成功发送邮件,以下图:
完成上面的系统设置后,点击保存便可。
这里对于项目构建、发布到远程服务器的全局配置已经完成,接下来以一个vuejs的简单项目为列来进行后续的操做。
选择一个任务,我这里是testVue,而后选择配置
上面三步在以前都已经说了,这里再也不赘述。接下来针对构建的shell脚本进行配置:
#!/bin/bash echo $PATH node -v npm install -g cnpm --registry https://registry.npm.taobao.org cnpm install npm run build cd /var/lib/jenkins/workspace/testVue/dist rm -rf dist.tar.gz tar -zcvf dist.tar.gz * mv dist.tar.gz /home/jenkinsVue/test
而后对构建后的操做,主要是项目构建成功或失败后邮箱的配置以及经过ssh服务将打包后的文件自动上传到服务器指定的文件目录中。
项目构建成功或失败后邮箱的配置:
经过ssh服务将打包后的文件自动上传到服务器指定的文件目录中配置:
Exec command:
#!/bin/bash cd /home/jenkinsVue/test tar -zxvf dist.tar.gz rm -rf dist.tar.gz
接下来实现开发本地push代码到github上后,触发Webhook,jenkins自动执行构建
而后在github配置Webhook 选择github项目中的Settings->Webhooks>add webhook 配置方式按上图红框中的格式,选择在push代码时触发webhook,成功后会在下方出现一个绿色的小勾勾。
其中Payload URL部分我遮住的部分就是服务器的ip地址或域名+jenkins的端口号。
配置完之后,点击应用、最后点击保存。
构建前的项目打包后显示的状况:
如今把项目页面中“黄澈”去掉。
进行代码的commit、push操做后,项目就进行了自动构建:
再来看一下页面的变化:
以及邮件的通知:
邮件也成功发送通知。
最后再来看下nginx的简单配置:
自动化打包后的dist文件夹的内容在/home/jenkinsVue/test文件夹下:
以上就是全部对于基于jenkins+nginx+github/gitlab进行项目自动化构建部署的操做了。