1987WEB视界-分享互联网热门产品和行业

请输入关键字词

热门标签排行

网友热搜词排行

您现在的位置是：首页 > WEB开发 > 正文

WEB开发

前端项目搭建部署全流程（五）：基于Jenkins与gitea的自动化部署

1987web2023-10-06WEB开发161

1. 前言

继上一篇文章之后，我们可以基于写的脚手架工程初始化一个项目工程，然后基于这个工程提交搞Gitea服务，实现基于Jenkins的自动化部署与Gitea的webhook钩子，以便在执行git push的时候，自动构建项目。

2. 搭建Gitea托管服务器

1.下载Gitea安装文件https://dl.gitea.io/gitea，我下载的是gitea-1.13.1-windows-4.0-amd64.exe版本

2.下载完成后，在本地磁盘建立一个Gitea目录，然后在该目录下执行安装文件

3.然后打开localhost:3000就可以看到运行知道的Gitea

4.点击注册，第一次会弹出一个初始配置页面，数据库选择SQLite3，另外把localhost改成你电脑的局域网地址，例如我的电脑 IP 为192.168.0.118PS：localhost改IP这步我自己没有改，这个是借用网上一位大神的图。

5.填完这些信息后，点击立即安装，等待一会，完成配置

6.继续点击注册用户，第一个注册的用户将会成会管理员

7.打开 Gitea 的安装目录，找到custom\conf\app.ini，在里面加上一行代码START_SSH_SERVER = true。这时就可以使用 ssh 进行 push 操作了

8.如果使用 http 的方式无法克隆项目，请取消 git 代理

git config --global --unset http.proxy
git config --global --unset https.proxy

3. 配置Jenkins

3.1 安装JDK

JDK有版本要求，必须要1.8的，官网有说明，本人在这踩过坑

1.下载Jenkins，Jenkins分exe的安装文件以及WAR包、Docker镜像分发，开始我是exe安装，安装完成之后一直没法进入解锁Jenkins这个页面，所以后来改成WAR包的形式，https://jenkins.io/zh/download/

2.安装过程中遇到Logon Type时，选择第一个

3.端口默认为 8080，这里我填的是 8000。安装完会自动打开http://localhost:8000网站

4.按照提示找到对应的文件（直接复制路径在我的电脑中打开），其中有管理员密码

5.安装插件，选择第一个

6.创建管理员用户，点击完成并保存，然后一路下一步

7.配置完成后自动进入首页，这时点击Manage Jenkins->Manage plugins安装插件

8.点击可选插件，输入 nodejs，搜索插件，然后安装

9.安装完成后回到首页，点击Manage Jenkins->Global Tool Configuration配置 nodejs。如果你的电脑是 win7 的话，nodejs 版本最好不要太高，选择 v12 左右的就行

3.2. 创建本地静态node服务器

  1. 在本地磁盘创建一个发布目录，然后执行npm init -y，初始项目
  2. 执行npm i express，下载express
  3. 创建一个server.js文件，里面写入如下代码：
constexpress=require(express)constapp=express()constport=3001​app.use(express.static(dist))​app.listen(port,()=>{console.log(`Example app listening at http://localhost:${port}`)})

它将当前目录下的dist文件夹设为静态服务器资源目录，然后在当前目录下执行node server.js启动服务器。

由于现在还没有dist目录，现在运行访问的是空页面

3.3. 自动构建与部署

1.使用之前我们通过脚手架创建的demo项目，然后在你的Gitea新建一个创建，把内容克隆到进去，这里介绍如何将已有的项目克隆到GitHub中，https://blog.csdn.net/north1989/article/details/53471439

2.打开 Jenkins 首页，点击新建 Item创建项目

3.选择源码管理，输入你的 Gitea 上的仓库地址

4.也可以定时构建，我这设置的是8,12,15点构建，也可以不设置，手动构建

5.然后选择构建环境，选择刚刚配置的插件nodejs

6.点击增加构建步骤，windows 要选execute windows batch command，linux 要选execute shell

7.输入如下这行命令的作用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录C:\tools\personal\github\JenkinsDeploy\dist\。这个目录是静态服务器资源目录

npm config set registry https://registry.npm.taobao.org/ && npm i && npm run build && xcopy .\dist\* C:\tools\personal\github\JenkinsDeploy\dist\ /s/e/y

8.修改下之前脚手架创建的demo项目，增加build命令

替换压缩的插件UglifyjsPlugin--->TerserPlugin

9.保存后，返回首页。点击项目旁边的小三角，选择build now

10.开始构建项目，可以点击进去查看构建过程

11.构建成功，打开之前搭建的静态node服务器地址http://localhost:3001/

3.4. 使用 pipeline 构建项目

使用流水线构建项目可以结合 Gitea 的webhook钩子，以便在执行git push的时候，自动构建项目

1.点击首页右上角的用户名，选择设置

2.添加新的token，记得将 token 保存起来。

3.打开 Jenkins 首页，点击新建 Item创建项目

4.点击构建触发器，选择触发远程构建，填入刚才创建的 token

5.选择流水线，按照提示输入内容，然后点击保存

6. 如果是exe安装的话，找到jenkins.xml文件，找到标签，在里面加上-Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true，如果是war包运行在java后面加上这句：

java -jar -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true jenkins.war --httpPort=8000

它的作用是关闭CSRF验证，不关的话，Gitea 的webhook会一直报 403 错误，无法使用。加好参数后，重启Jenkins

7.回到首页，配置全局安全选项。勾上匿名用户具有可读权限，再保存

8.打开你的 Gitea 仓库页面，选择仓库设置，管理web钩子，添加web钩子，钩子选择Gitea

9.目标 URL 按照 Jenkins 的提示输入内容。然后点击添加 web 钩子

10.点击创建好的 web 钩子，拉到下方，点击测试推送。不出意外，应该能看到推送成功的消息，此时回到 Jenkins 首页，发现已经在构建项目了

11.由于没有配置Jenkinsfile文件，此时构建是不会成功的。所以接下来需要配置一下Jenkinsfile文件。将以下代码复制到你 Gitea 项目下的Jenkinsfile文件。jenkins 在构建时会自动读取文件的内容执行构建及部署操作

pipeline{agentanystages{stage(Build){steps{batnpm config set registry https://registry.npm.taobao.org/batnpm ibatnpm run build}}stage(Deploy){steps{batxcopy .\\dist\\* C:\\tools\\personal\\github\\JenkinsDeploy\\dist\\ /s/e/y}}}}

12.以后当你每次push代码到gitea的时候，gitea会通过webhook发送一个post请求给Jenkins，执行构建动作

4. 参考文献

https://mdeditor.tw/pl/pXrV

相关文章