前端项目自动化部署 软件安装步骤 (Gitea+ jenkins)

千里之行始于足下

勿妄自菲薄,勿骄傲自满;
开始吧,一定要沉得住气,慢慢来
参考文档,大部分步骤来自此篇文章,自己又写了一遍步骤

1.安装Jenkins运行环境 java(如果对配置环境变量不熟悉,可以跳过先进行下面的步骤,如果感觉没什么难度,就按照顺序开始吧,)

• 安装java jdk

java jdk,清华大学开源软件镜像
下载完成之后,直接解压,是绿色版软件,可以直接运行

• 开始配置环境变量(电脑的系统变量,都是系统变量非用户变量)

JAVA_HOME:C:\Program Files\Java\jdk1.6.0_43 //这里是你的软件文件夹所在位置
Path:%JAVA_HOME%\bin; //在path变量里面添加  %JAVA_HOME%\bin
复制代码

• 执行cmd命令

C:\Users\YCR>java -version
openjdk version "1.8.0_292"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_292-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.292-b10, mixed mode)
复制代码

• 恭喜你完成java环境配置了

2.接下来要开始配置 Gitea

Gitea 用于构建 Git 局域网服务器，Jenkins 是 CI/CD 工具，用于部署前端项目。

• 安装 gitea软件
  软件地址

• 下载完后，新建一个目录（例如 gitea），将下载的 Gitea 软件放到该目录下，双击运行。

• 打开 localhost:3000 就能看到 Gitea 已经运行在你的电脑上了。

• 点击注册，第一次会弹出一个初始配置页面，数据库选择 SQLite3

• 根据填项可以先将localhost改为你的ip

• 点击立即安装，等待一会，即可完成配置。

• 打开 Gitea 的安装目录，找到 custom\conf\app.ini，在里面加上一行代码 START_SSH_SERVER = true,如果还有localhost存在,按照图中将服务地址改为自己的ip就行了,这时就可以使用 ssh 进行 push 操作了。

3. 配置Jenkins

• 安装软件

下载地址

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

• 安装软件的时候会有一个防火墙的问题,我是直接next了,有问题不懂就next

• 安装过程中会让你填端口,如果你是vue开发人员,肯定知道vue的默认端口就是8080,所以身为vue开发人员肯定要由着vue来,把这个端口改为8000,然后浏览器会自动打开http://localhost:8000 网站

• 按照提示找到对应的文件,直接复制路径可能会提示没有此文件(因为有的目录需要权限访问),可以按照目录一步一步操作

• 安装插件(选择推荐的),安装过程比较慢,结束后如过出现部分错误可以点击继续之后的步骤中修复

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

• 中间可能会遇到插件安装问题(如下图)仔细查看红字,里面有安装失败的插件名,可以点击纠正然后点击可选插件,搜索插件名,选中安装插件,完成后可以访问http://localhost:8000/restart 重启

  

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

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

• 安装完成后回到首页，点击 Manage Jenkins -> Global Tool Configuration 配置 nodejs。尽量选择v12,我选择了14 ,和我电脑上的版本是一样的

4. 创建一个静态服务器

• 建立一个空目录，在里面执行 npm init -y，初始化项目。
• 执行 npm i express 下载 express。
• 然后建立一个 server.js 文件，代码如下：

const express = require('express')
const app = express()
const port = 8080

app.use(express.static('dist'))

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})
复制代码

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

由于现在没有 dist 文件夹，所以访问网站是空页面。

• build now 出现错误

5.自动构建+部署到服务器

在这里我遇到很多的坑

• 首先本地创建一个vue脚手架项目(我是一个爱vue爱到骨子里的人),然后在你的gite服务器上面创建一个仓库并且将代码提交上去
• 代开jenkins首页,点击新建Item

• 在这里面就不尝试定时构建了
• 选择构建环境,这里选择刚才配置的nodejs

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

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

这里解释一下:.\dist\* 是你的打包项目文件夹里面的所有文件,然后将其复制到你规定的文件夹

• 保存后,返回首页 进行构建项目

• 这里是我遇到的错误(解决办法配置vue.config.js) 这个办法不好

module.exports = {
	css: {
		extract: false,
	},
}

复制代码

• 控制台输出代表成功

• 构建成功后,访问http://localhost:8080/