本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。
- 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。
- 第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。
阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识,只要按照本教程的指引,就能够实现自动化部署项目。
PS:本人所用电脑操作系统为 windows,即以下所有的操作均在 windows 下运行。其他操作系统的配置大同小异,不会有太大差别。
Gitea + Jenkins 自动构建前端项目并部署到服务器
Gitea 用于构建 Git 局域网服务器,Jenkins 是 CI/CD 工具,用于部署前端项目。
配置 Gitea
- 下载 Gitea,选择一个喜欢的版本,例如 1.13,选择
gitea-1.13-windows-4.0-amd64.exe
下载。 - 下载完后,新建一个目录(例如 gitea),将下载的 Gitea 软件放到该目录下,双击运行。
- 打开
localhost:3000
就能看到 Gitea 已经运行在你的电脑上了。 - 点击注册,第一次会弹出一个初始配置页面,数据库选择
SQLite3
。另外把localhost
改成你电脑的局域网地址,例如我的电脑 IP 为192.168.0.118
。
- 填完信息后,点击立即安装,等待一会,即可完成配置。
- 继续点击注册用户,第一个注册的用户将会成会管理员。
- 打开 Gitea 的安装目录,找到
custom\conf\app.ini
,在里面加上一行代码START_SSH_SERVER = true
。这时就可以使用 ssh 进行 push 操作了。
- 如果使用 http 的方式无法克隆项目,请取消 git 代理。
git config --global --unset http.proxy git config --global --unset https.proxy
配置 Jenkins
- 需要提前安装 JDK,JDK 安装教程网上很多,请自行搜索。
- 打开 Jenkins 下载页面。
- 安装过程中遇到
Logon Type
时,选择第一个。
- 端口默认为 8080,这里我填的是 8000。安装完会自动打开
http://localhost:8000
网站,这时需要等待一会,进行初始化。 - 按照提示找到对应的文件(直接复制路径在我的电脑中打开),其中有管理员密码。
- 安装插件,选择第一个。
- 创建管理员用户,点击完成并保存,然后一路下一步。
- 配置完成后自动进入首页,这时点击
Manage Jenkins
->Manage plugins
安装插件。
- 点击
可选插件
,输入 nodejs,搜索插件,然后安装。 - 安装完成后回到首页,点击
Manage Jenkins
->Global Tool Configuration
配置 nodejs。如果你的电脑是 win7 的话,nodejs 版本最好不要太高,选择 v12 左右的就行。
创建静态服务器
- 建立一个空目录,在里面执行
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
文件夹,所以访问网站是空页面。
不过不要着急,一会就能看到内容了。