前端项目自动化部署——超详细教程（Jenkins、Github Actions）（二）

自动构建 + 部署到服务器

1. 下载 Jenkins 提供的 demo 项目 building-a-multibranch-pipeline-project，然后在你的 Gitea 新建一个仓库，把内容克隆进去，并提交到 Gitea 服务器。

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

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

1. 你也可以尝试一下定时构建，下面这个代码表示每 5 分钟构建一次。

1. 选择你的构建环境，这里选择刚才配置的 nodejs。

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

1. 输入 npm i && npm run build && xcopy .\build\* G:\node-server\dist\ /s/e/y，这行命令的作用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录 G:\node-server\dist\ 。这个目录是静态服务器资源目录。

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

1. 开始构建项目，我们可以点击项目查看构建过程。

1. 构建成功，打开 http://localhost:8080/ 看一下结果。

1. 由于刚才设置了每 5 分钟构建一次，我们可以改变一下网站的内容，然后什么都不做，等待一会再打开网站看看。

1. 把修改的内容提交到 Gitea 服务器，稍等一会。打开网站，发现内容已经发生了变化。

使用 pipeline 构建项目

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

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

1. 添加 token，记得将 token 保存起来。

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

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

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

1. 打开 Jenkins 安装目录下的 jenkins.xml 文件，找到 <arguments> 标签，在里面加上 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的作用是关闭 CSRF 验证，不关的话，Gitea 的 webhook 会一直报 403 错误，无法使用。加好参数后，在该目录命令行下输入 jenkins.exe restart 重启 Jenkins。

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

1. 打开你的 Gitea 仓库页面，选择仓库设置。

1. 点击管理 web 钩子，添加 web 钩子，钩子选项选择 Gitea。
2. 目标 URL 按照 Jenkins 的提示输入内容。然后点击添加 web 钩子。

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

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

pipeline {
    agent any
    stages {
        stage('Build') {
            steps {  // window 使用 bat， linux 使用 sh
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 这里需要改成你的静态服务器资源目录
            }
        }
    }
}

1. 每当你的 Gitea 项目执行 push 操作时，Gitea 都会通过 webhook 发送一个 post 请求给 Jenkins，让它执行构建及部署操作。

小结

如果你的操作系统是 Linux，可以在 Jenkins 打包完成后，使用 ssh 远程登录到阿里云，将打包后的文件复制到阿里云上的静态服务器上，这样就能实现阿里云自动部署了。具体怎么远程登录到阿里云，请看下文中的 《Github Actions 部署到阿里云》 一节。