jenkins自动化构建vue程序并发布至远程服务器

最新推荐文章于 2024-06-15 22:27:45 发布
最新推荐文章于 2024-06-15 22:27:45 发布
阅读量536 收藏 3
点赞数
CC 4.0 BY-SA版权
分类专栏： 开发笔记 文章标签： jenkins vue.js nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Py1807A/article/details/109242257
本文详细介绍了如何在Ubuntu系统上安装Jenkins，通过Gitee源码管理，配置自动化打包Vue(Nuxt)程序，并使用Publish Over SSH插件将其发布到远程服务器。步骤包括安装JavaSDK和Jenkins，解锁并配置Jenkins，安装NodeJS、Gitee和Publish Over SSH插件，以及设置构建触发器和构建后的操作。最后，文章提供了相关资源链接以供参考。

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

综述：记录在Ubuntu上安装Jenkins，并使用gitee源码进行自动化打包vue(nuxt)程序发布部署到远程服务器。

1.在Ubuntu上安装Jenkins

1.0. 安装Java SDK
sudo apt-get install openjdk-8-jdk
1.1. 安装Jenkins

Ubuntu默认软件包中的Jenkins版本不是最新版本。 为了利用最新的修复和功能，我们将使用项目维护的软件包来安装Jenkins。

首先，将存储库密钥添加到系统

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -

添加完密钥后，系统会返回 OK

其次，将Ubuntu的源地址附加到服务器的sources.list

echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

然后，运行update，以便apt-get使用最新的存储库

sudo apt-get update

最后，安装Jenkins及其依赖项

sudo apt-get install jenkins

验证是否安装成功及相关命令

  1. 使用 systemctl启动Jenkins

    sudo systemctl start jenkins

  2. 使用其status命令来验证是否成功启动

    sudo systemctl status jenkins

    1. 安装成功会显示以下:

      ● jenkins.service - LSB: Start Jenkins at boot time
  Loaded: loaded (/etc/init.d/jenkins; bad; vendor preset: enabled)
  Active:active (exited) since Thu 2017-04-20 16:51:13 UTC; 2min 7s ago
    Docs: man:systemd-sysv-generator(8)

  3. 重启Jenkins

    sudo systemctl restart jenkins

  4. 重启、重载、关闭Jenkins服务

    // 只需要在访问jenkins服务器的网址url地址后加上对应的路由（命令）。
// 以我Jenkins地址`http://192.168.0.105:8080`为例
// 重启
http://192.168.0.105:8080/restart
// 重载
http://192.168.0.105:8080/reload
// 关闭
http://192.168.0.105:8080/exit
1.2. 配置Jenkins

默认初始本地地址

// ip:8080	(默认为8080端口，可修改)
192.168.0.105:8080

此时，会看到如下解锁Jenkins页面：显示初始密码的位置

jenkins解锁页面

在终端中，根据提示查看初始化密码，并输入到上图韦志中，点击继续。

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

接下来，提供安装建议插件和自定义插件的选择。

select_insyall_plugins

我们选择install suggestes plugins(安装建议插件)，此时，开始安装：

download_plugins

安装完成后，系统将提示设置一个管理员用户。可以跳过，使用上面使用的初始化密码作为admin登录。

setting_account

设置完管理员账号后，会看到以下Jenkins准备好了，确认页面。

readyed

点击start using jenkins后，就到了Jenkins仪表板页面（即首页）：

index

2. 安装所需插件与配置插件

2.1. NodeJs

安装nodejs插件，用于vue项目打包构建。

  1. 安装插件

    在系统管理(Manage Jenkins) - 插件管理(Manage Plugins)中， 点击可选插件(第二个),搜索Nodejs ,勾选后，点击 直接安装。

  2. 设置插件

    在系统管理(Manage Jenkins) - 全局工具管理(Global Tool Configuration)中,拉到最底部，设置node

    settingNode

2.2. Gitee

安装Gitee,用于每次往gitee push的时候，会触发webhooks,自动化构建。

  1. 安装插件

    在系统管理(Manage Jenkins) - 插件管理(Manage Plugins)中， 点击可选插件(第二个),搜索Gitee,勾选后，点击 直接安装。

  2. 设置插件

    在系统管理(Manage Jenkins) - 系统设置(Configure System)中,找到Gitee 配置

    settingGitee

2.3. Publish Over SSH

安装Publish Over SSH,用于在本机构建完成后，发布到远程服务器并执行后续脚本。（我司Jenkins构建和发布为两台服务器，故如此）

  1. 安装插件

    在系统管理(Manage Jenkins) - 插件管理(Manage Plugins)中， 点击可选插件(第二个),搜索Publish Over SSH,勾选后，点击 直接安装。

  2. 设置插件

    在系统管理(Manage Jenkins) - 系统设置(Configure System)中,找到Publish over SSH

    settingSSH

3. 自动化部署vue项目

新建任务

点击“新建”， 填写任务名称，选择 “构建一个自由风格的软件项目”， 然后保存：

crateItem

源码管理

填写远程仓库地址，并添加访问账号（密钥），和指定分支

构建触发器

  1. 选择Gitee webhook触发构建，此步为push后触发webhooks自动化构建。

    打开对应远程仓库，根据Jenkins提示信息，设置webhooks

  2. 选择 轮询SCM

构建环境

选择 打印控制台输出

选择 Node

构建

执行我们所需的打包shell,以vue项目编译，打包为例:

shell脚本：

cd /var/lib/jenkins/workspace/yiwen
npm i
npm run build
rm -rf yiwen.tar.gz
tar -zcvf yiwen.tar.gz .nuxt static ecosystem.config.js nuxt.config.js package.json

jenkins拉取的源码默认路径为：/var/lib/jenkins/workspace/项目名称

在本机构建，本机发布部署的话到此结束了。

构建后的操作

Source files: 构建完要传输的文件 （当前相对路径是：/var/lib/jenkins/workspace/项目名称）

Remove prefix: 去除文件前缀路径

Remote directory: 传输到远程服务器的哪个目录， 以在设置中插件设置路径为相对路径

Exec command: 传输到远程服务器后，执行哪些命令

我大概执行了：删除旧的项目文件夹，解压新版本项目到指定文件夹，删除远程传输来的压缩包，安装运行依赖，重启pm2服务

cd /home/fanyijiang
rm -rf front
mkdir front
cd /home/tools/yiwen
tar -zxvf yiwen.tar.gz -C /home/fanyijiang/front
rm -rf ./yiwen.tar.gz
cd /home/fanyijiang/front
npm i
pm2 restart yiwen

整个大概构建配置是这样的。

完结，撒花★,°:.☆(￣▽￣)/$:.°★

jenkins构建工具搭建参考链接：

  1. 安装

    https://juejin.im/post/6844903816375074830

    https://www.cnblogs.com/clemente/p/10642760.html

  2. 配置

    https://www.jianshu.com/p/4c4f92209dd1

    gitee webhooks:

    https://blog.youkuaiyun.com/u010004317/article/details/90265130?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

  3. 邮箱通知

    https://www.cnblogs.com/imyalost/p/8781759.html

  4. 参考卸载：

    https://blog.youkuaiyun.com/qq_35114214/article/details/88747597

  5. 远程传输部署

    https://blog.youkuaiyun.com/ansu2009/article/details/83584796

jenkins构建vue项目部署到远程服务器
kaola_l的博客
03-31 3037
jenkins构建vue项目部署到远程服务器
Jenkins自动化构建vue项目然后发布到远程服务器
热门推荐
安树的博客
10-31 2万+
一、请确保当前服务器安装了docker和jenkins，没安装的请看《在centos7系统安装docker及用docker安装jenkins》 （jenkins里面的目录路径为/var/jenkins_home相当于之前安装系统里面的/home/var/jenkins/） 二、jenkins相关插件的安装 1、安装Publish Over SSH插件用于SSH连接远程的服务器。      ...
Jenkins自动化构建vue项目然后发布到远程Linux服务器
weixin_30780649的博客
06-20 2350
部署Jenkins参照另一篇博客： centos7安装Jenkins及其卸载 一、jenkins相关插件的安装 1、安装Publish Over SSH插件用于SSH连接远程的服务器。 登录 jenkins 管理系统首页，打开“系统管理”--“管理插件” 搜索Publish Over SSH 然后勾选安装 2、安装 NodeJs插件 用于vue项目打包构建。 ...
基于Jenkins自动化发布VUE项目
卡哇伊的码农
04-07 322
Jenkins自动化部署VUE项目前言配置 前言 通过Jenkins发布一个VUE项目到远程服务器 配置 1.Jenkins新建Item 2.新建一个任务 3.任务/项目描述 4.源码配置 Credentials添加 4.配置构建环境 5.构建后操作（SSH 服务器配置请看第6步） 6.SSH服务器配置 最下面，新增 保存即可 6.项目构建 7.服务器项目路径 8.通过ngin...
windows系统jenkins自动化部署vue项目至远程服务器
m0_46536382的博客
03-30 2825
前言 经过一天的摸索，写了一篇关于Jenkins的简单使用流程，以下相关流程仅限于在windows环境下的Jenkins操作（因为踩过坑，构建步骤选择的项会有所不同），当然其他系统也类似，那就先从windows入门吧。在写文章前，本人也是Jenkins小白一枚，这也是本人第一次发表文章，若有描述不正确或不清晰的地方，望各位小伙伴指正~ 目录前言一、工具及材料准备1.Jenkins-windows版本2.JDK（Jenkins依赖java环境）3.github或者gitee仓库二、Jenkins使用流程1.进
linux系统jenkins自动化部署vue项目至远程服务器
m0_46536382的博客
04-01 2781
前言 上一篇文章，已经讲解了windows系统使用Jenkins实现自动化部署vue项目，这次又又又花了一天的时间，研究了下linux系统下的操作，其实两者差别不算大，主要是JDK的安装和环境变量的设置稍微麻烦些，还有Jenkins任务构建模块，选择的构建步骤跟windows不一致，其他大致相同。本文还提到小白可能会遇到的错误（踩坑大师），也进行了解决方案的提供，希望能给小伙伴们提供到帮助。 目录前言工具及材料准备1.git2.JDK（Jenkins依赖java环境）3.Jenkins（war包）4.git
Jenkins打包部署Vue项目至远程服务器
我是海贼王
09-02 1608
Jenkins打包部署Vue项目至远程服务器 Jenkins打包部署gitee项目至阿里云ECS服务器 Jenkins安装及基础环境配置 Jenkins配置SSH免密登录
Jenkins自动构建vue项目并部署至Kubernetes
walkon1007的博客
03-12 1023
目录一、安装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://
vue项目jenkins自动化部署
最新发布
2401_85123379的博客
06-15 965
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！高级前端工程师必备资料包。
Jenkins远程发布VUE项目
程序员劝退师的博客
07-02 635
1.将vue项目推送到远程仓库Gitlab **2.安装Nginx ** 我这里使用docker来安装 这个Nginx安装步骤就不过多演示了 3.Jenkins安装NodeJS插件 NodeJS 4.Jenkins配置NodeJs环境 这个NodeJs版本和开发环境的版本最好保持一致 进入Global Tool Configuration 5.Jenkins创建前端流水线项目 6.编写构建脚本 这个脚本采用Jenkins本地方式编写，脚本中包含拉取Git代码，编译，打包，远程部署 node {
通过Jenkins构建vue项目并发布到远程服务器
qq_18881987的博客
10-14 550
通过Jenkins构建vue项目并发布到远程服务器安装Jenkinsdocker安装普通安装配置Jenkins浏览器访问需要输入管理员密码插件安装创建用户实例配置配置环境安装nodejs插件配置node版本安装Publish Over SSH 插件 安装Jenkins docker安装 docker run --name jenkinsci-blueocean -u root --rm -d -p 8080:8080 -p 50000:50000 -v /data/jenkins:/var/jenkins
Jenkins打包部署gitee项目至阿里云ECS服务器
我是海贼王
09-02 1972
Jenkins打包部署gitee项目至阿里云ECS服务器 Jenkins安装及基础环境配置 Jenkins配置SSH免密登录 ​
Jenkins+Gitlab自动部署Vue项目到远程服务器
u010797364的博客
08-12 1479
Jenkins+Gitlab自动部署Vue到远程服务器
使用jenkins自动发布前端项目【vue3】
qq_38032510的博客
08-16 1141
发布的流程的就是：1. 提交代码到git2. jenkins拉取代码到工作空间3.利用npm install 暗转依赖，和使用npm run build 打包。这里一般比较慢 容易失败。可以在jenkins的shell脚本里面加上echo “npm更换成cnpm”echo "安装依赖"...
jenkins启动vue服务
weixin_44153651的博客
07-27 332
若使用命令nohubnpmrundev&，则服务起不来。jenkins中shell命令行npmrundev。若直接执行，任务会一直处于构建中。
jenkins自动化部署vue项目
airlock的博客
04-22 378
文章目录前言步骤总结 前言 运用jenkins部署前端vue项目，环境为windows，前端部署依靠nginx 提示：以下是本篇文章正文内容，下面案例可供参考 步骤 先构建一个freestyle项目，取名根据自己需要 源码管理部分URL填写仓库地址（这里我用的是gitee），Credentials选择自己的有权限的账号，分支选择要部署的vue项目所在分支 构建环境方面选择如下，其中NodeJS installation部分需要选择在jenkins内已经配置完成的选项 构建方面，需要先对vue前
Windows环境下使用Jenkins自动部署前端(vue)项目到远程Windows(server)
道不平的博客
11-23 2561
Windows环境下使用Jenkins自动部署前端(vue)项目到远程Windows(server)
使用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 自动化部署 maven工程、vue工程、项目环境启动 配置教程
qq_39234840的博客
03-26 402
插件安装 等等，用到啥装啥 一、添加服务器 系统管理——》系统设置——》SSH Servers 二、新建视图 三、新建任务 maven jar项目 JDK_DIR="/lib/jvm/jdk1.8.0_151" PRO_DIR="/usr/local/tomcat/ilikeit_crm" PRO="yui3-system-provider"...
jenkins自动化部署vue
08-30
你可以使用Jenkins来实现Vue项目的自动化部署。下面是一个简单的步骤： 1. 安装Jenkins：首先，你需要在你的服务器上安装Jenkins。你可以根据官方文档或者其他资源来完成安装过程。 2. 配置Jenkins：一旦安装完成，你需要通过浏览器访问Jenkins的网址，并且按照指引完成初始设置。这可能包括创建管理员账户、安装插件等。 3. 创建一个新的Jenkins任务：在Jenkins主页，点击"新建任务"按钮，然后输入任务名称和选择"自由风格"项目类型。 4. 配置代码仓库：在任务配置页面的"源码管理"部分，选择你的代码仓库类型（如Git），并提供代码仓库的URL和凭据（如果有的话）。 5. 配置构建步骤：在任务配置页面的"构建"部分，添加构建步骤。对于Vue项目，你可以使用以下命令来构建： ``` npm install npm run build ``` 这将安装项目依赖并生成静态文件。 6. 配置部署步骤：在任务配置页面的"构建后操作"部分，添加部署步骤。你可以使用SSH插件或者其他适用的插件来实现远程部署。 如果你使用SSH插件，你需要提供远程服务器的地址、凭据和部署命令。部署命令应该包括将构建后的静态文件复制到远程服务器的指定目录。 如果你使用其他插件或者工具来进行部署，根据插件或者工具的文档进行配置即可。 7. 保存任务配置并运行任务：一旦你完成了任务配置，点击"保存"按钮，并运行任务。Jenkins将根据你的配置自动构建和部署Vue项目。 请注意，这只是一个简单的示例，你可能需要根据你的具体情况进行适当的调整和配置。此外，确保你的服务器和部署目标环境已经正确配置，并且有足够的权限来执行构建和部署操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值