Jenkins自动化部署Vue3项目至K8S实践

已于 2024-06-15 11:37:20 修改
阅读量339 收藏 1
点赞数 1
分类专栏： 精选实践 干货 文章标签： vue.js 前端 javascript
于 2023-11-21 12:06:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sjshenjian/article/details/134528801
版权
本文详细介绍了如何实现Vue项目在Jenkins上的自动化部署，包括需求描述、效果展示、采用的技术（Jenkins、K8S、Docker、Nginx）以及具体的实施步骤，如配置default.conf、nginx.conf、Dockerfile、K8S脚本和Jenkinsfile。通过配置，当uat分支提交时，UAT项目将自动发布，而master分支则需要管理员手动发布。
摘要由CSDN通过智能技术生成

本文主要实现了提交代码后，触发Jenkins自动化部署Vue项目至K8S

1. 需求描述

我们希望提交uat分支时，UAT项目能够自动发布，提交master分支时，无需自动发布，管理员手工发布

2. 效果展示

Jenkins各阶段构建状态如图所示：

K8S容器状态如图所示：

3. 采用技术

Jenkins + K8S + Docker + Nginx

4. 具体实现
4.1 编写default.conf

在Vue项目根目录新建default.conf文件，主要进行代理配置、首页配置、端口配置，需修改实际api与IP端口配置

server
算法小生Đ
关注
专栏目录
使用Jenkins自动化部署Vue.js项目——兼容Vue CLI3生成的项目
仰望星空的代码
10-13 8665
Jenkins是非常流行的持续集成工具。使用Jenkins部署服务器端应用程序是非常方便的，那么使用Jenkins部署web前端应用程序效果怎么样呢，如果可以使用Jenkins部署，那么就可以直接从版本库自动拉取，自动构建，相比传统方式会省去很多麻烦。 一、准备 服务器上已经安装并配置好了Jenkins。 二、部署步骤 1、新建任务。点击左侧导航“新建任务”，跳转到新建任务页面，输入任务名...
vue前端使用Jenkins自动构建项目，保姆级教程
Admin_yws的博客
03-22 4203
实现前端vue项目自动化
云服务器使用jenkins+nginx自动化构建部署vue3+gitee项目
最新发布
weixin_48474066的博客
08-17 723
文章中有部分操作具有优化空间，如文件覆写权限等，对于jenkins的自动化流程也有多种选择，本文选择的仅是选择了其中一种方式，jenkinsfile文件还可以直接写在前端项目中，具体搭建部署过程中可以根据自身实际情况灵活选择调整。
vue项目jenkins自动化部署
2401_84152092的博客
04-08 827
由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容，详细完整版的JavaScript面试题文档，或更多前端资料可以点此处获取。含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）[外链图片转存中…(img-KUebOXw9-1712542902137)][外链图片转存中…(img-2rZan8FR-1712542902138)]
【Jenkins】部署vue项目（多种方式部署）
热门推荐
怀着一颗学徒的心
07-24 1万+
🥕第一种 （npm run build）打包的形式 🥕第二种 （npm run test）直接启动的形式 🥕第三种 使用docker镜像打包脚本
jenkins发布vue项目 到k8s
山巅
01-08 1814
jenkins发布vue项目 到k8s一、定义参数、环境变量二、从gitlab拉取代码三、 打包生成静态文件四、通过yaml文件部署nginx到k8s五、把打包后的文件放到nginx解析目录下六、配置nginx 反向代理到后端接口 一、定义参数、环境变量 pipeline { agent any parameters { string(name: 'project_name', defaultValue: 'xx-ui', description: '项目名称')
使用jenkins自动发布前端项目【vue3】
qq_38032510的博客
08-16 995
发布的流程的就是：1. 提交代码到git2. jenkins拉取代码到工作空间3.利用npm install 暗转依赖，和使用npm run build 打包。这里一般比较慢 容易失败。可以在jenkins的shell脚本里面加上echo “npm更换成cnpm”echo "安装依赖"...
k8s中Jenkins流水线配置自动化部署java+vue等服务.rar
06-10
通过Jenkins流水线发布Java服务到k8s集群上，主要是通过在Jenkins slave上集成宿主机docker，helm，kubectl工具来打包镜像部署服务到k8s集群上。
Jenkins自动构建vue项目并部署至Kubernetes
walkon1007的博客
03-12 922
目录一、安装JavaScript 运行环境Node.js二、配置Jenkins三、补充四、参考文档 本文基于上一篇文章的测试环境，通过jenkins构建一个简单的vue项目，并部署至上文的k8s集群中。 上文链接：https://blog.csdn.net/walkon1007/article/details/112769224 一、安装JavaScript 运行环境Node.js 下载地址：https://nodejs.org/en/download/ 我直接下载了二进制文件： wget https://
使用jenkins-pipeline进行利用项目文件自动化部署到k8s上
qq_43470725的博客
03-18 1550
若要通过Gitee webhook来触发Jenkins上的构建任务，在Gitee仓库的Webhook配置界面，需要填入上述Jenkins服务器的Webhook URL地址，这样一旦Gitee仓库有新的提交，就会向该地址发送消息从而触发对应的构建流程。**Quiet period：**是指在源代码仓库发生变更后，流水线在触发新的构建之前等待的一段时间。**Advanced Project Options：**是指一系列更深层次的配置项，用于对项目的构建、执行和管理进行更加细致、定制化的设置。
Jenkins构建项目并部署到K8S实践
a492391142的博客
11-29 1338
CICD部署到K8S集群
docker+jenkins 容器化,自动化部署vue3+vite前端项目
mylove_non的博客
07-14 1742
docker+jenkins 容器化,自动化部署vue3+vite前端项目
vue项目通过jenkins部署到K8s
weixin_37069728的博客
08-03 1748
前端vue部署的项目自动打包发布部署到K8S上
K8s部署Vue应用
goodmentc的专栏
04-17 7720
的
使用jenkins部署vue前端项目
qq_35101267的博客
05-23 2115
jenkins安装过程略！ linux安装git过程略（本君是centos7）！ linux安装node过程略（本君是v8）！ 1:预先配置好git，如下图，点击manager jenkins； 2:点击“global tool configuration”，如下图； 3:配置git，name随意，path to git executable可以用命令 whereis git查询，默认都是图中路径； 4:配置node，本君linux安装的就是8.11.2，所以versio...
把 vue 项目打包成镜像推到 k8s 上
smile_tianya的博客
03-28 3510
教你三分钟 把 vue 项目打包成镜像推到 k8s 上
jenkins自动构建部署vue
皓亮君的博客
11-11 1万+
文章目录简介jenkins安装1.安装JDK2.安装jenkins3.配置jenkis的端口4.启动jenkins5.打开jenkins6.安装插件发布vue项目1.安装NodeJS插件2.配置git和NodeJS环境安装配置git安装配置NodeJS自动下载会出现在构建任务的时候卡半天 (不推荐)手动下载NodeJS压缩包上传到服务器指定位置3.配置git凭证信息4.新建任务配置git地址和凭证信息指定分支设置项目的自动发布的触发条件配置构建环境设置构建参数和执行的命令5.立即构建项目 简介 Jenkin
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

算法小生Đ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值