Jenkins+Svn+Vue自动化构建部署前端项目(保姆级图文教程)

目录

介绍

准备工作

配置jenkins

构建部署任务

常见问题


介绍

在平常开发前端vue项目时,我们通常需要将vue项目进行打包构建,将打包好的dist目录下的静态文件上传到服务器上,但是这种繁琐的操作是比较浪费时间的,可以使用jenkins进行自动化构建部署前端vue

准备工作

准备vue项目,服务器,linux,ubuntu,centos等都可以,服务器上已经安装好node环境并配置淘宝镜像源,jenkins,nginx作为前端静态资源访问服务器等

nginx中在nginx.conf中配置前端静态文件路径

安装并查看node环境

如果安装后输入 node -v后没有出现对应的node版本可以手动配置下环境变量

来到 /etc 目录下找到profile文件

编辑profile添加 node环境变量并手动设置淘宝镜像源

# jdk环境变量
export JAVA_HOME=/usr/local/java/jdk1.8.0_321
export JRE_HOME=/usr/local/java/jdk1.8.0_321/jre
export CLASS_PATH=.:$JAVA_HOME/lib:$JRE_HOME/lib
export PATH=$PATH:$JAVA_HOME/bin:$JRE_HOME/bin# maven环境变量
export MAVEN_HOME=/usr/share/maven/bin
export PATH=$MAVEN_HOME/bin:$PATH# node环境变量
export PATH=/usr/bin:$PATH
# 配置淘宝镜像源
export NPM_CONFIG_REGISTRY=https://registry.npmmirror.com

如果不知道node环境变量地址可以手动查询下node安装的目录

配置jenkins

来到jenkins页面先安装一些node相关插件

 然后配置系统变量

 配置好后保存即可

构建部署任务

来到首页进行任务创建

 创建后进行任务配置

这里以svn作为远程仓库源演示

配置仓库地址和凭证

往下翻滚找到增加构建步骤

选择执行shell命令

书写shell脚本

# 来到jenkins拉取远程仓库源码后的目录
cd /var/lib/jenkins/workspace/pileweb
# 查看node版本
node -v
# 安装前端所需模块依赖
npm install 
# 删除之前打包的dist目录
rm -rf ./dist/*  
# 执行构建
npm run build
# 将nginx监听的前端静态资源目录权限给jenkins
sudo chmod 777 /data/project/pileweb
# 删除原有的前端静态资源目录下的静态资源
sudo rm -rf /data/project/pileweb/*  
# 将jenkins构建后的dist下的文件复制到nginx监听的前端静态资源目录下
cp -rf ./dist/* /data/project/pileweb
# 重启nginx
sudo systemctl restart nginx

保存应用即可

来到首页选择对应的项目进行执行构建

可以点击进入查看控制台输出日志

 

构建成功

输入前端路径进行查看

 部署成功(*^▽^*)

后续前端只需要提交代码到远程仓库,再手动点击下构建等待几分钟就可以了

常见问题

有时在执行删除旧有静态资源目录下的静态资源时会报错jenkins没有权限

rm: cannot remove '/data/project/pileweb/map/json/province/xinjiang.json': Permission denied
rm: cannot remove '/data/project/pileweb/map/json/china-cities.json': Permission denied
rm: cannot remove '/data/project/pileweb/map/json/china.json': Permission denied
rm: cannot remove '/data/project/pileweb/word/wxkefumd.docx': Permission denied
Build step 'Execute shell' marked build as failure
Finished: FAILURE

可以在将jenkins的用户权限设置为root用户使用

来到 /etc/init.d目录下找到jenkins文件将jenkins调整为root用户

新加两行

JENKINS_USER="root"
JENKINS_GROUP="root"

 有的因为jenkins版本原因可能还需要在 /etc/default 目录下的jenkins文件中也加上这两行

 加好后来到 jenkins目录下重启下jenkins即可

来到jenkins目录下

cd /etc/init.d

停止jenkins

./jenkins stop

启动jenkins

./jenkins start

 

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

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

相关文章

《粮食科技与经济》是什么级别的期刊?是正规期刊吗?能评职称吗?

​问题解答 问:《粮食科技与经济》是不是核心期刊? 答:不是,是知网收录的第一批认定学术期刊。 问:《粮食科技与经济》级别? 答:省级。主管单位: 湖南省粮食和物资储备局 …

bat批处理实现从特定文件夹中提取文件内容并以父文件夹名存储

1、需求分析 标题是bat批处理实现从特定文件夹中提取文件内容并以父文件夹名存储。这里面我们要做的工作是: ①、批处理脚本使用的是bat文件; ②、文件夹下面有很多子文件夹,然后子文件夹下仍然有相同的文件结构,我们需要从三级…

halcon 自定义距离10的一阶导数幅图,摆脱sobel的3掩码困境

一,为什么要摆脱3的掩码 在处理图像的过程中,会用到平滑算子,很容易破坏边际,所谓的一阶导数sobel只计算掩码为3的差分,在幅度图分割中,往往是很难把握的。 举个例子-现在图像头平滑好了,缺陷…

模具要不要建设3D打印中心

随着3D打印技术的日益成熟与广泛应用,模具企业迎来了自建3D打印中心的热潮。这一举措不仅为企业带来了前所未有的发展机遇,同时也伴随着一系列需要克服的挑战,如何看待企业引进增材制造,小编为您全面分析。 机遇篇: 加…

Codeforces Round (Div.3) C.Sort (前缀和的应用)

原题: time limit per test:5 seconds memory limit per test:256 megabytes You are given two strings a and b of length n. Then, you are (forced against your will) to answer q queries. For each query, you are given a range …

FPGA开发:Verilog数字设计基础

EDA技术 EDA指Electronic Design Automation,翻译为:电子设计自动化,最早发源于美国的影像技术,主要应用于集成电路设计、FPGA应用、IC设计制造、PCB设计上面。 而EDA技术就是指以计算机为工具,设计者在EDA软件平台上…

240907-Gradio渲染装饰器Render-Decorator

A. 最终效果 B. 示例代码 import gradio as gr import gradio as grwith gr.Blocks() as demo:input_text gr.Textbox()gr.render(inputsinput_text)def show_split(text):if len(text) 0:gr.Markdown("## No Input Provided")else:# for letter in text:for lett…

代码随想录训练营day37|52. 携带研究材料,518.零钱兑换II,377. 组合总和 Ⅳ,70. 爬楼梯

52. 携带研究材料 这是一个完全背包问题&#xff0c;就是每个物品可以无限放。 在一维滚动数组的时候规定了遍历顺序是要从后往前的&#xff0c;就是因为不能多次放物体。 所以这里能多次放物体只需要把遍历顺序改改就好了 # include<iostream> # include<vector>…

2024/9/6黑马头条跟学笔记(四)

D4内容介绍 阿里三方安全审核 分布式主键 异步调用 feign 熔断降级 1.自媒体文章自动审核 1.1审核流程 查文章——调接口文本审核——minio下载图片图片审核——审核通过保存文章——发布 草稿1&#xff0c;失败2&#xff0c;人工3&#xff0c;发布9 1.2接口获取 注册阿…

How can I load the openai api configuration through js in html?

题意&#xff1a;怎样在HTML中通过JavaScript加载OpenAI API配置 问题背景&#xff1a; I am trying to send a request through js in my html so that openai analyzes it and sends a response, but if in the js I put the following: 我正在尝试通过HTML中的JavaScript发…

Qt/C++ 个人开源项目#串口助手(源码与发布链接)

一、项目概述 该串口助手工具基于Qt/C开发&#xff0c;专为简化串口通信调试与开发而设计&#xff0c;适合新手快速上手。工具具有直观的用户界面和丰富的功能&#xff0c;旨在帮助用户与串口设备建立可靠通信&#xff0c;便于调试、数据传输和分析。 二、主要功能 波特率&a…

【信创建设】信息系统信创建设整体技方案(word原件完整版)

信创&#xff0c;即“信息技术应用创新”。我国自主信息产业聚焦信息技术应用创新&#xff0c;旨在通过对IT硬件、软件等各个环节的重构&#xff0c;基于我国自有IT底层架构和标准&#xff0c;形成自有开放生态&#xff0c;从根本上解决本质安全问题&#xff0c;实现信息技术可…

多款式随身WiFi如何挑选,USB随身WiFi、无线电池随身WiFi、充电宝随身WiFi哪个好?优缺点分析!

市面上的随身WiFi款式多样琳琅满目&#xff0c;最具代表性的就是USB插电款、无线款和充电宝款。今天就来用一篇文章分析一下这三种款式的优缺点。 USB插电款 优点&#xff1a;便宜&#xff0c;无需充电&#xff0c;在有电源的地方可以随时随地插电使用&#xff0c;比如中兴的U…

Spring Boot 部署方案!打包 + Shell 脚本详解

本篇和大家分享的是springboot打包并结合shell脚本命令部署&#xff0c;重点在分享一个shell程序启动工具&#xff0c;希望能便利工作&#xff1b; profiles指定不同环境的配置 maven-assembly-plugin打发布压缩包 分享shenniu_publish.sh程序启动工具 linux上使用shenniu_p…

python进阶篇-day07-高级语法与正则

day07-python其他高级语法 一. with(上下文管理) 介绍 概述 一个类只要实现了__ enter __ () 和 __ exit __ ()方法, 这个类就是一个上下文管理器类, 该类的对象 上下文管理器对象 目的 节约资源, 提高效率, 避免手动释放资源, 且出bug的时候, 也会自动尝试释放资源 特点…

【Centos】绕开报错ModuleNotFoundError: No module named ‘dnf‘

问题原因&#xff1a; 安装python3.9后不能使用yum Traceback (most recent call last):File "/usr/bin/yum", line 57, in <module>from dnf.cli import main ModuleNotFoundError: No module named dnf绕开yum解决方法&#xff1a; 直接下载相关依赖包 htt…

怎样将手机屏幕(远程)投屏到家里的大电视上?

我不住家里&#xff0c;前几次回去都会替老爸老妈清理手机。这两个星期没空回去&#xff0c;老爸吐槽手机用几天就又卡了&#xff0c;其实就是清理一些手机缓存的问题。 我说我远程控制他的手机&#xff0c;给他清理一下。他一听“控制”就不喜欢&#xff0c;说我大了&#xf…

【Python知识宝库】文件操作:读写文件的最佳实践

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 前言一、文件读取1. 使用open函数2. 逐行读取3. 使用readlines和readline 二、文件写入1. 写入文本2. 追加内容3. 写入…

使用shell脚本安装mysql8,进行主从备份配置

思路 在3台主机上安装mysql进行主从备份配置 使用rpm包yum安装mysql 首先&#xff0c;我们要准备好安装文件&#xff0c;首先下载rpm包 wget -P "/opt/" https://repo.mysql.com//mysql80-community-release-el7-3.noarch.rpm 然后执行安装&#xff08;默认已配置…

HMI设计:嵌入式设备和电脑的差异化,工控领域首选。

嵌入式设备属于专机专用&#xff0c;电脑是通用&#xff0c;从性能、用途、特殊能力、成本、通信上嵌入式设备完全优于电脑&#xff0c;是工控领域的首选。 嵌入式设备和电脑在很多方面有着显著的差异&#xff0c;主要体现在以下几个方面&#xff1a; 1. 设计用途&#xff1a…