【Jenkins】什么?前端还能用Jenkins一键部署?

news2024/9/24 10:58:00

前置要求:
Jenkins安装nodejs插件(本篇文章会教)
Linux安装Node.js(图文解说详细版)

如果你是一名前端工程师,那么你可能会对Jenkins这个自动化构建工具并不陌生。但是,你有没有想过在前端项目中使用Jenkins进行自动化部署呢?实际上,Jenkins不仅仅适用于后台服务的构建和部署,它同样也可以为前端项目提供便捷的自动化部署方案。本文将向大家介绍如何在前端项目中运用Jenkins进行一键式自动化部署。

文章目录

    • 🎸 第一步,Jenkins安装nodejs插件
    • 🎸 第二步,配置node环境
    • 🎸 第三步,远程部署(如无需要请略过)
    • 🎸 第四步,新建一个自由风格项目
    • 🎸 第五步,构建

🎸 第一步,Jenkins安装nodejs插件

在这里插入图片描述
在这里插入图片描述

如果出现这样的情况,则使用本地安装,没有则略过、

在这里插入图片描述

本地安装,下载老版本的插件

https://plugins.jenkins.io/nodejs/

在这里插入图片描述
在这里插入图片描述
加入插件管理

在这里插入图片描述
拉到最下面点击选择刚刚下载的hpi文件

在这里插入图片描述
安装完成之后可以在已安装查看

在这里插入图片描述

🎸 第二步,配置node环境

在这里插入图片描述

这里选择linux中node的安装位置

在这里插入图片描述

🎸 第三步,远程部署(如无需要请略过)

在这里插入图片描述
搜索Publish Over SSH

在这里插入图片描述
在这里插入图片描述
系统管理

在这里插入图片描述
配置好服务器的信息

在这里插入图片描述
可以右下角点击测试

在这里插入图片描述

🎸 第四步,新建一个自由风格项目

在这里插入图片描述
设置general

在这里插入图片描述
设置源码地址

在这里插入图片描述
设置构建环境,选我们刚刚配置的node

在这里插入图片描述
选择远程构建

在这里插入图片描述
选择好构建的参数

在这里插入图片描述

npm install
npm run build # npm命令打包项目
rm -rf dist.tar.gz # 删除上一个\已存在的dist压缩包
tar -zcvf dist.tar.gz dist # 将新打的dist包进行压缩

添加第二步步骤(ssh)

在这里插入图片描述

Source files填刚刚打包的压缩包
Remote directory 填要上传到目标服务器的哪个位置(jenkins会默认加个/root,所有上面会上传到/root/cop-test-ui-jenkins-tmp目录下
Exec command填上传后需要执行的脚步
例如:

cd /root/cop-test-ui-jenkins-tmp
tar -zcvf dist$(date '+%Y%m%d%H%M%S').tar.gz /home/cop-test-ui/*  
cd /home/cop-test-ui
rm -rf *
mv /root/cop-test-ui-jenkins-tmp/dist.tar.gz ./
tar -zxvf dist.tar.gz 
mv dist/* ./
rm -rf dist
rm -rf dist.tar.gz 

可根据自己需求配置

🎸 第五步,构建

在这里插入图片描述
选择分支(Git Parameter插件)

在这里插入图片描述

在这里插入图片描述
需要在项目里面接收此参数

在这里插入图片描述

总之,通过本文我们了解到,在前端开发中运用Jenkins进行自动化构建和部署,不仅可以提高项目的管理与协作效率,还能确保项目代码的稳定性和可靠性。虽然配置有少许复杂,但只要按照上述步骤操作,并根据自己的项目需求进行调整及优化,相信最终会得出最合适的方案。因此,我强烈建议各位前端工程师们在日常开发中尝试运用Jenkins进行自动化部署,以提高效率和降低工作压力。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/611088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python+Django图书商城网站前后端

程序示例精选 PythonDjango图书商城网站前后端 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<PythonDjango图书商城网站前后端 >>编写代码&#xff0c;代码整洁&#xff0c;规…

飞行器姿态计算

在飞行器的控制中&#xff0c;姿态计算是至关重要的一步。姿态计算的目标是确定飞行器相对于参考坐标系的姿态&#xff0c;通常以欧拉角&#xff08;滚转、俯仰和偏航&#xff09;或四元数的形式表示。 以下是姿态计算的原理和常用方法的简要介绍&#xff1a; 原理&#xff1a…

数据库系列:数据库高可用及无损扩容

1 背景 在大型互联网场景中&#xff0c;数据库的高可用性显得尤为重要&#xff0c;为了保证稳定性&#xff0c;一般需要采用强化的架构模式&#xff0c;以保证数据层能够提供持续有效的稳定支撑。 2 高可用架构的基本演进过程 2.1 基本的数据库架构 每个服务对应一个存储服…

FinancesOnline 2022/2023 10大IT趋势预测

在过去几十年的时间里&#xff0c;全世界的计算能力达到了万亿倍的增长。太空、军事和工业研究促成了范式的转变。与此同时&#xff0c;新冠肺炎大流行等不可预见的事件迫使人们去迎接新的技术&#xff0c;采用与以往不同的技术路径&#xff0c;这导致了IT趋势越来越难以跟上。…

阿里云轻量服务器--Docker--Rabbitmq安装

1 Rabbitmq 介绍&#xff1a; RabbitMQ 是一个开源的消息代理软件&#xff0c;通常用于构建分布式系统&#xff0c;支持多种消息传递协议&#xff0c;并支持多种编程语言。RabbitMQ 基于 AMQP (Advanced Message Queuing Protocol) 协议开发&#xff0c;是一个高可用、高可靠、…

3.完成ODS层数据采集操作

将原始数据导入mysql 1 选中mysql 运行脚本 2 验证结果 数据存储格式和压缩方案 存储格式 分类 1.行式存储(textFile) 缺点:可读性较好 执行 select * 效率比较高 缺点:耗费磁盘资源 执行 select 字段 效率比较低 2.列式存储(orc) 优点:节省磁盘空间. 执行 select 字段…

配电网可靠性评估(4)—(顶刊复现)基于线性规划的配电网可靠性评估

之前的博客中介绍了配电网可靠性评估的三种方法、分别是解析法中的最小路法&#xff0c;以及序贯蒙特卡罗模拟法及非序贯蒙特卡洛模拟法&#xff0c;顺带提到了含有分布式电源的配电网可靠性评估方法。 配电网可靠性评估&#xff08;一&#xff09;最小路法和非序贯蒙特卡洛模…

Elai.io:AI视频生成平台

【产品介绍】 Elai.io是一个基于人工智能的AI视频生成平台&#xff0c;可以让你只用文本就能制作出有真人主持的专业视频。无论你是想做教育、营销、企业沟通或者其他类型的视频内容&#xff0c;Elai.io都可以帮你节省时间和成本&#xff0c;提高效率和质量。Elai.io的技术结合…

618数码产品攻略,列举几款2023年618必入的数码产品

​一年一度大型促销的618节日转眼间第一波就已经过去了&#xff0c;在这种各类优惠活动接踵而至的日子里&#xff0c;很多人都是准备着更换新东西的时刻&#xff0c;不过也会存在着一部分人&#xff0c;想要入手数码好物&#xff0c;但又不知道该如何去挑选&#xff0c;毕竟现在…

2.2 事件驱动的reactor网络设计模型

在网络io、io多路复用select/poll/epoll、基于事件驱动的reactor中介绍了多种网络I/O方式&#xff0c;特别是事件驱动的reactor。其开发效率比直接使用IO多路复用要高&#xff0c;它一般是单线程的&#xff0c;设计目标是希望一个线程使用CPU的全部资源。 并且&#xff0c;相对…

Rxjava2系列:RXjava2.1.7源码下载

找到github项目地址&#xff1a;https://github.com/ReactiveX/RxJava/ 找到右侧的release&#xff0c;点击打开。 搜索2.1.7 (2.1.7是这篇文章&#xff1a;RxJava 是如何实现线程切换的&#xff08;上&#xff09;的源码版本&#xff09; 找到Assert&#xff0c;下载 解…

计算机专业应届毕业生有没有必要参加IT培训?

大学学习的计算机专业&#xff0c;毕业还需要进行IT培训吗&#xff1f;我想&#xff0c;这个问题也困扰着你们吧。那今天小课就带着你们分析一下&#xff0c;计算机专业毕业的应届生到底有没有必要进行培训。 了解企业的技术需求 考虑培训不培训&#xff0c;首先要了解一下现在…

Vue.js 中的数据双向绑定是如何实现的?

Vue.js 中的数据双向绑定是如何实现的&#xff1f; Vue.js 是一款流行的前端框架&#xff0c;它的核心功能之一是数据双向绑定。本文将介绍 Vue.js 中数据双向绑定的实现原理&#xff0c;并附上相关代码实例。 什么是数据双向绑定&#xff1f; 在传统的前端开发中&#xff0c…

Matlab论文插图绘制模板第98期—大小不同多子图(Subplot)

上一篇文章分享了Matlab多子图的绘制模板&#xff1a; 但假如子图的大小不是相同的&#xff0c;该怎么操作呢&#xff1f; 本期就来分享一下大小不同多子图的绘制模板。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;本期内容『数据代码』已上传资源群中&#xff0c;…

java SSM 房屋管理系统统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM 房屋管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和 数据库&#xff0c;系统主要采用B…

Linux - 第22节 - 网络基础(其他重要协议或技术)

1.DNS协议 • DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09;协议&#xff0c;是一个用来将域名转化为IP地址的应用层协议。 • DNS协议属于应用层协议&#xff0c;由UDP实现其域名解析功能。 1.1.DNS背景 TCP/IP中通过IP地址和端口号的方式&#xff0c;来…

地震勘探基础(七)之地震静校正

地震静校正 首先&#xff0c;为什么要进行地震静校正处理呢&#xff1f;主要的原因是地震勘探中激发和接收的观测面不完全是水平的。尤其是在山区、沙漠和黄土原地区。而且近地表还存在风化层或低、降速带低、降速带的厚度和速度会发生变化&#xff0c;这就导致反射波的传播时…

HTML5 FormData对象

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 创建一个FormData对象 你可以先创建一个空的FormData对象,然后使用append()方法向该对象里添加字段,如下: var oMyForm new FormData();oMyForm.append(&…

Web服务器的工作原理

Web服务器的工作原理 什么是web服务器、应用服务器和web容器&#xff1f;什么是Servlet&#xff1f;他们有什么作用&#xff1f;什么是ServletContext&#xff1f;它由谁创建&#xff1f;ServletRequest和ServletResponse从哪里进入生命周期&#xff1f;如何管理Session&#x…

界面开发框架Qt新手入门教程:Dir视图使用实例

Qt 是目前最先进、最完整的跨平台C开发工具。它不仅完全实现了一次编写&#xff0c;所有平台无差别运行&#xff0c;更提供了几乎所有开发过程中需要用到的工具。如今&#xff0c;Qt已被运用于超过70个行业、数千家企业&#xff0c;支持数百万设备及应用。 点击获取Qt Widget组…