前端通过jenkins和docker打包部署流程
通过jenkins实现镜像打包和上传
1.在jenkins上创建流水线任务
点击新建任务
填写任务名称 选多分支流水线
增加分支源 选git
添加并选择凭据(有项目权限的git账号密码)
填写分支的正则表达式,多分支使用^(分支名|分支名)$
保存
2.项目根目录创建Jenkinsfile文件:如下更改
1.分支名称的正则表达式
2.下方token字段 按项目的名称起token也行 需要任务唯一值
3.nodejs的版本根据项目的nodejs版本更改版本
安装依赖并打包 根据项目结构和静态资源打包命令适配
制作docker镜像 根据项目结构和项目经理和开发经理的要求 更改镜像的名称和版本号
pipeline {agent anytriggers {GenericTrigger (causeString: 'Triggered by $ref',genericVariables: [[key: 'ref', value: '$.ref']],printContributedVariables: true,printPostContent: true,regexpFilterExpression: '^refs/heads/(分支名)$',regexpFilterText: '$ref',token: 'token值')}stages {stage('下载并安装nodejs版本') {steps {sh 'rm -rf /usr/lib/node_modules/npm/'dir('/root/.cache/downloads') {sh 'wget -nc "https://nodejs.org/dist/v16.14.0/node-v版本号-linux-x64.tar.xz" -O node-v版本号-linux-x64.tar.xz | true'sh 'tar -xf node-v版本号-linux-x64.tar.xz -C /usr --strip-components 1'}// sh 'npm install yarn -g' // 用yarn装依赖时使用}}stage('安装依赖并打包') {steps {sh 'npm install --registry https://registry.npmmirror.com'sh 'cd packages/文件名/ && 打包命令'echo '打包成功'}}stage('制作docker镜像后上传镜像仓库') {steps {sh 'cd packages/文件名/ && docker build -t 镜像仓库地址/镜像名:版本号 -f Dockerfile .'echo '制作镜像成功'sh 'docker push 镜像仓库地址/镜像名:版本号'echo '上传成功'}}stage('删除上一版本的同名镜像') {steps {sh '/root/jenkins/clean.sh'}}}
}
3. 项目主结构里创建Dockerfile文件
根据打包后的静态资源目录名称更改下面的路径名称
FROM 镜像仓库地址/nginx镜像名:版本号
COPY 文件名/ /usr/share/nginx/html/文件名/
RUN chown -R nginx:nginx /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'
4.创建nginx.conf文件
根据静态资源目录和路由文件的配置的baseUrl 配置前端访问路径
user nginx;
# 工作进程的数量
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {worker_connections 1024; # 每个工作进程连接数
}
http {include /etc/nginx/mime.types;default_type application/octet-stream;# 日志格式log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main; # 日志输出目录sendfile on;#tcp_nopush on;# 链接超时时间,自动断开keepalive_timeout 65;gzip on; # 开启gzip 压缩优化加载速度server {listen 21015;//端口号server_name localhost; # 浏览器访问域名# root html;# 路由location /文件名 { # 静态资源转发alias /usr/share/nginx/html/文件名;index index.html index.htm; # 入口文件try_files $uri $uri/ /文件名/index.html;}# location /api/ { # 接口转发,通过反向代理实现跨域# proxy_pass 接口地址;# proxy_set_header Host $host; # 传递域名# proxy_set_header X-Real-IP $remote_addr; # 传递ip# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;# } }# 引入其他的配置文件include /etc/nginx/conf.d/*.conf;
}
5.设置push和合并代码自动触发流水线 需要在gitlab上配置webhook
token为jenkinsfile里填写的token字段
点击保存,测试推送事件,显示200则完成,若显示404,需要找后端重启一下jenkins
6.服务器版本发布,前端镜像起服务 8048 外部端口 80 内部端口
docker run --name 镜像名 -d -p 8048:80 --restart=always --label=com.centurylinklabs.watchtower.enable=true //没有这句话先重启,再删掉镜像服务,再手动执行命令运行
镜像仓库地址/镜像名:版本号
通过本地实现镜像打包和导出
项目主结构里创建storage_conservation_build.sh文件
# 设置变量
IMAGE_NAME="jcn-web-test" # 镜像名称
IMAGE_TAG="1.0.0" # 镜像标签
EXPORT_PATH="./jcn-web-test.tar" # 导出路径和文件名
PUTH_NAME="coding" # 导出路径和文件名# 执行 Docker 构建
# docker rmi "$IMAGE_NAME"
docker build -t "$IMAGE_NAME:$IMAGE_TAG" .
# docker buildx build -t "$IMAGE_NAME:$IMAGE_TAG" --platform=linux/arm64 -o type=docker .
#删除没有名字的镜像
docker image prune -f # docker push "$IMAGE_NAME:$IMAGE_TAG"
# echo "镜像已push到 $PUTH_NAME"
# 导出镜像为 tar 文件
docker save "$IMAGE_NAME:$IMAGE_TAG" -o "$EXPORT_PATH"echo "镜像已导出到 $EXPORT_PATH"
在package.json文件中增加命令
"docker_build": "./storage_conservation_build.sh",
"no_auto_build": "打包命令 && npm run docker_build"
相关文章:
前端通过jenkins和docker打包部署流程
通过jenkins实现镜像打包和上传 1.在jenkins上创建流水线任务 点击新建任务 填写任务名称 选多分支流水线 增加分支源 选git 添加并选择凭据(有项目权限的git账号密码) 填写分支的正则表达式,多分支使用^(分支名|分支名)$ 保存 …...
SpringBoot自定义验证器:企业级参数校验架构设计与实践
一、需求分析与技术选型 在复杂业务场景中,标准校验注解(如@NotBlank、@Pattern)往往无法满足特殊业务规则验证需求。例如: 需要校验字段值在预定义的枚举范围内多字段之间存在关联性校验(如起始时间不能晚于结束时间)需要动态查询数据库进行业务规则校验架构设计原则:…...
4U带屏基于DSP/ARM+FPGA+AI的电力故障录波装置设计方案,支持全国产化
4U带屏DSP/ARMFPGAAI电力故障录波分析仪,支持国产化,含有CPU主控模块,96路模拟量采集,256路开关量,通讯扩展卡等#电力故障录波#4U带屏#新能源#电力监测 主要特点 1)是采用嵌入式图形系统,以及…...
笔试题——第五周
目录 Day1 排序子序列 消减整数 最长上升子序列 Day2 爱吃素 相差不超过k的最多数 最长公共子序列(一) Day3 小红的口罩 春游 数位染色 Day4 素数回文 活动安排 合唱团 Day5 跳台阶扩展问题 包含不超过两种字符的最长子串 字符串的排列 Day6 ISBN号码 k…...
图论-Floyd算法
在搜索中bfs只适合无权图 若是碰到有权图最简单的方法就是用邻接矩阵-二维矩阵存储每个点对之间的权重,然后用floyd 并且邻接矩阵还可以处理重边的问题(用min) INFfloat(inf) ma[[INF]*n for _ in range(n)]for i in range(n):ma[i][i]0for i in rang…...
使用pyinstaller打包fastapi项目的问题记录
文章目录 PyInstaller 相关介绍作用使用方式Spec 文件介绍 FastAPI 相关介绍什么是 FastAPI?使用方式 使用 PyInstaller 打包 FastAPI 项目常见问题与解决方案 PyInstaller 相关介绍 作用 PyInstaller 是一个将 Python 程序打包成独立可执行文件的工具,…...
Java秒杀功能-案例
数据库表设计 CREATE TABLE user (id bigint(20) NOT NULL AUTO_INCREMENT,name varchar(100) NOT NULL,password varchar(100) NOT NULL,PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8;CREATE TABLE order_info (id bigint(20) NOT NULL AUTO_INCREMENT,user_id bigi…...
Abp发布订阅
在 ABP(AspNet Boilerplate)框架里运用发布 - 订阅模式,有着多方面重要目的,以下为你详细阐述: 实现组件间的解耦 减少直接依赖:在传统的编程方式中,不同组件之间可能存在紧密的耦合关系&…...
docker部署ruoyi-vue-pro前后端详细笔记
docker部署ruoyi-vue-pro前后端详细笔记 参考:YuDaoCloud:Docker 部署 - 那个码农 1.准备工作 1.1 需要准备服务器,安装bt面板方便操作 if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wg…...
软考中级数据库系统工程师学习资料分享
软考中级数据库系统工程师考试对于很多 IT 从业者和计算机专业的大学生来说,是一个重要的职业资格认证。它不仅能够提升个人的专业技能,还能为职业发展增添有力的砝码。今天,我将为大家分享一套全面且实用的学习资料,帮助大家更好…...
RESTful学习笔记(一)
Web发展 一、API 程序硬件接口(Application Programming Interface),是预先定义好的逻辑函数,软件系统不同组成部分衔接的约定,直接调用函数,无序访问代码细节,分为SDK和Web应用接口两类 SDK…...
基于 FFmpeg 的音视频处理基础原理与实验探究
目录 1 基本知识1.1 解封装1.2 AAC和ADTS说明 1.3 H2641.3.1 H264编码结构解析1.3.2 NALU1.3.2 分类 2 实验1 探究音视频信息2.1 重要结构体介绍2.2 相关的API 3 实验二 提取AAC数据4 实验三 提取h264 1 基本知识 1.1 解封装 封装的逆向操作:封装是把音频流、视频流…...
spark和hadoop的区别
一、核心定位与架构差异 Hadoop • 定位:分布式存储与计算的基础框架,核心解决海量数据的存储(HDFS)和离线批处理计算(MapReduce)问题,适合对实时性要求不高的大规模数据离线处理场景。 • 架构…...
vue使用语音识别
vue使用语音识别 使用 Web Speech API 实现语音识别功能 语音转换的原理可以简单概括为以下几个步骤: 声音捕捉:将声波转化为数字信号。特征提取:分析声音中的关键特征。声学模型:将声音特征与音素匹配。语言模型:根据…...
代码随想录算法训练营day8(栈与队列)
华子目录 用栈实现队列思路 用栈实现队列 https://leetcode.cn/problems/implement-queue-using-stacks/description/ push(x) -- 将一个元素放入队列的尾部。 pop() -- 从队列首部移除元素。 peek() -- 返回队列首部的元素。 empty() -- 返回队列是否为空。思路 初始化两个栈…...
GPT,Genini, Claude Llama, DeepSeek,Qwen,Grok,选对LLM大模型真的可以事半功倍!
选对大模型真的可以事半功倍! 基于公开的技术报告、基准测试结果、在线反馈及用户使用情况,深入探讨各模型的特点、擅长领域及典型应用场景,为用户和开发者选择和应用合适的模型提供参考。 1. 引言 大型语言模型(Large Language…...
Unocss 类名基操, tailwindcss 类名
这里只列出 unocss 的可实现类名,tailwindcss 可以拿去试试用 1. 父元素移入,子元素改样式 <!-- 必须是 group 类名 --> <div class"group"><div class"group-hover:color-red">Text</div> </div>2…...
Flowable7.x学习笔记(十)分页查询已部署 BPMN XML 流程
前言 上一篇文章我们已经完成了流程的部署功能,那么下一步就是要激活流程了,但是我们要需要明确的指定具体要激活部署后的哪一条流程,所以我们先把已部署的基础信息以及具体定义信息分页查询出来,本文先把基础代码生成以及完成分页…...
【阿里云大模型高级工程师ACP学习笔记】2.1 用大模型构建新人答疑机器人
学习目标 在备考阿里云大模型高级工程师ACP认证时,学习《2.1用大模型构建新人答疑机器人》这部分内容,主要是为了掌握利用大模型技术构建高效答疑机器人的方法,提升在大模型应用开发领域的专业能力。具体目标如下: 掌握大模型API调用:学会通过API调用通义千问大模型,熟悉…...
设计模式深度总结:概念、实现与框架中的应用
【全网最全】23种设计模式思维导图详解 | 含React/Vue/Spring实战案例 导图概述 本文通过高清思维导图系统梳理了23种设计模式,分为创建型、结构型、行为型三大类,并标注了各模式在主流框架(如React、Vue、Spring)中的典型应用场…...
2025 活体识别+人脸认证工具类【阿里云api,需要先申请试用】
(1)获取活体检测的人脸URL地址和Token。 (2)活体检测成功后,使用Token验证人脸检测结果的一致性。 (3)对于检测结果一致的人脸照片,进行姓名、身份证号和照片的认证流程。 一、活…...
【HDFS】verifyEC命令校验EC数据正确性
verifyEC命令是HDFS里用于验证EC文件正确性的一个工具。这是一个非常实用的工具,能帮助我们确定EC的数据内容是否正确,并且如果不正确的话,还有可能会触发reportBadBlock给NN,让NN进行块的重构。 本文先介绍一下verifyEC命令的使用方法,再描述其实现原理细节。 一、命令…...
【PCIE730】基于PCIe总线架构的4路10G光纤通道适配器
板卡简介 PCIE730是一款基于PCI Express总线架构的4路10G光纤通道适配器,板卡具有4通道SFP万兆光纤接口,x8 PCIE主机接口,具有1组64位DDR3 SDRAM作为高速缓存,可以实现4通道光纤网络数据的高速采集、实时记录和宽带回放。 该板卡还…...
蚂蚁全媒体总编刘鑫炜再添新职,出任共工新闻社新媒体研究院院长
2025年4月18日,共工新闻社正式宣布聘任蚂蚁全媒体总编刘鑫炜为新媒体研究院院长。此次任命标志着刘鑫炜在新媒体领域的专业能力与行业贡献再次获得权威机构认可。 刘鑫炜深耕新媒体领域多年,曾担任中国新闻传媒集团新媒体研究院院长、蚂蚁全媒体总编等职…...
C++11——可调用对象
目录 lambda 表达式语法 捕捉列表 function bind 调整参数个数 参数顺序 lambda 表达式语法 lambda表达式本质上是匿名函数对象,该表达式在语法使用层是没有类型的,一般用auto或模板参数定义的对象去接收它的对象(模板参数定义的对象…...
【上位机——MFC】运行时类信息机制
运行时类信息机制的使用 类必须派生自CObject类内必须添加声明宏DECLARE_DYNAMIC(theClass)3.类外必须添加实现宏 IMPLEMENT_DYNAMIC(theClass,baseClass) 具备上述三个条件后,CObject::IsKindOf函数就可以正确判断对象是否属于某个类。 代码示例 #include <…...
数据中的知识产权问题
首席数据官高鹏律师团队编著 数据中的知识产权问题涉及法律、技术和社会多个层面,其复杂性随着数据价值的提升和数字化发展日益凸显。以下是核心要点的梳理和分析: 一、数据本身的知识产权属性 1. 原始数据(Raw Data) 通常不直…...
若依框架免登陆、页面全屏显示、打开新标签页(看板大屏)
1.免登陆:找到项目目录下src/permission.js,在白名单whiteList中添加上你的看板大屏路由地址,这样就不会校验该路由的token(这里我添加的是/mesBoard/mesqualityboard); 要注意的是此时免登陆进来也会报404…...
算法-策略(递归,二叉搜索)
分而治之 一个大问题不断拆成各种小问题,大问题与小问题的方向要一致。 递归函数(递减) 分析时间函数的两种方法:递归树(跟踪树) ,代换法。 例1 例2 这里的代换法注意,不要轻易的把常数加在一起,加在一起后看不出规…...
unity TEngine学习4
上一篇我们学习了UI部分,这一篇我们学习其他部分,按照老规矩还是先打开官方文档 ResourceModule 在官方文档里介绍了当前加载的设置,但是我们是小白看不懂,那就不管他内部怎么实现的,我们主要看下面的代码给的方法&am…...
掌握常见 HTTP 方法:GET、POST、PUT 到 CONNECT 全面梳理
今天面试还问了除了 get 和 post 方法还有其他请求方法吗,一个都不知道,这里记录下。 🌐 常见 HTTP 请求方法一览 方法作用描述是否幂等是否常用GET获取资源,参数一般拼接在 URL 中✅ 是✅ 常用POST创建资源 / 提交数据ÿ…...
在线查看【免费】 mp3,wav,mp4,flv 等音视频格式文件文件格式网站
可以免费在线查看 .docx/wps/Office/wmf/ psd/ psd/eml/epub/dwg, dxf/ txt/zip, rar/ jpg/mp3 m.gszh.xyz m.gszh.xyz 免费支持以下格式文件在线查看类型 支持 doc, docx, xls, xlsx, xlsm, ppt, pptx, csv, tsv, dotm, xlt, xltm, dot, dotx, xlam, xla, pages 等 Office 办…...
部署Kimi-VL-A3B-Instruct视频推理
部署Kimi-VL-A3B-Instruct视频推理 契机 ⚙ 最近国内AI公司月之暗面推出了Kimi-VL开源视觉模型。模型参数16.4B,但是推理时候激活参数2.8B。看了huggingface主页的Full comparison,在多项Benchmark的时候都展示出了不俗的实力。由于业务中使用了qwen-v…...
力扣面试经典150题(第二十四题)
问题 给定一个单词数组 words 和一个长度 maxWidth ,重新排版单词,使其成为每行恰好有 maxWidth 个字符,且左右两端对齐的文本。 你应该使用 “贪心算法” 来放置给定的单词;也就是说,尽可能多地往每行中放置单词。必…...
Electron Demo 的快速编译与启动
前言 本文将带你从零开始,快速搭建并运行一个基于 OpenIMSDK 的 Electron 应用。本项目以 OpenIMSDK 开源版为基础,借助 openim/electron-client-sdk 与 openim/wasm-client-sdk,能够同时构建 Web 端及桌面端(Windows、macOS、Lin…...
Web3核心技术解析:从区块链到C++实践
Web3作为下一代互联网的核心架构,正在通过区块链、智能合约、分布式存储等技术的融合,重塑数字世界的信任与协作模式。本文将从技术原理、应用场景及C实践案例三个维度,深入解析Web3的核心技术体系。 一、Web3的核心技术栈 1. 区块链&#x…...
Elasticsearch中的_source字段讲解
_source 在 Elasticsearch 查询中用于限制返回的字段,类似于 SQL 中的 SELECT 指定列。 代码示例: esSearchResults = es_service.search_documents({"query": {"terms": {"file_id":...
LlamaIndex 生成的本地索引文件和文件夹详解
LlamaIndex 生成的本地索引文件和文件夹详解 LlamaIndex 在生成本地索引时会创建一个 storage 文件夹,并在其中生成多个 JSON 文件。以下是每个文件的详细解释: 1. storage 文件夹结构 1.1 docstore.json 功能:存储文档内容及其相关信息。…...
笔记:react中 父组件怎么获取子组件中的属性或方法
在子组件中我们可以使用下面两个方法去暴露你所要放行的属性或方法👇 1.useImperativeHandle 2.orwardRef 搭配使用例子 import React, { useState, forwardRef, useImperativeHandle } from "react"function Son(props, ref) {const [data] useStat…...
Python+CoppeliaSim+ZMQ remote API控制机器人跳舞
这是一个使用Python和CoppeliaSim(V-REP)控制ASTI人型机器人进行舞蹈动作的演示项目。 项目描述 本项目展示了如何使用Python通过ZeroMQ远程API与CoppeliaSim仿真环境进行交互,控制ASTI人型机器人执行预定义的舞蹈动作序列。项目包含完整的机…...
oracle rac时区问题导致远程查询时间不准
远程工具SQLDev工具和应用出来的时间都要慢12个小时 检查操作系统和硬件时间 # date Fri Apr 18 15:54:11 CST 2025 date -R Fri, 18 Apr 2025 16:06:24 0800 # hwclock -r Fri 18 Apr 2025 04:08:38 PM CST -0.313786 seconds 都是没有问题,时间和时区都是…...
LPO 光模块:下一代数据中心网络的节能高效新选择
一、LPO 光模块的定义与核心原理 LPO(Linear Pluggable Optics,线性可插拔光模块)是光通信领域针对高速率、低功耗需求推出的创新解决方案。其核心突破在于摒弃传统光模块中的 DSP(数字信号处理)芯片,采用线…...
MCP Server Java 开发框架的体验比较(spring ai mcp 和 solon ai mcp)
目前已知的两个 mcp-server java 应用开发框架(ID类的,封装后体验都比较简洁): spring-ai-mcp,支持 java17 或以上solon-ai-mcp,支持 java8 或以上(也支持集成到 springboot2, jfinal, vert.x …...
OpenCV 图形API(45)颜色空间转换-----将图像从 BGR 色彩空间转换为 YUV 色彩空间函数BGR2YUV()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 将图像从BGR色彩空间转换为YUV色彩空间。 该函数将输入图像从BGR色彩空间转换为YUV。B、G和R通道值的常规范围是0到255。 输出图像必须是8位无符…...
C++入门语法
C入门 首先第一点,C中可以混用C语言中的语法。但是C语言是不兼容C的。C主要是为了改进C语言而创建的一门语言,就是有人用C语言用不爽了,改出来个C。 命名空间 c语言中会有如下这样的问题: 那么C为了解决这个问题就整出了一个命名…...
个性化的配置AndroidStudio
Android Studio 提供诸多向导和模板,可用于验证 Java 开发套件 (JDK) 和可用 RAM 等系统要求,以及配置默认设置,例如经过优化的默认 Android 虚拟设备 (AVD) 模拟和更新的系统映像。本文档介绍了可用于自定义 Android Studio 使用方式的其他配…...
Python-24:小R的随机播放顺序
问题描述 小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌,播放后将其从歌单中移除。如果歌单中还有歌曲,则会将当前第一首歌移到最后一首。这个过程会一直重复,直到歌单中没有任何歌曲。 例如,给定歌单 [5, 3, 2, 1,…...
JavaScript — 总结
介绍 JavaScript是一种广泛应用于Web开发的高级脚本语言,主要用于为网页添加交互功能。作为前端开发的三大核心技术之一,它与HTML(结构)和CSS(样式)协同工作,通过操作DOM元素实现动态内容更新、…...
解决 Ubuntu 下 VTune 无法收集 CPU 硬件时间计数数据的问题
解决 Ubuntu 下 VTune 无法收集 CPU 硬件时间计数数据的问题 在 Ubuntu 上使用 Intel VTune Profiler 时遇到无法收集 CPU 硬件性能计数器数据的问题,通常是由于权限和系统配置问题导致的。以下是解决方案: 1. 检查并加载性能监控模块 首先确保 Linux…...
MySQL《事务》
文章目录 前言一、什么是事务?二、事务的ACID特性三、如何使用事务?3.1 查看支持事务的存储引擎3.2 语法3.3 开启一个事务,执行修改后回滚3.4 开启一个事务,执行修改后提交3.5 保存点3.6 自动/手动提交事务 四、事务的隔离性和隔离…...