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

已于 2022-11-26 22:51:22 修改
阅读量4.5k 收藏 23
点赞数
CC 4.0 BY-SA版权
分类专栏： 框架搭建工具 文章标签： jenkins 持续构建 nginx vuew
于 2019-12-12 10:18:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lx_nhs/article/details/103503412
本文详细介绍了如何在Linux环境下安装Jenkins，配置NodeJs插件，创建并执行Jenkins项目，实现自动化构建流程。同时，提供了PublicOverSSH插件的安装配置教程，以及常见错误的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录:

一. 安装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 2094
嗨，大家好，我是希留，一个被迫致力于全栈开发的老菜鸟。上一篇文章我们讲到了使用Jenkins一键打包部署SpringBoot应用，这一次我们来讲下如何一键打包部署前端应用，以Vue前端应用为例。本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。
Jenkins打包前端Vue项目
Amakusa的博客
08-03 815
如果还需要构建后发送到发布服务器，则需要配置Publish Over SSH来进行发送，但是我这里并不需要，所以就到此结束了。）这一代码管理仓库，所以需要在插件中安装Subversion Plug-in来使Jenkins支持SVN代码仓库。如果这一步安装不上，可以多尝试几次，也可以使用尝试魔法。在Jenkins中安装插件：NodeJS Plugin。因为前面已经配置好了Node环境，没有必要再安装。环境，需要注意Node.js的版本。由于我的环境使用到了SVN（创建一个自由风格项目。
Jenkins自动化构建部署Java、Web前后端项目(炒鸡炒鸡详细！少走很多坑)~
qq_57404736的博客
06-11 1439
本文主要讲解了如何安装Jenkins，以及使用Jenkins自动化构建部署Java、Web项目，避免踩坑！
Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境
飞鸽FlyGo-把自己作为一款产品来打磨，提升产品的体验，锻造出最好的自己。
05-23 1846
Jenkins自动化运维-打包部署Vue前端项目(1):搭建打包部署环境。 总体步骤流程概览；环境为CentOS7 系统环境，安装node.js 和 npm；yarn打包命令无法使用问题及目录权限问题。
Jenkins 打包部署 vue项目
long_cheng_lv的博客
08-05 6860
Jenkins 打包部署 vue项目
【项目部署】解放双手，使用Jenkins一键打包部署前端Vue应用
小王的技术库
10-18 3856
本文介绍了docker安装nginx，以及Jenkin配置node环境来打包部署前端应用。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
【Vue】——Jenkins自动打包部署VUE项目
...
10-22 3100
个人理解，Jenkins其实是把我们平时打包部署项目的操作弄成一个流程了，按照我们平时打包部署项目的流程去思考，然后找到对应在Jenkins中如何配置就可以实现基础的打包上传部署。
Jenkins nginx自动化构建前端vue项目
lchmyhua88的博客
06-23 1571
在现代的Web开发中，Vue.js已经成为一种非常流行的JavaScript框架。为了更高效地管理和部署Vue.js项目，使用自动化构建工具是至关重要的。Jenkins作为一款强大的持续集成和持续部署（CI/CD）工具，为我们提供了一种便捷的方式来自动化构建Vue.js项目。本文将介绍如何在Jenkins中配置和使用自动化构建Vue.js项目的步骤。
Jenkins打包部署Vue项目至远程服务器
我是海贼王
09-02 1608
Jenkins打包部署Vue项目至远程服务器 Jenkins打包部署gitee项目至阿里云ECS服务器 Jenkins安装及基础环境配置 Jenkins配置SSH免密登录
使用Jenkins部署前端Vue项目和后端Java服务
我可能是个Siri
02-28 1635
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 1394
一、前言 1、本文主要内容 ​ 将在项目中实际使用到的相关东西整理记录一波，同时可以方便其他同学在使用到的时候参考一下（自己也备忘），有不对的地方，欢迎指出~~ 记录下如何使用Jenkins自动打包、部署Vue前端应用（对于所有前后端分离的前端静态项目都通用) 前端代码如何打成Docker镜像 3、本篇环境信息 服务器 操作系统 硬件配置 IP 说明 CentOS 7 4C16G 10.133.28.54 部署Jenkins Jenkins版本 Jenkins安装包有两种，一
jenkins部署vue前端项目
最新发布
G_whang的博客
07-12 358
本文介绍了使用Jenkins部署前端Vue项目的完整流程。首先通过源码编译安装Nginx作为前端服务器，配置好静态文件目录。接着在Jenkins中创建任务，配置Git源码地址，并通过Shell脚本完成依赖安装（处理了chromedriver和node-sass的安装问题）、项目构建、以及将生成的dist目录部署到Nginx的过程。文章详细记录了构建过程中遇到的权限问题和依赖安装错误，并提供了解决方案。最终实现前端项目的自动化部署，成功通过浏览器访问部署后的Vue应用。该方法避免了每次手动部署的繁琐操作，提高
jenkins部署VUE前端项目
不会写后端的前端不是一个好运维。
06-14 4859
阅读下面文档前默认已经会Jenkins基本操作。 1，Jenkins构建中心的全局工具处配置nodejs工具 2，新建节点加入Jenkins中， 3，创建前端自由风格job,（根据自身情况来，也可以在已有节点上部署） 4，复制构建产物到指定项目路径 配置nodejs工具 登录Jenkins找到Global Tool Configuration选项 这里我选择的是Install automatically（自动安装），可以在version处自行选择版本 如果Jenkins无法访问外网，也可以手动在服务器
jenkins从gitlab上部署前端vue项目
程序猿的傻白甜
07-05 581
创建存储位置chown -R 1000:1000 /dockerdata/jenkins/ 给uid为1000的权限启动。
jenkins 部署前端项目Vue
感冒石头的博客
05-14 859
等待完善自己博文 文章来源：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 704
在这里默认读者已经安装完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 1846
基于Linux服务器已安装Jenkins条件下，并且会基本配置与基本使用，则可使用Jenkins自动化部署前端Vue项目。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值