Jenkins构建打包部署前端Vue项目至Nginx

原创 已于 2022-11-26 22:51:22 修改 · 4.5k 阅读 · 23 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jenkins #持续构建 #nginx #vuew

于 2019-12-12 10:18:29 首次发布
本文详细介绍了如何在Linux环境下安装Jenkins，配置NodeJs插件，创建并执行Jenkins项目，实现自动化构建流程。同时，提供了PublicOverSSH插件的安装配置教程，以及常见错误的解决方案。

目录:

一. 安装jenkins

参考:linux安装jenkins

二. 安装NodeJs插件并配置

在这里插入图片描述
在这里插入图片描述

显示上面两行则表示安装成功, 然后回到首页, 点击’系统管理’->‘全局工具配置’:
在这里插入图片描述
在这里插入图片描述
点击保存即配置完成.

三. 创建jenkins项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
选择增加构建步骤->执行shell:
在这里插入图片描述
选择增加构建步骤->Send files or execute commands over SSH:
在这里插入图片描述
点击保存, 创建完成!

四.执行构建

点击’立即构建’:
在这里插入图片描述
构建控制台输出:
在这里插入图片描述
进入服务器查看:
在这里插入图片描述
大功告成!

附录I: Public Over SSH插件安装及配置

1.点击-系统管理-插件管理-可选插件中 直接搜 publish over ssh 点击安装，安装完之后，重启jenkins
2.点击-系统管理-系统配置:
在这里插入图片描述
在这里插入图片描述
点击保存即可.

附录II: 可能会遇到的报错

1.npm ERR! missing script: build

在这里插入图片描述
解决:
在配置执行shell时命令: npm run build, 实际前端构建时加上了环境参数, 我的项目在此处将shell命令修改成一下便可成功: npm run build:prod, 保存然后再次执行构建.

【项目部署】使用Jenkins一键打包部署前端Vue应用
Java升级之路的博客
10-13 2186
嗨，大家好，我是希留，一个被迫致力于全栈开发的老菜鸟。上一篇文章我们讲到了使用Jenkins一键打包部署SpringBoot应用，这一次我们来讲下如何一键打包部署前端应用，以Vue前端应用为例。本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
最新发布
会写代码的饭桶
10-14 1273
本文详细介绍了基于Jenkins+Node.js+Nginx的Vue项目自动化构建部署方案。通过配置Jenkins插件、Node.js环境（适配CentOS7系统库）和SSH远程连接，实现代码提交后自动构建打包。重点解决了依赖冲突、路径错误等常见问题，并提供了参数化部署目录功能。最后总结了GLIBC版本缺失、文件推送路径错误等问题的排查方法，确保整个流程稳定可靠，实现从开发到部署的全自动化。
Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境
飞鸽FlyGo-把自己作为一款产品来打磨，提升产品的体验，锻造出最好的自己。
05-23 1885
Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境。 总体步骤流程概览；环境为CentOS7 系统环境，安装node.js 和 npm；yarn打包命令无法使用问题及目录权限问题。
Jenkins 打包部署 vue项目
long_cheng_lv的博客
08-05 6944
Jenkins 打包部署 vue项目
Jenkins打包前端Vue项目
Amakusa的博客
08-03 878
如果还需要构建后发送到发布服务器，则需要配置Publish Over SSH来进行发送，但是我这里并不需要，所以就到此结束了。）这一代码管理仓库，所以需要在插件中安装Subversion Plug-in来使Jenkins支持SVN代码仓库。如果这一步安装不上，可以多尝试几次，也可以使用尝试魔法。在Jenkins中安装插件：NodeJS Plugin。因为前面已经配置好了Node环境，没有必要再安装。环境，需要注意Node.js的版本。由于我的环境使用到了SVN（创建一个自由风格项目。
【Vue】——Jenkins自动打包部署VUE项目
...
10-22 3374
个人理解，Jenkins其实是把我们平时打包部署项目的操作弄成一个流程了，按照我们平时打包部署项目的流程去思考，然后找到对应在Jenkins中如何配置就可以实现基础的打包上传部署。
Jenkins nginx自动化构建前端vue项目
lchmyhua88的博客
06-23 1690
在现代的Web开发中，Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目，使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署（CI/CD）工具，为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自动化构建Vue.js项目的步骤。
Jenkins & Nginx & Vue项目自动化部署
孟林洁的博客
11-28 1481
因为安装nvm时候配置的nodejs的路径不存在，导致环境变量配置有问题。解决：nvm/新建 nodejs 文件夹，修改环境变量指向 nvm/nodejs。qq邮箱/账号与安全/获取授权码，用户名：发件邮箱 密码：授权码。去Gitee webhook里新建填写url和密码。nvm安装完node，node、npm命令无法使用。删除node_module 重新执行命令打包。1.3 Nginx安装。NodeJS配置路径。默认构建失败发送邮件。
使用vite打包并部署vue项目到nginx
m0_74825003的博客
03-02 950
在。
使用Jenkins部署前端Vue项目和后端Java服务
我可能是个Siri
02-28 1762
Jenkins安装相关插件，供后续使用（Dashboard - Manage Jenkins - Plugins）配置内置的工具及其版本 （Dashboard - Manage Jenkins - Tools）​​​​​比如 Maven JDK Git NodeJS Docker等添加凭据，如SSH Private Key 用于拉取远程代码（Dashboard - Manage Jenkins - Credentials）​​​​​。
jenkins自动部署vue前端项目
08-15
jenkins自动打包vue前后端分离项目，部署到远程服务器
Jenkins | 一键打包部署Vue前端应用
hzj_java的博客
11-05 1435
一、前言 1、本文主要内容 ​ 将在项目中实际使用到的相关东西整理记录一波，同时可以方便其他同学在使用到的时候参考一下（自己也备忘），有不对的地方，欢迎指出~~ 记录下如何使用Jenkins自动打包、部署Vue前端应用（对于所有前后端分离的前端静态项目都通用) 前端代码如何打成Docker镜像 3、本篇环境信息 服务器 操作系统 硬件配置 IP 说明 CentOS 7 4C16G 10.133.28.54 部署Jenkins Jenkins版本 Jenkins安装包有两种，一
jenkins部署vue前端项目
G_whang的博客
07-12 942
本文介绍了使用Jenkins部署前端Vue项目的完整流程。首先通过源码编译安装Nginx作为前端服务器，配置好静态文件目录。接着在Jenkins中创建任务，配置Git源码地址，并通过Shell脚本完成依赖安装（处理了chromedriver和node-sass的安装问题）、项目构建、以及将生成的dist目录部署到Nginx的过程。文章详细记录了构建过程中遇到的权限问题和依赖安装错误，并提供了解决方案。最终实现前端项目的自动化部署，成功通过浏览器访问部署后的Vue应用。该方法避免了每次手动部署的繁琐操作，提高
jenkins部署VUE前端项目
不会写后端的前端不是一个好运维。
06-14 4913
阅读下面文档前默认已经会Jenkins基本操作。 1，Jenkins构建中心的全局工具处配置nodejs工具 2，新建节点加入Jenkins中， 3，创建前端自由风格job,（根据自身情况来，也可以在已有节点上部署） 4，复制构建产物到指定项目路径 配置nodejs工具 登录Jenkins找到Global Tool Configuration选项 这里我选择的是Install automatically（自动安装），可以在version处自行选择版本 如果Jenkins无法访问外网，也可以手动在服务器
jenkins从gitlab上部署前端vue项目
程序猿的傻白甜
07-05 616
创建存储位置chown -R 1000:1000 /dockerdata/jenkins/ 给uid为1000的权限启动。
jenkins 部署前端项目Vue
感冒石头的博客
05-14 887
等待完善自己博文 文章来源：jenkins自动化部署vue_Jeffery的博客-优快云博客_jenkins vuejenkins脚本 vue H5页面部署情况第一种情况 npm install && npm run prod_build ##自动备份 Date=`date "+%Y-%m-%d-%H:%M:%S"` cp /mnt/jenkins/workspace/online_client_im_pc_web/dist_client_im_pc_web/client_im_pc_
jenkins上部署前端vue项目
ybb_ymm的专栏
07-31 734
在这里默认读者已经安装完jenkins，如有没有安装的可参照jenkins安装与部署 配置步骤按照以下图片操作即可 注：此处的nodejs14是需要在系统管理-》全局工具配置 中配置以下nodejs 在这之前，需要先安装nodejs插件 注：deploy.sh（存放到目标服务器的/tools/soft/html文件夹内） 脚本的内容 #!/bin/bash tar -xzvf $1 -C $2 find $2 -name "*.tar.gz" -ex...
Jenkins自动化部署前端Vue项目
积跬步，至千里。
06-06 1890
基于Linux服务器已安装Jenkins条件下，并且会基本配置与基本使用，则可使用Jenkins自动化部署前端Vue项目。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值