首页 前端知识 [手把手系列之] Jenkins自动化部署vue前端项目

[手把手系列之] Jenkins自动化部署vue前端项目

2024-06-14 09:06:10 前端知识 前端哥 377 477 我要收藏

Jenkins 自动化部署实例讲解

前言

简介:Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续集成
点击下面的链接进入官网选择最新的版本下载,然后一键安装即可。
下载地址:windows版本Jenkins下载

一、安装Jenkins插件

1、安装完推荐的插件,我们还需要额外的插件来满足使用,需要单独下载插件,依次下载安装即可

  • Gitee:这里以Gitee作为代码仓库
  • NodeJs:前端项目打包的基本环境
  • Qy Wechat Notification:自动部署后进行企业微信发送对应消息通知
    安装过Gitee插件这里就找不到了

二、Gitee 配置证书令牌

1、仪表盘-》Manage Jenkins-》Configure System
2、Gitee 配置下面列表,完成后点击测试,成功后保存即可

  • 链接名:项目名称,随便填都可
  • Gitee 域名 URL:https://gitee.com
  • 证书令牌:如下图所示
    在这里插入图片描述
    弄完这里之后到外面的证书令牌是个下拉框一定要手动选上,之后再点右边的测试连接看提示没问题之后就保存

三、全局工具配置

1、仪表盘-》Manage Jenkins-》Global Tool Configuration
2、NodeJS配置

  • 别名:随便填写即可
  • NodeJS版本:根据对应项目选择对应的NodeJs版本,不宜过高

在这里插入图片描述

3、Git installations
注明:服务器如果没有安装git工具会报错,安装Git后将安装路径就好(如果部署Jenkins之前就已经安装,默认即可)
在这里插入图片描述

四、构建项目(new Item)

1、填写任务名称,并选择【Freestyle project】确认保存在这里插入图片描述
2、配置码源管理
在这里插入图片描述
3、配置构建触发器,触发条件:推送到仓库的master自动进行部署
在这里插入图片描述
4、Git仓库-新建 WebHook

  • Gitee webhook 中填写 URLhttp://localhost:8085/gitee-project/metting-auto-build需要公网IP或进行内网穿透
  • Gitee webhook密码:Jenkins配置页面生成Gitee WebHook 密码
    在这里插入图片描述5、构建运行环境
    在这里插入图片描述6、构建命令步骤-使用命令运行项目
  • npm install:下载对应的项目依赖
  • npm run build:打包成dist文件夹
  • xcopy /E /Y C:\ProgramData\Jenkins.jenkins\workspace\metting-auto-build\dist\ F:\nginx-1.23.4\html\dist\:将Jenkins打包最新的dist文件夹复制到Nginx服务器的文件夹中
  • F: 切换盘符 cd nginx-1.23.4 移动到Nginx服务器中 nginx -s reload:将Nginx重新运行启动

在这里插入图片描述
7、双击Build Now或者推送触发创建,可以点击任务看到控制台输出,Success,至此Jenkins项目自动托管部署项目成功!
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12123.html
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!