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

Phil_Hu
1,450 阅读5分钟

1. 前言

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

2. 搭建Gitea托管服务器

  1. 下载Gitea安装文件 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.118

PS：localhost改IP这步我自己没有改，这个是借用网上一位大神的图。

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

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

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

  4. 如果使用 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包的形式，www.jenkins.io/zh/download…

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

  1. 端口默认为 8080，这里我填的是 8000。安装完会自动打开 http://localhost:8000 网站
  2. 按照提示找到对应的文件（直接复制路径在我的电脑中打开），其中有管理员密码

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

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

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

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

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

  1. 在本地磁盘创建一个发布目录，然后执行npm init -y，初始项目
  2. 执行npm i express，下载express
  3. 创建一个server.js文件，里面写入如下代码：
const express = require('express')
const app = express()
const port = 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中，blog.csdn.net/north1989/a…

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

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

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

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

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

  1. 输入如下这行命令的作用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录 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

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

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

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

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

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

3.4. 使用 pipeline 构建项目

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

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

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

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

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

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

  1. 如果是exe安装的话，找到jenkins.xml 文件，找到 <arguments> 标签，在里面加上 -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

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

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

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

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

  1. 由于没有配置 Jenkinsfile 文件，此时构建是不会成功的。所以接下来需要配置一下 Jenkinsfile 文件。将以下代码复制到你 Gitea 项目下的 Jenkinsfile 文件。jenkins 在构建时会自动读取文件的内容执行构建及部署操作
pipeline {
    agent any
    stages {
        stage('Build') {
            steps {
				bat 'npm config set registry https://registry.npm.taobao.org/'
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\dist\\* C:\\tools\\personal\\github\\JenkinsDeploy\\dist\\ /s/e/y'
            }
        }
    }
}
  1. 以后当你每次push代码到gitea的时候，gitea会通过webhook发送一个post请求给Jenkins，执行构建动作

4. 参考文献

www.mdeditor.tw/pl/pXrV

avatar
文章
阅读
粉丝