Jenkins自动化构建vue项目然后发布到远程服务器

部署Jenkins参照另一篇博客:

centos7安装Jenkins及其卸载

一、jenkins相关插件的安装

1、安装Publish Over SSH插件用于SSH连接远程的服务器。

登录 jenkins 管理系统首页,打开“系统管理”--“管理插件”  搜索 Publish Over SSH 然后勾选安装

2、安装 NodeJs插件 用于vue项目打包构建。

打开“系统管理”--“管理插件”  搜索 nodejs 然后勾选安装

打开“系统管理”--“Global Tool Configuration”   拉到底部 配置  node 版本,如图:

二、配置远程服务器的连接

1、打开“系统管理”--“系统设置”  找到 “Publish over SSH” 项 ,如果是帐号密码登录的Passphrase填写密码Username填写用户名,path to key 为空就可以了。也可以通过远程服务器用的是ssh登录,通过ppk密钥进行连接。点击 Test Configuration 按钮测试连接是否成功

三、配置自动部署任务

1、新建任务:点击“新建”--填写任务名称,选择“构建一个自由风格的软件项目”然后保存,如图:

2、配置git,进入任务配置,选择源码管理 ,我这里是git下载项目,所以选择 git ,因为是开源的,所以没有填写账号密码,如图

3、设置构建环境,选择 Provide Node & npm bin/ folder to PATH  然后选择之前安装插件时候配置的node版本,如图

4、配置项目自动化打包,选择 增加构建步骤 ---Excute shell  这个是运行相关的sh命令

cd /var/lib/jenkins/workspace/test
npm install -g cnpm --registry=https://registry.npm.taobao.org
rm -rf dist
rm -rf finance
rm -rf finance.tar.gz
cnpm install
cnpm run build
mv dist finance
tar -zcvf finance.tar.gz finance

5、把打包好的项目文件发布到远程服务器

选择“构建后操作步骤”---“Send build artifacts over SSH” 。

Name:第三步创建的远程服务器名称

Source files:本地需要传输过去的文件路径

Remove prefix:过滤掉的目录名

Remote directory:远程服务器的保存路径

Exec command:传输完成后在远程服务器执行的sh命令

cd /usr/local/src/tomcat/apache-tomcat-8.0.30/webapps/
rm -rf finance
tar zxvf finance.tar.gz
rm -rf finance.tar.gz

6、保存后点击“立即构建”查看任务是否构建完成,Console Output 菜单可以查看构建日志。

遇到的问题

[test] $ /bin/sh -xe /tmp/jenkins5540140486901721898.sh
+ cd /var/lib/jenkins/workspace/test
+ rm -rf dist
+ npm install

> [email protected]2.0.0 install /var/lib/jenkins/workspace/test/node_modules/yorkie
> node bin/install.js

CI detected, skipping Git hooks installation

> [email protected]4.9.3 install /var/lib/jenkins/workspace/test/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/linux-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.9.3/linux-x64-72_binding.node": 

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g. 

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected]4.0.0 postinstall /var/lib/jenkins/workspace/test/node_modules/electron
> node install.js

需要用到淘宝镜像做代理,否则连接不上,参考:http://npm.taobao.org/

参考博客:

https://blog.csdn.net/ansu2009/article/details/83584796

原文地址:https://www.cnblogs.com/djlsunshine/p/11059690.html

时间: 2024-10-16 16:37:47

Jenkins自动化构建vue项目然后发布到远程服务器的相关文章

Jenkins自动化构建系列:01敏捷开发、自动化构建与持续集成

<SVN与TortoiseSVN实战系列>已写完,今天新开一个<Jenkins自动化构建系列>,上周听了Bob Jiang老师的Agile1001公开课,一直想写个总结,这篇关于敏捷开发.自动化构建与持续集成的思考就作为开题篇吧. 敏捷是什么? 敏捷是一把伞,这把伞下边有XP.Scrum.FDD...,当然也包括自动化构建.持续集成,其实符合敏捷思想的开发方法.工具,如Jenkins都可以属于敏捷开发的范畴,上课时的PPT: 敏捷到底是什么? 其实关于敏捷的定义有很多,Bob Ji

Jenkins自动化构建python nose测试

简介 通过Jenkins自动化构建python nose测试分两步: 1. 创建节点(节点就是执行自动化测试的机器): 2. 创建任务并绑定节点(用指定的机器来跑我们创建的任务,这里我们选择执行一段脚本). 创建节点 1. 登录jenkins平台,在左侧的节点中随便找一个节点点进去,然后在导航栏点击“nodes”-->点击“创建节点”-->输入“节点名称”-->选择“Permanent Agent”-->点击“OK”: 2. 指定jenkins的工作目录,随便指定-->点击“

vue-cli快速构建Vue项目

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-cli 注意:上面这些装过一次之后都不需要再安装了比如说我的项目要生成在D:/project下面那么先进到目录里

webpack构建Vue项目引入jQ时发生“&#39;$&#39; is defined but never used”的处理

今天公司需要新建个数据后台,就按照查到的方法构建了Vue框架的项目,引入jQ.bootstrap时,按照在线方法配置,发现 main.js 里的引用jQ一直显示红标,没多想,在按照网上配置完后,npm run dev运行,就抛出这么个错误,百思不得解 错误如下: '$' is defined but never used 1 http://eslint.org/docs/rules/space-before-function-paren 1 http://eslint.org/docs/rule

Vue项目webpack打包部署到服务器

Vue项目webpack打包部署到服务器 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.[js](http://lib.csdn.net/base/javascript "JavaScript知识库"),我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'变为了./,然后我就执行了npm run buil

webpack构建vue项目(配置篇)

最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出来,欢迎大神来拍砖... 一.新建一个项目目录,cd /d 定位进去,然后输入npm init,会提示你填写一些项目的信息,一直回车默认就好了,或者直接执行npm init -y 直接跳过,这样就在项目目录下生成了一个package.json文件. 二.接下来就是通过npm安装项目依赖项,命令行输入

Maven 学习(二)使用eclipse构建Maven项目及发布一个Maven项目

开发环境: Eclipse Jee Mars(截止2015年12月1日目前的最新版eclipse4.5),下载地址:http://www.eclipse.org/downloads/ 因为此版本已经集成了M2E的插件,再者Mars版本的eclipse也比较稳定,可以省一些不必要的麻烦. 一.构建Maven项目 用eclipse构建maven项目之前我们需要为eclipse做一些必要的配置 一些必要的配置 1.点击eclipse菜单栏的Window下的preferences,选择Maven菜单 2

Ant自动化构建Andriod项目详解

因工作需要,最近一直在用ant实现各android工程的自动化构建.在编写自动化构建脚本过程中遇到了各种各样的坑,在逐一跳坑的过程中,也对ant的自动化构建过程也有了较为深入的了解.本文将着重介绍android平台下如何使用ant自动化编译打包apk, 及在使用过程中的遇到的问题和解决方式,希望能够对大家有所帮助. 1.      简单了解下Ant 1.1.    什么是 Ant: Apache Ant,是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于 Java 环境中

vue-cli 构建vue项目

师父说,咱们还是要用vue-cli 去构建前端项目.然后我就开始了 懵逼之旅. 今天上午主要就是搞懂用webpack和vue-cli怎么搭建 运行项目 首先找到了咱们博客园 园友的博客,提供了大概五个步骤吧. 1.装node.js 装完这个就可以用npm命令去装其它东西了. 出版本号了 就代表装成功了 2.装vue-cli npm install -g vue-cli 在node的命令行界面 或者cmd的命令行 都可以输入这行命令 同理 出了版本号 就代表装成功了. 3.使用vue-cli初始化