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,一经查实,立即删除!

相关文章

如何设计实现完成一个FPGA项目

设计并完成一个FPGA项目是一个复杂但非常有价值的工程任务。以下是一个详细的步骤指南,帮助你从零开始完成一个FPGA项目。 1. 项目定义与需求分析 确定项目目标:明确项目要实现的功能和性能指标。需求分析:列出所有功能需求、性能需求、接口需求等。可行性分析:评估技术可…

Linux操作系统命令集(一)

最近开了操作系统的课,弄着虚拟机的linux系统命令学学 文件和目录操作命令: ls:列出目录内容 示例:ls -l 以长格式列出目录内容cd:切换目录 示例:cd /home/user 切换到 /home/user 目录mkdir:…

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

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

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接口获取 注册阿…

fetch-event-source 如何通过script全局引入

fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢&#xff1f;需要加上typemodule。今天介绍另一种方法 下载源码文件&#xff1a; https://github.com/Azure/fetch-event-source.git 安装: npm install --save-dev webp…

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发…

2024前端面试题分享

前言 最近忙着面试很久没有更新文章了&#xff0c;分享一下我收集的前端面经&#xff0c;当然题目仅供参考&#xff08;乞求秋招offer&#xff09; 面试题 响应式布局 ---根据用户的的窗口变化而变化的布局方式 react 的hooks ---官方提供的钩子和自定义的钩子&#xf…

嵌入式面试经典30问:二

1. 嵌入式系统中&#xff0c;如何选择合适的微控制器或微处理器&#xff1f; 在嵌入式系统中选择合适的微控制器&#xff08;MCU&#xff09;或微处理器&#xff08;MPU&#xff09;时&#xff0c;需要考虑多个因素以确保所选组件能够满足项目的具体需求。以下是一些关键步骤和…

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…

MATLAB基础应用精讲-【数模应用】正交实验

目录 前言 算法原理 什么是正交实验 在测试中的作用 使用正交试验法的原因 什么是正交试验法? 正交实验基本设计思想 正交表 正交实验的操作方法 正交实验结果分析方法 SPSSAU 正交实验案例 1、背景 2、理论 3、操作 5、文字分析 6、剖析 疑难解惑 正交表和…

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

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