文章标题: Jenkins+vue+ftp之基于windows server的自动化webpack部署全过程讲解
关键字 : Jenkins vue ftp
文章分类: 教程
创建时间: 2020年3月20日17:32:48
创作缘由：为Zoomla!逐浪CMS CLI开发提供便利和自动化部署工具
Jenkins 是什么?
初识Jenkins
关于川口耕介
jenkins配置svn、自动构建vue-cli项目坑1
坑2
jenkins插件之Publish Over FTP设置系统设置
项目配置构建步骤：Send Files over FTP
构建后操作:Send build artifacts over FTP
再讲解配置FTP上传
Jenkins使用FTP上传文件报错问题处理问题一：不支持中文目录
问题二：不支持FTP被动模式（PASV）
部署Jenkins
在windows上Jenkins安装及其配置Jenkins 是什么?
Jenkins是一款开源 CI&CD 软件，用于自动化各种任务，包括构建、测试和部署软件。
Jenkins 支持各种运行方式，可通过系统包、Docker 或者通过一个独立的 Java 程序。
同时他带来了一种全新的理念，叫：CI&CD
即自动化部署、持续集成。
这样的好处不止一点，可以实现webpack项目的副本部署，避免私包，不能多机迁移--如同我们所说，不能迁移的项目不能称为成功，也不够鲁棒。
初识Jenkins
1920px-Jenkins_logo_with_title.svg.png
Ansible-playbook-output-jenkins.png
Jenkins是一款由
Java编写的
开源的
持续集成工具。在与
Oracle发生争执后，项目从
Hudson项目
复刻。
Jenkins提供了软件开发的持续集成服务。它运行在Servlet容器中（例如Apache Tomcat）。它支持
软件配置管理（SCM）工具（包括
AccuRev SCM、
CVS、
Subversion、
Git、
Perforce、
Clearcase和
RTC），可以执行基于
Apache Ant和
Apache Maven的项目，以及任意的
Shell脚本和Windows
批处理命令。Jenkins的主要开发者是川口耕介。
[3]Jenkins是在
MIT许可证下发布的
自由软件。
[4]可以通过各种手段触发构建。例如提交给版本控制系统时被触发，也可以通过类似
Cron的机制调度，也可以在其他的构建已经完成时，还可以通过一个特定的
URL进行请求。
Jenkins的前身是
Hudson (软件)项目。Hudson 2004年夏天始创于
Sun Microsystems，2005年2月首次发布于java.net。
[5]2007年前后，Hudson被称为相对
CruiseControl和其他开源的构建服务器（Build Server）更好的选择。
[3][6]2008年5月的
JavaOne大会上，Hudson成为“Duke选择奖”开发人员解决方案分类的得主。
[7]在2010年11月，关于由谁主导来Hudson
[8]，该项目的主要贡献者和Oracle之间展开谈判。尽管在多个方面达成一致，争议集中在是否把Hudson注册为商标
[9]，后来Oracle声明对Hudson的名字拥有权利，并在2010年12月申请将其注册为商标。
[10]因此，2011年1月11日，社群号召投票将项目名称从“Hudson”变更为“Jenkins”。
[11] 2011年1月29日，社群投票以压倒多数批准通过该提案，创建Jenkins项目。
[12][13]2011年2月1日，Oracle表示他们打算继续Hudson的开发，并认为Jenkins是Hudson的
复刻，而非重命名。
[14]Jenkins和Hudson之后继续作为两个独立的项目，均声称对方是自己的复刻。截至2013年12月，在
GitHub上的Jenkins组织有567项目成员及约1100公共库（public repository）
[15]，而Hudson组织有32个项目成员和17个公共库
[16]。
在2011年，创建者川口耕介收到了
O'Reilly开源奖，奖励其在Hudson/Jenkins项目上的工作。2014年，川口耕介成为
CloudBees的首席技术官。
进一步知识：
https://zh.wikipedia.org/wiki/Jenkins_(%E8%BD%AF%E4%BB%B6)关于川口耕介
220px-Jenkins_Developer_Meetup_and_Birthday_Toast_by_Kohsuke_Kawaguchi_(cropped).jpg
川口浩辅（Kohsuke Kawaguchi）是一位
计算机程序员，最著名的是
Jenkins软件项目的创建者。
[1]在
Sun Microsystems工作期间，他是
Hudson项目的主要开发人员。
[2]他还因在
Jenkins项目上的工作而获得2011年
Google-O'Reilly开放源代码奖。
[3]作为日裔美藉人员，其官网：
https://kohsuke.org/，git主页：
https://github.com/kohsukejenkins配置svn、自动构建vue-cli项目
<meta charset="utf-8">
前提：jenkins已经安装好了
目的：jenkins配置跑用vue-cli搭建的前端项目
环境：
系统：windows7
Jenkins：2.121.2（各版本操作界面略不同!）
node：v8.11.3
npm：v5.6.3
步骤
1 新建任务
image
2 输入项目名称，选择构建自由风格
image
3 重点！配置，大家可以先提前看下这个
配置教程以下是我的项目配置
image
image
image
image
构建脚本是
npm install
npm run build
命令需要写到2个框里，写一起会只执行了第一句
image
image
现在进入这个页面，点击一下立即构建！
image
好了，如果你顺利的话，现在就应该能跑通，不顺利的话就呵呵，像我一样继续倒腾吧，哎，tmd
坑1
我一构建，结果npm构建了好久（10分钟）就提示下面这个，npm install一直执行不了！
npm ERR! code EINTEGRITY
npm ERR! sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU= integrity checksum failed when using sha1: wanted sha1-8/dSL073gjSNqBYbrZ7P1Rv4OnU= but got sha1-GphMzPjsiYHXNwWGmbfmaoE87R0=. (90281 bytes)
image
然后就各种百度，因为我直接进的此项目jenkins工作区E:\Jenkins\workspace\GYB1，直接cmd执行npm install，可以啊！！！node_modules目录下的文件依赖都下载好了，但是只要一用jenkins里的脚本npm install来跑就有问题，WTF？？？？搞事情啊！
然后有人说，
1 先清下npm缓存，执行npm cache clean --force，我试了好像是没有用，但是好像又有用，我还试着每次构建都执行npm cache clean --force，但不行！我用jenkins构建50次（一天），其中有3次成功，西八啊！
2 难道是网络原因？？？但是我直接用cmd来install可以的啊，到现在都搞不清。
3 有人说是npm版本问题（现在太高），改成4，我试了下 npm -g install npm@4，结果好像真tm可以了，构建了6分钟，终于可以了，啊！WTF!!!
我观察下，原来的npm5.6版本一用jenkins跑，就会把本该在node_modules里所有文件夹下载到了node_modules的子目录.staging里了，node_modules文件夹下就这一个.staging文件夹，应该是把.staging里面的都移到XXXnode_modules里呀，哎，不清楚为啥用jenkins就会这样，cmd不会啊
image
坑2
在构建的时候，别打开jenkins工作区里的此项目，不然构建失败
jenkins插件之Publish Over FTP设置
这个插件可以将文件发布到FTP上去。
设置方法：
系统管理——系统设置——Publish over FTP
使用远程部署前提是你安装了Publish over FTP或者Publish over SSH插件
回到项目配置中，构建后步骤——Publish over FTP——配置目录信息
系统设置
FTP Server Name：名称
Hostname：主机IP或者域名
Username：ftp登陆用户名
Password：ftp密码
Remote Directory：远程根目录（建议设置为：/）
clip_p_w_picpath002点击Test Configuration上面的高级
Port：端口
Timeout (ms)：超时时间（毫秒）
Use active data mode： （未选中）默认选项使用PASV（被动模式），选中使用PORT （主动模式）
Don't make nested dirs：不创建下级目录
clip_p_w_picpath004项目配置
在项目配置中，可以从下面两个地方找到此插件的配置。
构建步骤：Send Files over FTP
构建后操作:Send build artifacts over FTP
FTP Server Name：选个一个你在系统设置里配置的配置的名字
Transfer Set Source files：需要上传的文件（注意：相对于工作区的路径,可以是单个文件也可以是目录）
Remove prefix：移除目录（只能指定Transfer Set Source files中的目录）
Remote directory：远程目录
p_w_picpath点击Remote directory后面的高级
Exclude files：排除的文件（在你传输目录的时候很有用，使用通配符，例如：/.log,/.tmp,.
Git/）
Pattern separator：分隔符（配置Exclude files和Source files的分隔符。如果你这儿更改了，上面的内容也需要更改）
No default excludes：禁止默认的排除规则
Make empty dirs：此选项会更改插件的默认行为。默认行为是匹配该文件是否存在，如果存在则创建目录存放。选中此选项会直接创建一个目录存放文件，即使是空目录。
Flatten files：只在ftp上建立文件，不创建目录（除了远程目录）
Remote directory is a date format:远程目录建立带日期的文件夹（需要在Remote directory中配置日期格式），具体格式参考下表：
Remote directoryDirectories created
qa-approved/'yyyyMMddHHmmssqa-approved/20101107154555
'builds/'yyyy/MM/dd/'build-${BUILD_NUMBER}'builds/2010/11/07/build-456 (if the build was number 456)
yyyy_MM/'build'-EEE-d-HHmmss2010_11/build-Sun-7-154555
yyyy-MM-dd_HH-mm-ss2010-11-07_15-45-55
Clean remote:上传前会删除远程目录中的所有的文件
ASCII mode：文件传输的方式，一般默认不选。
p_w_picpath再讲解配置FTP上传
一般部署完成后都会对文件做下备份，那么我们就看下如何使用Publish over FTP这个插件吧。需要注意的是，这个插件好像并不会默认安装，需要的同学们自行安装一下。
同样的，使用前需要先去系统管理----->系统配置中先配置下FTP服务器。我的配置如下：
需要填写的配置还是比较少的，填写完成后点击下Test Configuration按钮测试下自己的配置是否正确。
注意：
这里的Remote Directory是指你能够工作的路径。举个例子，比如我指定路径为/dir1的话，那么我就只能上传到此目录下的子目录。如果某天我想上传到/dir2，不好意思，这个路径你访问不到。
限定目录后可以起到一点隔离的作用，算是一个安全措施吧
配置无误后转到项目配置页，由于是演示用，我只是检出了几个Word文档并对其进行了打包，下面是构建语句。
cd ./Doc
//移除掉之前创建的压缩文件并重新创建新压缩文件
rm -rf ./.zip
zip Test_ftp.zip ./ -x "/." -x ".*" -r
1
2
3
4
构建无误后就需要配置我们需要上传的文件了。
在添加构建后操作选择ftp插件，
选择完后先选择我们之前配置的FTP服务器，然后配置下需要上传的文件以及文件路径就ok了，我这里就配下之前压缩的zip文件好了。
注意：这里Source files是支持通配符的。
解释下中间的这个Remove prefix配置，这个配置用于裁剪路径用的。比如我这里配置的是Doc,那么文件上传后所在路径就是/test/upload/Test_ftp.zip。还是很好理解的。
跑下任务看，一次成功。
FTP: Logging in, command printing disabledFTP: Logged in, command printing enabledCWD /250 Directory successfully changed.TYPE I200 Switching to Binary mode.CWD /250 Directory successfully changed.CWD test/upload550 Failed to change directory.MKD test/upload257 "/test/upload" createdCWD test/upload250 Directory successfully changed.PORT 192,168,1,247,156,52200 PORT command successful. Consider using PASV.STOR Test_ftp.zip150 Ok to send data.226 Transfer complete.FTP: Disconnecting configuration [备份服务器] ...FTP: Transferred 1 file(s)Finished: SUCCESS
如果需要上传多个路径到多个服务器的话，同样操作就可以了。
Jenkins使用FTP上传文件报错问题处理
Jenkins带有Publish over FTP插件，安装后并使用它就能实现FTP上传，可以用于构建后的发包操作。我们在系统管理中配置好FTP Servers后，并测试连接通过，按理在Job配置中用Publish over FTP按官网的配置说明进行配置（
Publish Over FTP Plugin），构建后就能正常上传文件。可是我们可能会遇到以后问题：
问题一：不支持中文目录
报错如下：
image
关看报错提示一般人打死都想不到是中文目录引起的，如果知道其实解决起来很容易，做如下配置：
【系统管理】->【系统设置】->【Publish over FTP】->高级:【Control encoding】->输入【UTF-8】或者【GB2312】
虽然Jenkins说明中推荐中文配置为GB2312，但其实我们一般通用的作法是设置为UTF-8，兼容各类操作系统和构建环境。
问题二：不支持FTP被动模式（PASV）
报错如下：
image
上网查有关FTP报502 Command not implemented错误，可能都会说到要开启FTP被动（PASV）模式，那解决方法就有两种了，一种是在FTP服务端开启PASV被动模式（一般默认两种模式都开启了，但不排除没有开启的情况，就导致这个问题）。我们通过FlashFXP工具去连接FTP服务器，也能看出是否开启了PASV模式：
image
可以看出FTP客户端默认都是用PASV模式去连接服务端，如果连接失败后会自动转为PORT主动模式，说明我们的Jenkins不会自动去转换连接模式，所以导致了上传文件报502错误。
所以，另一种方式就是改变Jenkins的连接模式，通过官网也能找到这一段话：
Use active data modeBy default passive mode will be used to connect to the FTP Server.In passive mode the client initiates all connections which will allow the client to send files through a firewall that has been configured to refuse all inbound connections (and does not create dynamic rules).If you want to dissable passive mode, and have the client use PORT commands for the server to connect to the client to retieve the files, then you can check this box.
从这段话可以看出，我们是需要自己设置连接模式的（默认是PASV模式，至于PORT与PASV两种模式的区别，可以上网百度），配置如下：
系统管理】->【系统设置】->【Publish over FTP】->高级：勾选【Use active data mode】
保存设置后，再次构建项目，就能看到FTP上传成功了！
image
部署Jenkins
在windows上Jenkins安装及其配置1.官方下载地址:
https://jenkins.io/,本次下载的版本为jenkins-2.138.
2.war包安装：启动Jenkins命令,打开cmd至Jenkins安装目录下，运行命令 java -jar jenkins.war 如果改变默认端口，则指定端口例如端口号9080：java -jar jenkins.war --httpPort=9080。此种安装方式的Jenkins可以在Web容器（例如tomcat）中运行，作为持续性集成环境不推荐此种方法。
3.msi安装包安装（这里采用此安装方式）：安装完成，windows系统服务中会自动注册jenkins服务；如果端口冲突。打开安装目录下的jenkins.xml文件，找到<arguments>-Xrs -Xmx256m -Dhudson.lifecycle=hudson.lifecycle.WindowsServiceLifecycle -jar "%BASE%\jenkins.war" --httpPort=9080 --webroot="%BASE%\war"</arguments> ，修改端口号，这里修改为了9080，重启服务即可。
1.png
4.浏览器访问localhost:9080，会出现如下界面，找到密码文件输入密码点击继续
2.png
5.安装插件：选择推荐的插件进行安装Install suggested plugins
3.png
6.进行用户名、密码等配置，然后依次点击保存并完成，进入到该界面
4.png
引用来源：
基于jenkins搭建一个持续集成服务器完整版
https://www.jianshu.com/p/6191082f9c7f潘复学windows上Jenkins安装及其配置
https://www.cnblogs.com/fuxuepan/articles/9525623.html
