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

本文详细介绍了如何在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项目自动化部署。下面是一个简单的步骤: 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、付费专栏及课程。

余额充值