最近刷文章时一篇前端自动化部署的文章引起了我的注意，对于一个只听说没做过的自动化部署新手而言这是一个新鲜玩意，所以本人按照该流程一步一步的部署了一下，中间发现了几个作者没有提及的几个问题，本文主要是将整个流程做一次记录，并填一下坑。
原文请参考：前端项目自动化部署-超详细教程（Jenkins、Github Actions）
一、准备工作
1、需要安装jdk环境，这个不详细说明，请找度娘自行安装
2、下载 gitea ，本文安装的版本 1.13 ，可自行选择版本
3、下载 jenkins ，选择windows版本
二、安装gitea
1、在电脑中创建一个目录作为gitea的安装目录，并将下载好的gitea文件移动到该目录下，安装路径中最好不要包含中文字符。
2、gitea文件不需要安装，双击即可使用，右键gitea文件以管理员权限运行，运行后如果显示这样的信息，就说明已经启动了，默认端口为3000.
3、在浏览器中输入 http://localhost:3000 然后点击右上角的注册，完成初始化配置，这里注意几个事项：
数据库最好选择SQLite3
设置一个仓库根目录用于存放所有的 git 代码，不要含中文路径
SSH域名设置为自己的局域网ip。
4、点击安装后需要等待几分钟，等待配置完成。配置完成后，gitea 安装目录下会生成相关的配置文件，如下图。
5、配置完成后继续点击右上角的注册按钮，注册的第一个用户将自动成为管理员。
6、编辑 gitea 安装目录下的 custom\conf\app.ini 文件，在里边加上一行配置（作用是开启push操作）：START_SSH_SERVER = true
7、如果遇到使用http方式无法拉取代码的情况，请取消git代理
git config --global --unset http.proxy
git config --global --unset https.proxy
三、安装 Jenkins
1、双击下载下来的 jenkins 安装文件进行程序安装，可以一直点击下一步，注意事项：到了 Logon Type 步骤时，请选择 run service as localSystem 选项，然后继续下一步，安装完成后会自动打开 http://localhost:8000 网站。
2、在打开的网站中找到对应文件，然后将文件中的内容复制到管理员密码输入框中，点击"继续"。
3、在自定义Jenkins中选择安装推荐的插件
4、填写管理员信息并保存（都是必填选项），然后一直点击下一步到配置页面。
5、等待插件全部安装完毕后会自动进入jenkins首页，到这里jenkins全部安装完毕。
四、配置jenkins
1、在jenkins首页点击 Manage Jenkins 选项，然后点击 Manage Plugins。
2、选择选择"可选插件"，然后输入node进行搜索，选择 NodeJS Plugin 插件，点击直接安装，由于我这里已经安装过了，所以没有在可选插件中显示。
3、返回首页，点击 Manage Jenkins 选项，然后点击 Global Tool Configuration ，对node进行配置。
4、在 NodeJS 选项中新增NodeJS，填写好别名以及选择需要安装的NodeJS的版本，最后点击保存按钮。
五、自动构建Vue或React项目
1、在刚刚创建的gitea中创建一个仓库，这里就不细说了。
2、在本地创建一个Vue或React项目，然后将代码提交到刚刚创建的仓库中，这里也不再手把手教了。
3、点击 jenkins 首页的新建Items。
4、给 items 取一个名称，选择 FreesStyle project ，然后点击底部的确定按钮。
5、在源码管理中选择Git，并输入你刚刚创建的仓库地址。
6、在构建环境中勾选 Provide Node & npm bin/ folder to PATH 选项，并选择刚刚配置好的 node 配置。点击保存。
7、在"构建"中选择"新增构建步骤"，然后选择 execute windows batch command，如果是linux系统需要选择 execute shell。
8、创建一个文件夹，作为静态服务器的资源目录，我这里是放在 C:\soft\jenkins\dist 下，可以自由修改，最好不要包含中文路径。
9、在命令输入框中输入 npm i && npm run build && xcopy .\build\* C:\soft\jenkins\dist\ /s/e/y ，然后点击保存按钮，注意，这里的 C:\soft\jenkins\dist\ 是你刚刚创建的静态服务器资源目录。运行这条命令以后，jenkins会自动安装依赖并打包，然后将打包后的静态资源文件复制到 C:\soft\jenkins\dist 目录下。
10、返回到首页就可以看到我们刚刚创建的Items了，点击名字后的三角形，然后在下拉框中选中Build Now，这个时候会进行第一次构建了。
11、点击构建执行状态中的构建任务就可以看到相关进度了，或者点击刚刚创建的Items的名称，然后查看最新的构建历史也可以看到相关进度。
12、控制台输入日志中如果提示seccess则为构建成功，否则就是失败了。
13、如果是以下错误造成的构建失败，则可能是 jenkins 没有权限对该目录进行操作。
1、FATAL: Failed to rename C:\windows\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstallation\node\node-v10.15.3-win-x64 to ......2、java.io.IOException: Failed to rename C:\windows\system32\config\systemprofile\AppData\Local\Jenkins\.jenkins\tools\jenkins.plugins.nodejs.tools.NodeJSInstallation\node\node-v10.15.3-win-x64 to ......
14、解决方案，找到 C:\windows\system32\config\systemprofile\AppData\Local\Jenkins\文件夹，右键Jenkins 文件夹，选择属性，然后在共享选项中点击高级共享，选中"共享此文件夹"，然后点击权限按钮，赋予Everyone 完全控制的权限。
15、再构建一次，应该没问题了，构建完成后，我们发现在静态服务器资源目录中有我们刚刚构建好的静态文件，我们用node构建一个服务器，来看一下。
16、在dist同级目录中打开命令行工具，然后依次输入 npm init -y 和 npm install express 命令。
17、然后创建一个server.js文件，并将以下命令复制到文件中
const express = require('express');
const app = express();
const port = 9999;
app.use(express.static('dist'));
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
});
18、在命令行工具中输入node server.js，然后在浏览器中输入http://localhost:9999 就可以看到我们打包后的页面了。
六、使用流水线构建项目
使用流水线构建项目是为了一边在执行 git push 命令的时候能够自动构建项目，不需要手动触发。
1、点击用户头像，然后在设置中添加一个token。
2、返回jenkins首页，点击新建Items，然后填写一个别名并选择流水线，点击确定。
3、在构建触发器中选择"触发远程构建"，并输入刚刚添加的token。
4、在流水线中依次选择 Pipeline script from SCM 和 Git ，输入自动触发的仓库的地址，如果需要指定分支也可以修改分支名称，默认分支为master ，脚本路径输入 Jenkinsfile 。
5、在jenkins的安装目录中找到jenkins.xml，在<arguments>标签中添加以下代码 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true ，作用是关闭CSRF验证，在Jenkins目录中打开命令行，并输入 ./jenkins.exe restart 重启 Jenkins。
6、返回首页，在Manage Jenkins 中点击 Configure Global Security 。在授权策略中勾选"匿名用户具有可读权限"，然后点击保存按钮。
7、回到 Gitea 仓库，点击仓库设置。
8、在管理web钩子中点击添加钩子按钮，然后在下拉选项中点击Gitea.
9、填写目标URL和密钥文本，触发条件可以根据自己的需求进行调整。
目标URL是 创建的流水线任务地址 + build?token=创建的api token ，比如我创建的流水线任务地址和api token分别是http://localhost:8080/job/hook/和admin，那么我的目标URL就是http://localhost:8080/job/hook/build?token=admin。
密钥文本就是api token。
10、点击底部的测试推送按钮可以查看配置是否成功了，如果是按照以上的配置来的话应该是可以触发jenkins的构建的，但是构建不成功，因为仓库代码中没有Jenkinsfile脚本。
11、在你的vue项目或react项目根目录下创建一个Jenkinsfile文件，并输入以下代码，注意，这里的 C:\\soft\\jenkins\\dist\\ 就是之前创建的静态服务资源目录的路径，一定要记得修改，否则会构建不成功的。
pipeline {
agent any
stages {
stage('Build') {
steps { // window 使用 bat， linux 使用 sh
bat 'npm i'
bat 'npm run build'
}
}
stage('Deploy') {
steps {
bat 'xcopy .\\build\\* C:\\soft\\jenkins\dist\\ /s/e/y' // 这里需要改成你的静态服务器资源目录
}
}
}
}
12、将修改后的文件用 git push 命令推送到git仓库，这个时候可以看到 jenkins 流水线任务正在构建，几分钟后会显示构建成功。蓝色为构建成功，红色为构建失败，闪烁为正在构建状态。至此，自动构建项目已经部署完毕。
七、注意事项及问题汇总
1、 java.io.IOException: Failed to rename 错误？
解决方案：请确保 jenkins 配置文件夹有操作权限，具体流程请参考第五大点第14条。
2、java.io.IOException: CreateProcess error=2, 系统找不到指定的文件。错误？
解决方案：请确保vue或react下有Jenkinsfile文件，且jenkins流水任务配置中的脚本路径正确，如不在根目录下，则需要用相对路径进行修改，例如我的脚本可以放在react项目的 jenkins/Jenkinsfile 文件中，那么流水任务配置中的脚本路径应该修改为 jenkins/Jenkinsfile 。
3、构建成功但静态服务器资源目录中没有静态文件？
解决方案：请确保react下的Jenkinsfile文件中有正确使用静态服务器资源目录的路径。
