jenkins前端自动化部署(windows)

1,704 阅读3分钟

一、下载jenkins选择windows安装

30493636c72744f984331d377fe831cc_tplv-k3u1fbpfcp-watermark.png 自己选一个目录安装

image.png

选择服务运行账户

Jenkins是以系统服务的方式运行的,需要指定服务运行的账户,LocalSystem和LocalService都是系统内置账号,区别是LocalSystem具有最高的权限,LocalService只具有运行服务的最小权限,本文是在本地安装,所以选择了LocalSystem账户。

image.png

设定服务端口

输入服务端口,建议输入值大一些,不要与系统的端口冲突。这里填写的是60000,输入完之后,可以点击一下test port,确认端口可用。

image.png

定制安装

定制安装这里,选择特性需要时再安装

image.png 接下来点击install,再点击完成

image.png

解锁Jenkins

第一次访问新的Jenkins实例时,系统会要求你使用自动生成的密码对其进行解锁。 在cmd命令行下用 type 查看密码

type C:\WINDOWS\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\secrets\initialAdminPassword

image.png

自定义Jenkins扩展

解锁 Jenkins之后,在 自定义 Jenkins 页面内, 可以安装任何数量的有用插件进行初始化配置。有两个选项可供选择:

  • 安装建议的插件 - 安装推荐的一组插件,这些插件基于最常见的用例.
  • 选择要安装的插件 - 可以定制安装插件,如果你很清楚自己要用到哪些插件,就选择定制安装,否则选择安装推荐的插件

image.png 默认安装建议插件 这里需要较长时间,耐心等待插件安装完毕

image.png 可能部分插件会安装失败,不用管,因为好些你也用不到,继续下面的操作。

image.png

创建第一个Jenkins管理员账号

image.png 配置 jenkins网页访问地址,点击 保存并完成。可以使用默认地址

配置完成后自动进入首页,配置node.exe安装目录

node.js版本及路径查看 image.png 先下载NodeJS Plugin 操作路径Manage Jenkins ==> Manage plugin 下载插件NodeJS Plugin

然后指定NodeJS的安装目录 , 操作路径Manage Jenkins ==> Global Tool Configuration

image.png

image.png

安装gitee插件用于拉取远程代码

操作路径Manage Jenkins ==> Manage plugin 下载插件gitee

  • 令牌配置俩种方式
  1. 在建项目之前(这边建好后可以新建项目的时候之间选择就行) 操作路径Manage Jenkins ==> Configure System 添加凭证 image.png

image.png

image.png

image.png 2. 在建项目的时候在配置令牌(这边不介绍看新建项目)

开始我们的构建项目

1打开 Jenkins 首页,点击 新建 Item 创建项目。新建一个自由风格的项目

image.png 2选择 源码管理 面板 ,输入你的 git 上的仓库地址。注意要添加gitee凭证

image.png 3选择 构建触发器 通过Gitee webhook 触发代码自动构建和发布

image.png

image.png gitee 上配置web Hook 点击项目下的管理 添加webHook image.png 这个里面的url 需要将自己本地的jenkins地址代理到公网上使用域名 代理后的域名配置到jenkins 的Manage Jenkins ==> Configure System 下找到 Jenkins Location 修改Jenkins URL

image.png

image.png 这边点击测试后可能出现 403 鉴权失败 windows下可以在自己安装jenkins的目录下修改jenkins.xml

image.png -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true 意思是跨站请求伪造保护 作用是关闭 CSRF 验证 (默认都是允许的) 回到首页,配置全局安全选项。勾上匿名用户具有可读权限,再保存。

image.png

image.png 3 选择 构建环境 面板,配置执行Node命令使用NodeJS版本

image.png 4.选择 增加构建步骤 面板,windows 要选 execute windows batch command 输入

image.png

npm i && npm run build && xcopy .\dist\* E:\server\dist\ /s/e/y #这行命令的作用是安装依赖,构建项目,并将构建后的静态资源复制到指定目录 E:\server\dist\; 。这个目录是静态服务器资源目录。 5构建后操作 暂时没有服务器 先到这里 最后点击保存 后点build new 开始构建

image.png

可以在这个位置看到正在构建 构建结束可以点击 查看控制台输出

image.png

image.png