使用jenkins一键打包发布vue项目的实现

jenkins的安装

Jenkins是一款开源 CI&CD 软件，用于自动化各种任务，包括构建、测试和部署软件。

Jenkins 支持各种运行方式，可通过系统包、Docker 或者通过一个独立的 Java 程序。

安装

这里的操作系统为WSL Ubuntu，其它系统的安装的请参考jenkins官方文档

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

更换端口号（默认运行在8080端口）

jenkins的配置文件在 /etc/default/jenkins；在其中找到HTTP-PORT并修改

运行

sudo systemctl start jenkins
# OR
sudo service jenkins start

如果要开机自动运行

sudo systemctl enable jenkins

如果运行时碰到如下图的错误，请先安装jdk

基础配置

启动成功后输入对应的地址(ip:port)进入jenkins管理界面-如下图

在上图中红色字体对应的文件中拿到默认的管理员密码-具体命令

cat /var/lib/jenkins/secrets/initialAdminPassword

命令执行完成后返回如下图

输入密码之后进入到自定义Jenkins界面（如下图）

在此界面我们选择安装推荐的插件就会开始安装插件；如下图

插件安装完成后就会自动进入设置用户名密码界面（如下图）

输入完成后点击按钮保存并完成就会进入下一个界面实例配置

点击按钮保存并完成就进入一个新界面，再点击其中的按钮开始使用Jenkins就进入了jenkins的主界面（如下图），至此就完成了jenkins的安装与基础配置。

发布vue项目

> 打包vue项目需要nodejs，打包完成后需要通过ssh把打包好的文件上传到目标服务器上。所以下面我们将会来安装jenkins的nodejs插件和Publish Over SSH插件。

安装插件-nodejs

在jenkins主界面工作台，依次点击系统管理>插件管理进入插件管理界面(如下图)

搜索结果如下图

勾选完插件并点击安装后进入到插件下载界面(如下图)

配置nodejs插件

在jenkins主界面工作台，依次点击系统管理>全局工具设置进入插件管理界面并找到NodeJs选项(如下图)

安装Publish Over SSH插件并配置

Publish Over SSH插件的安装和nodejs插件是一样，安装完成后开始配置插件；

在jenkins主界面工作台，依次点击系统管理>系统配置进入插件配置界面，滚动到Publish over SSH的位置，然后点击SSH Servers下面的新增按钮(如下图)

点击按钮高级后出现的界面如下

创建任务

至此，打包vue所需的jenkins插件都已经安装完成，下面我们开始创建vue项目打包的任务。

具体操作如下图

点击按钮确定后，如下图

安装上图所说的配置完成后点击保存按钮就会跳转到所创建任务的详情界面。

至此一个我们便实现了一个简单的一键打包前端项目的jenkins配置。

到此这篇关于使用jenkins一键打包发布vue项目的实现的文章就介绍到这了,更多相关jenkins打包发布vue项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue项目打包后通过百度的BAE发布到网上的流程

    经过两天的研究终于将VUE打包后的项目通过BAE发布到了网上.虽然接口方面还有一下问题但是自己还是很高兴的. 首先说一下这个项目需要用到的技术,vue+express+git+百度的应用引擎BAE. 继续编辑终于将自己写的JSON文件模拟的数据也传上去了. 具体的步骤: 1,首先讲写好的vue项目打包(具体的打包过程我就不在说了,直接npm run build,就会在VUE项目文件中重新创建一个dist文件,这个就是打包好的项目) 2,在百度的应用引擎BAE部署一个项目,一天才2毛钱很便宜.自己

  • vue.js 2.*项目环境搭建、运行、打包发布的详细步骤

    Vue 安装 vue-cli /webpack 全局安装 如果在意安装速度,可以使用淘宝镜像来安装 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完淘宝镜像后,就可以使用cnpm 来代替 npm 安装工具啦 我个人比较喜欢直接使用npm 安装: 全局webpack: npm install webpack -g vue脚手架vue-cli: npm install vue-cli -g 安装webp

  • 详解vue项目的构建，打包，发布全过程

    详解vue项目的构建，打包，发布全过程

    很多朋友对于VUE项目的一系列流程不熟悉,小编根据网友提出的问题,整理了关于vue项目的构建打包发布全过程,希望对你有用. 一.vue项目的创建 1.首先第一肯定是要有Node.js及npm这个不多说了 2.安装脚手架 此时可以直接浏览-但是现在肯定有很多小白想将他发布到gitHub上并可以浏览,使用vue全家桶制作自己的博客. 现在就有我来说说如何讲vue项目发布到github上 之前写过vue环境搭建 可以参考: vue环境搭建 二.vue项目的打包 1.大家都知道使用npm run bui

  • Vue插件打包与发布的方法示例

    插件打包与发布 插件功能开发完成后,若需要发布到公共组件库中(例如:npmjs),需要对插件进行打包并发布,简单说明一下这个过程,以插件名 dialog 为例 1.创建 dialog 目录,并进入 2.运行命令行,初始化项目,生成 package.json npm init -y 3.使用 webpack-simple 模板构建项目基本结构(前提为已自行安装好 vue-cli) vue init webpack-simple 根据导航提示,设置好项目后,基本结构生成完成 4.删除无用内容   删

  • 解决vue 打包发布去#和页面空白的问题

    1.vue项目中config文件下index.js中打包配置 build: { // Template for index.html index: path.resolve(__dirname, '../yiTownWebApp/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../yiTownWebApp'), assetsSubDirectory: 'static', assetsPublicPath: '/yiTown

  • 自定义Vue组件打包、发布到npm及使用教程

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 按照大佬文中写的一步步操作,够细心的话基本可以一步到位.下面总结一下发布步骤: 1. 利用Vue的脚手架新建一个简易版的Vue项目my-project: vue init webpack-simple my-project -> cd my-project -> npm i -> npm run

  • 使用jenkins一键打包发布vue项目的实现

    使用jenkins一键打包发布vue项目的实现

    jenkins的安装 Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建.测试和部署软件. Jenkins 支持各种运行方式,可通过系统包.Docker 或者通过一个独立的 Java 程序. 安装 这里的操作系统为WSL Ubuntu,其它系统的安装的请参考jenkins官方文档 wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add - sudo sh -c 'echo de

  • jenkins自动构建发布vue项目的方法步骤

    jenkins自动构建发布vue项目的方法步骤

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

  • Jenkins一键打包部署SpringBoot应用的方法步骤

    Jenkins一键打包部署SpringBoot应用的方法步骤

    目录 Jenkins简介 Jenkins的安装及配置 Docker环境下的安装 Jenkins的配置 角色权限管理 打包部署SpringBoot应用 在Jenkins中创建执行任务 任何简单操作的背后,都有一套相当复杂的机制.本文将以SpringBoot应用的在Docker环境下的打包部署为例,详细讲解如何使用Jenkins一键打包部署SpringBoot应用. Jenkins简介 Jenkins是开源CI&CD软件领导者,提供超过1000个插件来支持构建.部署.自动化,满足任何项目的需要.我们

  • Jenkins一键打包部署SpringBoot应用

    目录 一.准备工作 二.Jenkins的安装及配置 三.打包部署SpringBoot应用 四.立即构建 一般而言,一个项目部署的由:拉取代码->构建->测试->打包->部署等过程组成,如果我们经常需要部署项目,特别是在微服务时代,服务特别多的情况下,不停的测试打包部署,那估计得有个人一整天专门做这事了,而这事又是繁琐的重复无意义的,所以就需要一套能够持续集成.持续交付.持续部署的自动化构建流程. Jenkins是开源CI&CD软件领导者,提供超过1000个插件来支持构建.部

  • 使用Docker部署打包发布springboot项目

    使用Docker部署打包发布springboot项目

    目录 前言 第一:环境 第二:开始描述从搞项目到docker发布: 第四:各种错误教训集合. 前言 从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种问题,终于不负所望,一步步解决,本文我会比较大跨度的来说明一切解决办法. 第一:环境 1.虚拟机安装的centos7. 2.docker已安装好,不会的可以参看我的docker安装文章. 3.搞一个很简单的springboot项目即可,先搞定发布编译再说. 第二:开始描述从搞项目到docker发布: 1.springboot项目

  • vue项目打包发布上线的方法步骤

    vue项目打包发布上线的方法步骤

    目录 一.开发环境到生产环境的转变 二.设置统一的请求路径 三.运行打包命令 vue项目开发完成后,我们需要将项目打包上线,同时我们希望可以在本地预览生产环境项目 (以vue-cli脚手架生成的项目为例) 一.开发环境到生产环境的转变 项目开发结束之后,首先我们需要通知后端,获取一个线上的路径,之后将之前的开发路径切换为线上路径. 打开项目中config文件夹里面的 dev.env.js 文件,将后端给的线上路径填入. 'use strict' module.exports = { NODE_E

  • Vue项目打包部署的实战过程记录

    Vue项目打包部署的实战过程记录

    目录 前言 一.准备工作--服务器和nginx使用 1. 准备一台服务器 2. nginx安装和启动 3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件 二.Vue项目打包同步文件到远程服务器 1. 打包 2. 同步到远程服务器 3. 同步ssh key 三.非域名根路径发布 1. nginx配置 2. 项目配置 3. 绝对路径引用的静态资源找不到的问题 四.history模式部署 1. 项目配置 2. nginx配置 3. history模式部署到非域名根路径下

  • webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)

    最近在使用webpack + vue做个人娱乐项目时,发现npm run build后,css js img静态资源文件均找不到路径,报404错误...网上查找了一堆解决办法,总结如下 一.首先修改config目录下的index.js文件 将其中build的配置项assetsPublicPath进行修改,改为 目的是将资源文件的引入路径,改为相对地址(相对index.html) 二.此时html中的js.css.img引入均没有问题,但是css中的background-image还是报404 此

  • 浅谈maven 多环境打包发布的两种方式

    集合工程中 maven 的多环境打包发布 在一个项目的开发过程中,我们经常要进行 开发环境 , 测试环境, 正式环境 打包部署,如果每次打包过程中我们都是人为的 根据 不同 环境 去修改一些 配置文件 ,这样不但工作量太庞大,而且还容易出错,而maven的插件正好解决了我们的困扰. 1. maven 聚合工程的创建 创建过程直接忽略,看最终的结果图 第一种方式 2. 不同环境打包的配置 因为要发布一个webapp的主要配置文件集中在 web工程中,故而,相关的配置文件都在 ecps-manage

随机推荐