前端 Jenkins 自动化部署

news2024/7/6 5:33:32

由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,其实跟Git 配置基本一致。

在没有自动化部署前

之前项目每次修改之后都需要本地 ​​npm run build ​​一次手动发布到服务器上方便测试和产品查看,

有了自动化部署后

有了Jenkins持续集成之后只要 svn 或者 git 提交之后就会自动打包,很方便,此次记录以备后询。

直接上步骤

  1. 安装
    1.1 安装 Nginx
    可以直接去官网下直接下载,解压缩 ​​start nginx​​就可以使了,常用命令:
    start nginx # 启动
    nginx -s reload # 修改配置后重新加载生效
    nginx -s reopen # 重新打开日志文件
    nginx -t # 配置文件检测是否正确

1.2 安装Jenkins
在这里插入图片描述
从官网下载文件安装之后,我这里安装到 ​​C:\Jenkins​​​(Mac 不用在意),默认端口 8080,这时候浏览器访问 ​​localhost:8080​​ 就能访问 Jenkins 首页,这里注意如果不安装到 C 盘根目录有些插件安装会出错

这里会让你去某个地方找一个初始密码文件打开并填到下面的密码框里,验证成功之后进入页面,选择 ​​Installsuggested plugins​​ 推介安装的插件
在这里插入图片描述
插件都安装完成之后进入用户登录界面,设定用户名、密码及邮箱。

然后提示 Jenkins is ready!→ Start using Jenkins ~

在这里插入图片描述
注意这里因为要使用node的命令来执行创建后操作,所以还需要安装插件:​​NodeJSPlugin​​​、 ​​Deployto container​​​、 ​​Github​​​、 ​​Postbuild task​​

这里顺便记录一下启动和关闭Jenkins服务的命令行:

​​net start jenkins // 启动Jenkins服务​​
​​net stop jenkins // 停止Jenkins服务​​
2. 创建svn项目的Jenkins任务
2.1 新建
左边栏新建一个任务,输入一个任务名称,这里随便写一个
在这里插入图片描述
2.2 配置
General
这里才是重头戏,进入刚刚创建的任务的配置页面的 General
在这里插入图片描述
丢弃旧的构建就是检测到新的版本之后把旧版本的构建删除

源码管理
在这里插入图片描述
这里采用的是 svn 来管理代码,

构建触发器
在这里插入图片描述
这里的 Poll SCM 表示去检测是否更新构建的频率, ​​*****​​​ 表示每分钟, ​​H****​​ 表示每小时

cd cd C:\Jenkins\workspace\my-demo

node -v

npm -v

cnpm i

npm run build

构建后操作
安装插件 ​​Postbuild task​​​ 后,可以在 增加构建后操作步骤中选择 ​​Postbuild task​​选项,增加构建后执行的script,具体也可以参考文章:jenkins部署maven项目构建后部署前执行shell脚本

我这里的 ​​Logtext​​​ 是 ​​Buildcomplete​​

rmdir /q/s C:\nginx-1.14.0\html\my-demo

xcopy /y/e/i C:\Jenkins\workspace\my-demo\my-demo C:\nginx-1.14.0\html\my-demo

复制生成好的文件到Nginx的目录下,路径自行修改

在这里插入图片描述

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

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

相关文章

微服务组件Feign实战 - 解决日志配置失效

1. RPC概述 思考: 微服务之间如何方便优雅的实现服务间的远程调用? RPC 全称是 Remote Procedure Call ,即远程过程调用,其对应的是我们的本地调用。RPC 的目的是:让我们调用远程方法像调用本地方法一样。 //本地调用…

【unity之IMGUI实践】游戏玩法逻辑实现【四】

👨‍💻个人主页:元宇宙-秩沅 👨‍💻 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍💻 本文由 秩沅 原创 👨‍💻 收录于专栏:uni…

3.11 Bootstrap 徽章(Badges)

文章目录 Bootstrap 徽章(Badges)激活导航状态 Bootstrap 徽章(Badges) 下面将讲解 Bootstrap 徽章(Badges)。徽章与标签相似,主要的区别在于徽章的边角更加圆滑。 徽章(Badges&…

短视频seo抖音矩阵号系统源码开发搭建分享

我们自主研发的短视频矩阵系统源码,技术研发的独立核心算法的视频内容管理和展示功能。无需额外的流量接口费用和复杂的配置,轻松地创建和管理短视频内容,短视频矩阵源码是指将抖音平台上的视频资源进行筛选、排序等操作,进而提升…

【ROS】ROS1人机界面开发:在QtCreator中创建ROS1功能包

【ROS】郭老二博文之:ROS目录 1、版本要求 ROS的QtCreator插件要和QtCreator版本对应一致,否则报错。 本人QtCreator版本为:10.0.1,需要下载安装ros_qtc_plugin的版本也要为10.0版本 2、安装 ros_qtc_plugin 2.1 下载插件 github:https://github.com/ros-industrial…

基于fpga实现tft屏幕显示数字、字母

简介 开发平台:ZYNQ 开发工具:Vivado 2018.3 tft屏幕分辨率:800*480 在PL端使用纯verilog实现bitmap模块,基于该模块实现在tft屏幕显示数字0-9,以及FPGA字母 Bitmap模块 该模块为5*5的bitmap,纯组合逻辑&…

7-18作业

#include<iostream>using namespace std; class My_stack { private:int* ptr; //执行堆区空间int top;int size; //记录栈顶元素public:My_stack() :ptr(new int[10]), top(-1), size(10) {}//有参构造My_stack(int size) :ptr(new int[10]), top(-1), size(siz…

Android 网络游戏开发入门简单示例

在Android系统上开发是Android开发学习者所向往的&#xff0c;有成就感也有乐趣&#xff0c;还能取得经济上的报酬。那怎样开发Android网络游戏攻略呢&#xff1f;下面介绍一个简单的入门实例。 一、创建新工程   首先&#xff0c;我们在Eclipse中新建一个名为Movement的工程…

简单工厂模式(java)

目录 结构 案例 类图 代码实现 简单咖啡工厂类 咖啡店类 咖啡类 具体咖啡类 简单工厂方法的优缺点 优点 缺点 结构 简单工厂包含如下角色&#xff1a; 抽象产品 &#xff1a;定义了产品的规范&#xff0c;描述了产品的主要特性和功能。具体产品 &#xff1a;实现或者…

前端 | (五)CSS三大特性及常用属性 | 尚硅谷前端html+css零基础教程2023最新

学习来源&#xff1a;尚硅谷前端htmlcss零基础教程&#xff0c;2023最新前端开发html5css3视频 文章目录 &#x1f4da;CSS三大属性&#x1f407;层叠性&#x1f407;继承性&#x1f407;优先级 &#x1f4da;CSS常用属性&#x1f407;像素的概念&#x1f407;颜色的表示⭐️表…

OCR学术前沿及产业应用高峰论坛202204

OCR学术前沿及产业应用高峰论坛 相关议程&#xff1a;https://mp.weixin.qq.com/s/LYoKHFad9D-gjhGlVF3Czg 广告OCR技术研究与应用-腾讯 视频制作ASR&#xff0c;ocr得到字幕 计算机动画CG OCR实践与技术创新 - 蚂蚁 loss优化 数据合成 对比学习的方式&#xff0c;什么样是…

让小程序动起来-轮播图的两种方式--【浅入深出系列002】

浅入深出系列总目录在000集 如何0元学微信小程序–【浅入深出系列000】 文章目录 本系列校训学习资源的选择啥是轮播图轮播图的关键代码最常见的轮播图代码便于理解的轮播代码两种轮播代码的比较 实际操练第一步&#xff0c;就是找到文件。第二步&#xff0c;先改动一下最显眼…

springboot整合feign实现RPC调用,并通过Hystrix实现降级

目录 一、服务提供者 二、服务消费者 三、测试效果 四、开启Hystrix实现降级功能 feign/openfeign和dubbo是常用的微服务RPC框架&#xff0c;由于feigin内部已经集成ribbon&#xff0c;自带了负载均衡的功能&#xff0c;当有多个同名的服务注册到注册中心时&#xff0c;会根…

数组前缀和

前缀和 前缀和就是指前缀的和&#xff0c;例如在数组中&#xff0c;从开始到 i 就是到 i 的前缀和。前缀和一般用来求中间连续某一段的和&#xff0c;例如sum[i] - sum[j - 1]就可以求出j 到 i 这一段的和。 在这一道题目里面&#xff0c;中间某一段连续子数组和为k&#xff0…

知识库分享|《快手电商中小商家成长指南》

《快手电商中小商家成长指南》致力于帮助快手电商平台的新商家、中小商家可以快速掌握电商经营流程&#xff0c;理解电商经营方法&#xff0c;提升电商经营能力&#xff0c;助力中小商家快速实现冷启。 ‼️ 包含中小商家冷启必备的六大板块两大方向&#xff1a; 基础操作、账…

SpringCloud(三)LoadBalancer负载均衡

一、负载均衡 实际上&#xff0c;在添加LoadBalanced注解之后&#xff0c;会启用拦截器对我们发起的服务调用请求进行拦截&#xff08;注意这里是针对我们发起的请求进行拦截&#xff09;&#xff0c;叫做LoadBalancerInterceptor&#xff0c;它实现ClientHttpRequestIntercep…

JAVA的swing技术到底实用不实用?

文章目录 先说结论JAVA的知识范围那为什么还要学&#xff1f; 总结 先说结论 不实用 1 尚硅谷Java入门视频教程&#xff0c;宋红康java基础视频 必须要排在第一位。1600万的播放量呀。 717集 我的天啦&#xff01; 目录&#xff1a; Java视频及配套资料下载指南 尚硅谷Java基…

有效的括号(C)

bool isValid(char* s) {ST st;StackInit(&st);while (*s) //遍历 -- 与\0终止{//是左括号 压栈if (*s ( || *s [ *s {){StackPush(&st, *s);s;}else{//应对样例&#xff1a; ’]if (StackEmpty(&st)){StackDestroy(&st);return false;}//不是左括号 应该就…

【Flink】详解Flink任务提交流程

启动一个任务 通常我们会使用 bin/flink run -t yarn-per-job -c com.xxx.xxx.WordCount/WordCount.jar 方式启动任务&#xff1b;我们看一下 flink文件中到底做了什么&#xff0c;以下是其部分源码 # Convert relative path to absolute path bindirname "$target"…

快速搭建机器学习demo: gradio教程

1. Intro gradio是一个能够快速建立机器学习demo web应用的工具&#xff0c;仅需简单的几行代码就能构建机器学习模型的可视化交互demo&#xff0c;并分享给你的朋友使用。 与gradio相同功能的竞品有Streamlit&#xff0c;相比Gradio&#xff0c;Streamlit相对复杂&#xff0…