当前位置： 首页 > news >正文

Jenkins Nginx Vue项目自动化部署

news 文章来源：https://blog.csdn.net/menglinjie/article/details/144102973 2025/1/7 22:18:29

目录

一、环境准备

1.1 Jenkins搭建

1.2 NVM和Nodejs安装

1.3 Nginx安装

二、Jenkins配置

2.1 相关插件安装

2.2 全局工具安装

2.3 环境变量配置

2.4 邮箱配置（构建后发送邮件）

2.5 任务配置

三、Nginx配置

3.1 配置路由转发

四、部署项目

4.1 构建项目

4.2 启动Nginx

4.3 访问项目

问题

一、环境准备

1.1 Jenkins搭建

参考之前的文章：Jenkins_孟林洁的博客-CSDN博客

1.2 NVM和Nodejs安装

  • 去github下载最新的nvm  nvm下载地址  找到 nvm-setup.zip 点击下载
  • 傻瓜式安装，注意安装路径和nodejs路径（尽量提前创建nvm文件夹和nodejs文件夹，后续会提到有些问题）
  • 验证nvm：nvm version
  • 安装nodejs：nvm install 20.10.0
  • 使用nodejs：nvm use 20.10.0
  • 验证node和npm：node-v npm-v
  • npm配置淘宝镜像：npm config set registry https://registry.npmmirror.com
  • 安装cnpm：npm install -g cnpm --registry=https://registry.npmmirror.com

参考：window下安装并使用nvm（含卸载node、卸载nvm、全局安装npm）-CSDN博客

1.3 Nginx安装

  • Nginux官网  
  • 下载解压缩即可

二、Jenkins配置

2.1 相关插件安装

  • NodeJS
  • Git Parameter
  • Git Parameter
  • Gitee
  • Git

2.2 全局工具安装

NodeJS配置路径

2.3 环境变量配置

Path: D:\soft\Git\usr\bin;D:\soft\nvm\nodejs

2.4 邮箱配置（构建后发送邮件）

 Extended E-mail Notification

  • Default Recipients 默认发件人邮箱
  • Default Subject 默认标题：$PROJECT_NAME - Build # $BUILD_NUMBER - $BUILD_STATUS!
  • Default Content 默认内容如下：（测试报告模块可删除，需要Allure支持）
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>${ENV, var="JOB_NAME"}-第${BUILD_NUMBER}次构建日志</title>
</head><body leftmargin="8" marginwidth="0" topmargin="8" marginheight="4" offset="0"><div width="95%" cellpadding="0" cellspacing="0"style="font-size: 11pt; font-family: Tahoma, Arial, Helvetica, sans-serif"><div>本邮件由系统自动发出，无需回复！<br /><br>各位同事，大家好，以下为${PROJECT_NAME }自动化测试项目构建信息<br /><div><font color="#CC0000">构建结果 - ${BUILD_STATUS}</font></div></div><div><h4><font color="#0B610B">构建信息</font></h4><hr size="2" width="100%" /><ul><li>项目名称 ： ${JOB_NAME}</li><li>构建编号 ： 第${BUILD_NUMBER}次构建</li><li>触发原因： ${CAUSE}</li><li>构建状态： ${BUILD_STATUS}</li><li>构建日志： <a href="${BUILD_URL}console">${BUILD_URL}console</a><li>工作目录&nbsp;：&nbsp;<a href="${PROJECT_URL}ws">${PROJECT_URL}ws</a></li></li><li>构建 Url ： <a href="${BUILD_URL}">${BUILD_URL}</a></li><li>项目 Url ： <a href="${PROJECT_URL}">${PROJECT_URL}</a></li></ul></div><div><h4><font color="#0B610B">测试报告</font></h4><hr size="2" width="100%" /><b>点击查看测试报告： <a href="http://192.168.30.233:8080/job/ ${JOB_NAME}/${BUILD_NUMBER}/allure">http://192.168.30.233:8080/job/hbintrade-ui/${BUILD_NUMBER}/allure</a></b></div><!-- <div><h4><font color="#0B610B">测试结果</font></h4><hr size="2" width="100%" /><div>本次测试共执行<b>${TEST_COUNTS}</b>个用例，成功<b style="color: green">${TEST_COUNTS,var="pass"}</b>个，失败<bstyle="color: red">${TEST_COUNTS,var="fail"}</b>个，跳过<bstyle="color: #FFEB3B">${TEST_COUNTS,var="skip"}</b>个。</div></div> --><div><h4><font color="#0B610B">构建日志 (最后20行):</font><hr size="2" width="100%" align="center" /></h4></div><div><ul><li>${BUILD_LOG, maxLines=22}</li></ul></div></div>
</body></html>

默认构建失败发送邮件

配置邮件通知模块：

qq邮箱/账号与安全/获取授权码，用户名：发件邮箱 密码：授权码

2.5 任务配置

  • 选择自由风格创建项目
  • 配置丢弃策略
  • 分支参数。Git Parameter配置 name:branch_name,默认值：origin/master
  • 源码管理。配置项目地址和Gitee账号凭证，指定分支为：$branch_name

  • 构建步骤。新增Execute shell
cnpm install
npm run build:dev
  • 构建后操作。新增Editable Email Notification 发邮件 使用默认的即可，或者自定义内容模版

  • 需要自动化部署的配置构建触发器

去Gitee webhook里新建填写url和密码

三、Nginx配置

3.1 配置路由转发

server {listen       80;server_name  192.168.30.233; ## 重要！！！修改成你的外网 IP/域名location / { ## 前端项目root   D:\JenkinsData\workspace\xxx-ui\dist;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /admin-api/ { ## 后端项目 - 管理后台proxy_pass http://192.168.30.233:48080/admin-api/;proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}}

四、部署项目

4.1 构建项目

  • 选择hbintrade-ui项目
  • 点击Build with Parameters
  • 选择发布分支
  • 点击Build
  • 点进构建记录，查看日志

 

4.2 启动Nginx

./nginx

4.3 访问项目

ip:80

问题

  • nvm安装完node，node、npm命令无法使用

因为安装nvm时候配置的nodejs的路径不存在，导致环境变量配置有问题。解决：nvm/新建 nodejs 文件夹，修改环境变量指向 nvm/nodejs

  • 执行 npm run 报错 Please verify that the package.json has a valid “main“ entry_please verify that the package.json has a valid "m-CSDN博客

删除node_module 重新执行命令打包

相关文章：

Jenkins Nginx Vue项目自动化部署

目录 一、环境准备 1.1 Jenkins搭建 1.2 NVM和Nodejs安装 1.3 Nginx安装 二、Jenkins配置 2.1 相关插件安装 2.2 全局工具安装 2.3 环境变量配置 2.4 邮箱配置&#xff08;构建后发送邮件&#xff09; 2.5 任务配置 三、Nginx配置 3.1 配置路由转发 四、部署项目 …...

编程日记 2024/12/2 20:00:10

视频汇聚平台Liveweb国标GB28181视频平台监控中心设计

在现代安防视频监控领域&#xff0c;Liveweb视频汇聚平台以其卓越的兼容性和灵活的拓展能力&#xff0c;为用户提供了一套全面的解决方案。该平台不仅能够实现视频的远程监控、录像、存储与回放等基础功能&#xff0c;还涵盖了视频转码、视频快照、告警、云台控制、语音对讲以及…...

编程日记 2024/12/2 19:53:03

文件比较和文件流

文件比较和文件流 一、文本比较工具 diff1.基本用法1.1输出格式 2.常用选项 二、文件流1.文件的打开模式2.文件流的分类ifstreamofstreamfstrem区别 3.文件流的函数1. 构造函数2. is_open 用于判断文件是否打开3. open4. getline5. close6. get()7. read8. write9. put10. gcou…...

编程日记 2024/12/2 19:50:00

【2024最新】基于Springboot+Vue的就业信息管理系统Lw+PPT

作者&#xff1a;计算机搬砖家 开发技术&#xff1a;SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;Java精选实战项…...

编程日记 2024/12/2 19:48:57

PySide6 QSS(Qt Style Sheets) Reference: PySide6 QSS参考指南

Qt官网参考资料&#xff1a; QSS介绍&#xff1a; Styling the Widgets Application - Qt for Pythonhttps://doc.qt.io/qtforpython-6/tutorials/basictutorial/widgetstyling.html#tutorial-widgetstyling QSS 参考手册&#xff1a; Qt Style Sheets Reference | Qt Widge…...

编程日记 2024/12/2 19:46:55

【笔记】成为雍正

观古代历史&#xff0c;不过帝王一家一姓之家史 时间 1662年&#xff0c;田文镜出生。1672年&#xff0c;张廷玉出生。1674年&#xff0c;胤礽出生。1678年&#xff0c;胤禛出生。1679年&#xff0c;年羹尧出生。1680年&#xff0c;鄂尔泰出生。1700年&#xff0c;索额图被赐死…...

编程日记 2024/12/2 19:45:54

Codeforces Round 913 (Div. 3)

题目链接 B. YetnotherrokenKeoard 题意 输入 输出 思路 用两个栈分别维护小写字母下标和大写字母下标&#xff0c;用一个vis数组标记字母是否删除 示例代码 void solve() {string s;cin >> s;int n s.size();vector<bool> vis(n, false);stack<int>sk…...

编程日记 2024/12/2 19:44:53

斐波那契数

C语言实现斐波那契数列的多种方法_斐波那契数列c语言-CSDN博客 题目描述 斐波那契数列为&#xff1a;1,1,2,3,5,8,13.....&#xff0c;常规递推公式f(n)f(n-1)f(n-2); 输入描述 输入一个整数n(0<n<50),为多组数据。 输出描述 输出第n个斐波那契数 样例输入 1 2 4样例输出…...

编程日记 2024/12/2 19:42:51

Redis高阶集群搭建+集群读写

问题 容量不够&#xff0c;redis 如何进行扩容&#xff1f;并发写操作&#xff0c; redis 如何分摊&#xff1f;另外&#xff0c;主从模式&#xff0c;薪火相传模式&#xff0c;主机宕机&#xff0c;导致 ip 地址发生变化&#xff0c;应用程序中配置需要修改对应的主机地址、端…...

编程日记 2024/12/2 19:41:49

Vision Transformer（vit）的主干

图解&#xff1a; 代码&#xff1a; class VisionTransformer(nn.Module):def __init__(self, img_size224, patch_size16, in_c3, num_classes1000,embed_dim768, depth12, num_heads12, mlp_ratio4.0, qkv_biasTrue,qk_scaleNone, representation_sizeNone, distilledFalse,…...

编程日记 2024/12/2 19:39:47

手撸了一个文件传输工具

在日常的开发与运维中&#xff0c;文件传输工具是不可或缺的利器。无论是跨服务器传递配置文件&#xff0c;还是快速从一台机器下载日志文件&#xff0c;一个高效、可靠且简单的文件传输工具能够显著提高工作效率。今天&#xff0c;我想分享我自己手撸一个文件传输工具的全过程…...

编程日记 2024/12/2 19:33:35

Java程序调kubernetes(k8s1.30.7)core API简单示例，并解决403权限验证问题，即何进行进行权限授权以及验证

简单记录问题 一、问题描述 希望通过Java程序使用Kubernetes提供的工具包实现对Kubernetes集群core API的调用&#xff0c;但是在高版本上遇见权限验证问题4xx。 <dependency><groupId>io.kubernetes</groupId><artifactId>client-java</artifact…...

编程日记 2024/12/2 19:30:32

java八股-Redis Stream和RocketMQ实现的解决方案

文章目录 Redis Stream方案&#xff1a;ShortLinkStatsSaveProducer.javaShortLinkStatsSaveConsumer.java RocketMQ方案ShortLinkStatsSaveProducer.javaShortLinkStatsSaveConsumer.java Redis Stream方案&#xff1a; ShortLinkStatsSaveProducer.java package com.nageoff…...

编程日记 2024/12/2 19:28:30

第29天 MCU入门

目录 MCU介绍 MCU的组成与作用 电子产品项目开发流程 硬件开发流程 常用元器件初步了解 硬件原理图与PCB板 常见电源符号和名称 电阻 电阻的分类 贴片电阻的封装说明&#xff1a; 色环电阻的计算 贴片电阻阻值计算 上拉电阻与下拉电阻 电容 电容的读数 二极管 LED 灯电路 钳位作…...

编程日记 2024/12/2 19:25:25

【Python网络爬虫笔记】6- 网络爬虫中的Requests库

一、概述 Requests 是一个用 Python 语言编写的、简洁且功能强大的 HTTP 库。它允许开发者方便地发送各种 HTTP 请求&#xff0c;如 GET、POST、PUT、DELETE 等&#xff0c;并且可以轻松地处理请求的响应。这个库在 Python 生态系统中被广泛使用&#xff0c;无论是简单的网页数…...

编程日记 2024/12/2 19:20:20

Linux网络_网络协议_网络传输_网络字节序

一.协议 1.概念 协议&#xff08;Protocol&#xff09; 是一组规则和约定&#xff0c;用于定义计算机网络中不同设备之间如何进行通信和数据交换。协议规定了数据的格式、传输方式、传输顺序等详细规则&#xff0c;确保不同设备和系统能够有效地互联互通。 在网络通信中&#…...

编程日记 2024/12/2 19:08:07

浅谈网络 | 应用层之流媒体与P2P协议

目录 流媒体名词系列视频的本质视频压缩编码过程如何在直播中看到帅哥美女&#xff1f;RTMP 协议 P2PP2P 文件下载种子文件 (.torrent)去中心化网络&#xff08;DHT&#xff09;哈希值与 DHT 网络DHT 网络是如何查找 流媒体 直播系统组成与协议 近几年直播比较火&#xff0c;…...

编程日记 2024/12/2 19:06:02

css vue vxe-text-ellipsis table 实现多行文本超出隐藏省略

分享 vxe-text-ellipsis table grid 多行文本溢出省略的用法 正常情况下如果需要使用文本超出隐藏&#xff0c;通过 css 就可以完成 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;但是如果需要实现多行文本溢出&#xff0c;就很难实现里&#xff0c;谷歌…...

编程日记 2024/12/2 19:04:01

基于hexo框架的博客搭建流程

这篇博文讲一讲hexo博客的搭建及文章管理&#xff0c;也算是我对于暑假的一个交代 &#xff01;&#xff01;&#xff01;注意&#xff1a;下面的操作是基于你已经安装了node.js和git的前提下进行的&#xff0c;并且拥有github账号 创建一个blog目录 在磁盘任意位置创建一个…...

编程日记 2024/12/2 19:03:00

数据结构-简单排序

一.前提 二.冒泡排序 三.插入排序 #include<iostream> using namespace std; typedef int ElemengType; void Bubble_Sort(ElemengType A[], int N) {for (int p N - 1; p > 0; p--) {int flag 0;for (int i 0; i < p; i) {if (A[i] > A[i 1]) {swap(A[i], …...

编程日记 2024/12/2 19:00:58

三十一：HTTP多种重定向跳转方式的差异

在现代网站开发中&#xff0c;HTTP 重定向是一种常见的技术&#xff0c;用于将用户的请求从一个 URL 跳转到另一个 URL。重定向机制广泛应用于网站迁移、SEO 优化、以及内容管理系统中。不同的 HTTP 状态码代表不同的重定向方式&#xff0c;每种方式的行为和适用场景各有不同。…...

编程日记 2024/12/2 18:57:55

利用Python爬虫精准获取淘宝商品详情的深度解析

在数字化时代&#xff0c;数据的价值日益凸显&#xff0c;尤其是在电子商务领域。淘宝作为中国最大的电商平台之一&#xff0c;拥有海量的商品数据&#xff0c;对于研究市场趋势、分析消费者行为等具有重要意义。本文将详细介绍如何使用Python编写爬虫程序&#xff0c;精准获取…...

编程日记 2024/12/2 18:55:53

架构师的英文：Architect

中文版 软件架构师 的英文是 “Software Architect”。 Software: 软件Architect: 架构师&#xff0c;通常指的是设计和规划某种系统或结构的人。 Software Architect 通常负责软件系统的整体设计、技术选型、架构规划&#xff0c;确保系统的可扩展性、可维护性和高效性等。…...

编程日记 2024/12/2 18:52:51

数据结构 ——— 计数排序算法的实现

目录 计数排序算法的思想 计数排序算法的实现 计数排序算法的思想 遍历数组&#xff0c;找出数组中的最大值 max 和 最小值 min 最大值 max 减去最小值 min 再加 1 得出数组元素的范围 range 利用 range 的大小 malloc 一个 count 数组用来计数 再对 count 数组进行初始化…...

编程日记 2024/12/2 18:50:49

k8s搭建Istio环境，案例pod一直处在Init:CrashLoopBackOff

1 部署calico网络环境&#xff0c;网上去找k8s版本对应的calico的配置文件&#xff0c;k8s2.8.0我用的3.28 2 安装istio环境 curl -L https://istio.io/downloadIstio | sh - # 省略istioctl生效的步骤 source <(istioctl completion zsh) istioctl install --set profile…...

编程日记 2024/12/2 18:49:47

Jenkins升级到最新版本后无法启动

1. 场景还原 最近在web界面将jenkins升级到最新版本后&#xff0c;后台无法启动jenkins服务&#xff0c;服务状态如下&#xff1a; 运行jenkins命令提示invalid Java version jenkins --version jenkins: invalid Java version: java version "1.8.0_202" Java(TM)…...

编程日记 2024/12/2 18:48:46

用户界面创建一个新的运动类型

● 现在我们需要根据我们之前规划的架构步骤来实现在用户界面创建一个运动类型 ● 首先我们在要获取用户在表单中输入的数据 //从表单中获取数据const type inputType.value;const distance inputDistance.value;const duration inputDuration.value;● 然后针对与不同的运动…...

编程日记 2024/12/2 18:46:43

ubuntu防火墙入门(一)——设置服务、关闭端口

本机想通过git clone gitgithub.com:skumra/robotic-grasping.git下载代码&#xff0c;firewall-config中需要为当前区域的防火墙开启SSH服务吗 是的&#xff0c;如果你想通过 git clone gitgithub.com:skumra/robotic-grasping.git 使用 SSH 协议从 GitHub 下载代码&#xff0…...

编程日记 2024/12/2 18:44:38

分治算法——二分查找（c++）（详解）

大家好&#xff0c;今天进入一个实用算法&#xff1a;分治算法。 1.分治算法介绍 分治算法&#xff0c;大概就是将一个大问题拆解成若干个小问题&#xff0c;将小问题一一解决&#xff0c;大问题也就迎刃而解。它包含了多种算法&#xff0c;比如递归、递推等。这里就讲解一下其…...

编程日记 2024/12/2 18:43:37

Binder架构

一、架构 如上图&#xff0c;binder 分为用户层和驱动层两部分&#xff0c;用户层有客户端&#xff08;Client&#xff09;、服务端&#xff08;Server&#xff09;、服务管理&#xff08;ServiceManager&#xff09;。 从用户空间的角度&#xff0c;使用步骤如下&#xff08;…...

编程日记 2024/12/2 18:34:27

wordpress 充值记录/电子商务营销策划方案

这两天一直在搞重定向&#xff0c;问题是一直看不明白&#xff0c;自己弄来弄去&#xff0c;都不成&#xff0c;我的想法是把 http:\\webmail 转到https:\\server\exchange&#xff0c;就是用户输入 http:\\webmail &#xff0c;就可以直接访问 https:\\server\exchange, 但是…...

编程日记 2025/1/7 22:09:04

新闻发布网站如果做/网络营销的十大特点

上一个博客总结了pre-echo和tns。 其实避免Pre-echo的方法不止有tns&#xff0c;还有自适应变换&#xff08;ADT&#xff09;也叫做Adaptive Block Size【1】【2】 【1】麻省理工1991年的Kyle K.Iwai 《Pre-Echo Detection and Reduction》有提到Adaptive Block Size 【2】斯坦…...

编程日记 2025/1/7 21:55:46

吉林做网站哪家好/电商怎么做

文章目录1. 问题描述2. 解决办法1. 问题描述 win10更新至21H1后任务栏中多了一个天气的图标和文本 2. 解决办法 鼠标右键单击任务栏的空白处&#xff0c;鼠标滑到咨询和兴趣那里&#xff0c;然后使用鼠标左键单击关闭...

编程日记 2025/1/7 19:55:54

上海建站模板厂家/流氓网站

ES5和ES6的this指向不同&#xff0c; 原因在于ES5中的this指向是在执行时。 而ES6中的this指向是在定义时&#xff0c;下面我用代码去说明this指向问题 let obj {//这个上下文环境是windowthist: this,names :"小张",foo:function(){//这个上下文环境是objsetInter…...

编程日记 2025/1/7 18:38:31

做网站茶叶首页标题怎么写/搜索关键词排名一般按照什么收费

axis()函数概述 axis()函数是一个坐标轴配置的方便接口。 axis()的函数签名为matplotlib.pyplot.axis(*args, emitTrue, **kwargs)。 axis()的调用签名为&#xff1a; xmin, xmax, ymin, ymax axis()xmin, xmax, ymin, ymax axis([xmin, xmax, ymin, ymax])xmin, xmax, ymi…...

编程日记 2025/1/7 17:59:31

哪些网站可以做企业推广/武汉seo首页优化技巧

传送门 题意&#xff1a;研究证明&#xff0c;互联网上任何一个网页在平均情况下最多只需要单击19次就可以到达任意一个网页。如果把网页看成一个有向图中的结点&#xff0c;则该图中任意两点间最短距离的平均值为19。现在输入一个n个点的有向图&#xff0c;假定任意两个点之间…...

编程日记 2025/1/7 16:07:34