Gitee + Jenkins实现前端自动化部署

这篇具有很好参考价值的文章主要介绍了Gitee + Jenkins实现前端自动化部署。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

这是在window环境下面实施的,Jenkins安装自己去网上找(推荐安装最新的版本,旧版本下载插件会有兼容问题),Jenkins必备插件Git、gitee、NodeJs(中文插件 Chinese需重启)。以gitee作为代码仓库,需要到仓库中的webHooks作为触发。本文借鉴了Gitee + Jenkins自动化实战 | 大前端 - 前端高级进阶

Jenkins安装设置gitee

首页  >  Manage Jenkins > Plugins

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

安装完成之后设置gitee, 首页 > Manage Jenkins > System 往下拉找到gitee配置 

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

链接名:随便输入

Gitee域名URL就填 :https://gitee.com

证书令牌点添加按钮如下图

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

弄完这里之后到外面的证书令牌是个下拉框一定要手动选上,之后再点右边的测试连接看提示没问题之后就保存

Jenkins安装设置node

安装nodejs 如上面安装gitee那样 不多赘述。。。

设置nodejs 首页 > Tools  下拉找到NodeJS 安装

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

设置完成之后保存。

新建项目流水线

首页 > 选第一项

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

任务名必填,然后下面的按照自己的需求选,我这里选的是第一个Freestyle project

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

确定之后进到页面里面选源码管理

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

Repository URL: 填仓库地址 也就是git clone 的地址(这里填完会爆红提示无法获取远程仓库,先不用管,填完下一个选项就不会了

Credentials:点添加  操作如下图

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

类型的选项里面也有ssh公钥的方式没去研究。。。下面基本默认,分支那个你可以选指定触发分支

构建触发器(上面的的弄完直接下拉)

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

弄完上图之后去到gitee仓库当中 仓库管理 > webHooks  右上角添加webhooks

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

这里的URL填写的是  上图中 URL: http://localhost:8085/gitee-project/giteeTask(看自己的url请勿复制) 注:本地测试的话需要内网穿透推荐www.ittun.com, http://localhost:8085 指的是Jenkins服务的地址,密码回到Jenkins构造触发器页面往下滑找到 Gitee WebHook 密码 点生成复制到这里点构建就完成gitee上的设置了

回到Jenkins这边 选构建环境

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

这里node版本就是上面提到新建的node版本切记一定要对应项目的node版本

下面到 Build Steps 因为我是在window环境下的所以选图下

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

其实到这里已经完成的差不多了 我这里是演示 直接执行npm install命令 执行项目的依赖包安装  实际开发中对应自己的需求 来做 切记不能有中文的路径,有些命令不能多行只能增加构建步骤下面是我自己开发中的一些设置 仅供参考

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

npm run build命令执行后它会打包到它会生成到固定的目录下(下面我说怎么看生成在哪),我这里因为nginx目录在d盘所以复制一份过去,这里的命令就是我们在cmd终端中输入的命令一样,建议先在终端中尝试命令是否可行再复制到这里来,我们点保存之后就已经大功告成了,下面教大家看一下流水线的一些基础信息

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端

Gitee + Jenkins实现前端自动化部署,gitee,jenkins,自动化,前端文章来源地址https://www.toymoban.com/news/detail-765624.html

到了这里,关于Gitee + Jenkins实现前端自动化部署的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Jenkins+Docker+Gitee搭建自动化部署平台

    目录 服务器准备 Docker安装 yum 包更新到最新 设置yum源 安装docker 启动和开机启动 验证安装是否成功 Jenkins安装 拉取镜像 创建映射目录 运行镜像 运行出错 修正权限 重新运行镜像 新建安全组,放通8080端口 激活Jenkins Jenkins插件 Jenkins全局工具配置 自动构建Springboot项目 准备好

    2024年02月04日
    浏览(57)
  • Docker+Jenkins+Gitee自动化部署maven项目

    各位看官老爷,本文为Jenkins实战,注重实际过程,阅读完会有以下收获: 了解如何使用Docker安装Jenkins 了解如何使用Jenkins部署maven项目 了解如何使用Jenkins+Gitee实现自动化部署 相信,正在读这篇文章的你,对Jenkins应该有或多或少的了解,就算没有也应该在某个地方听说过。👍

    2024年02月07日
    浏览(234)
  • Jenkins + Gitee + Maven 自动化部署 Spring Boot

    目录 1、前言 1 .1、插件简介 1.2、插件安装 2、创建Maven项目 2.1、新建一个全新的项目 2.2、拷贝已有项目 3、项目配置 3.1 、General 3.2、源码管理 3.3、构建触发器 3.4、构建环境 3.5、Pre Steps 3.6、Build 1)Root POM 2)Goals and options 3)【高级】 3.7、Pre Steps 3.8、构建环境 3.9、Post Ste

    2024年02月08日
    浏览(67)
  • docker+jenkins+gitee+shell 自动化部署微服务(基于若依)【详细完整版】

    提示:需基本熟悉docker命令、shell脚本、微服务部署、git命令、服务器基本命令、node、maven 服务器环境:Linux-EulerOS(华为自主研发服务器系统,与CentOS基本类似) 安装组件:docker20.10.19、openjdk1.8.0_191、maven3.8.6、git2.33.0、node16.17.1、npm9.1.2、jenkinsci/blueocean、docker-compose 远程工

    2023年04月11日
    浏览(45)
  • Docker + Jenkins + Nginx实现前端自动化部署

    文章有点长,如果你是以学习的态度来看这篇文章,建议收藏起来慢慢看。 前端自动化部署一直以来概念很清楚知道怎么回事,但是其中怎么操作没怎么研究过,虽然之前环境都搭起来了,但是也只是Jenkins构建项目成功,比如提交代码之后怎么触发自动构建,打包后的文件

    2024年02月05日
    浏览(49)
  • 前端 Jenkins 自动化部署

    由于公司使用自己搭建的 svn 服务器来进行代码管理,因此这里 Jenkins 是针对 svn 服务器来进行的配置,其实跟Git 配置基本一致。 之前项目每次修改之后都需要本地 ​​npm run build ​​一次手动发布到服务器上方便测试和产品查看, 有了Jenkins持续集成之后只要 svn 或者 git 提

    2024年02月16日
    浏览(39)
  • centos7:jenkins+nodejs前端自动化部署

    系统:centos7 nodejs版本:v16.18.1   npm版本:8.19.2 由于centos7最大只支持16.18.1版本,尽量让前端写代码时使用这个版本,linux系统如果要装高版本的node需要安装glibc库,很危险,尽量不要操作。 jenkins版本:推荐最新版,yum安装,不用docker安装,原因是npm命令在容器内无法有效执

    2024年02月03日
    浏览(49)
  • Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署

    前言 🚀 需提前安装环境及知识点: 1、Docker搭建及基础操作 2、DockerFile文件描述 3、Jenkins搭建及基础点 🚀 目的: 将我们的前端项目打包成一个镜像容器并自动发布部署,可供随时pull访问 1、在当前项目的根目录创建Dockerfile文件并写入如下代码: 代码片段详细描述: 注意

    2024年02月05日
    浏览(73)
  • Jenkins+GitLab+Docker搭建前端自动化构建镜像容器部署(无本地证书,映射证书)

    前言 🚀 需提前安装环境及知识点: 1、Docker搭建及基础操作 2、DockerFile文件描述 3、Jenkins搭建及基础点 🚀 目的: 将我们的前端项目打包成一个镜像容器并自动发布部署,可供随时pull访问 1、在当前项目的根目录创建Dockerfile文件并写入如下代码: 代码片段详细描述: 注意

    2024年02月15日
    浏览(60)
  • Jenkins+gitlab实现自动化部署

    Jenkins 是一个用 Java 编写的开源自动化工具,带有用于持续集成的插件。用于持续构建和测试您的软件项目,从而使开发人员更容易将更改集成到项目中,并使用户更容易获得新的构建。它还允许您通过与大量测试和部署技术集成来持续交付软件。 Jenkins 集成了各种开发生命

    2024年02月21日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包