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

最新推荐文章于 2024-07-19 08:44:06 发布

m0_61721020

最新推荐文章于 2024-07-19 08:44:06 发布

阅读量1k

点赞数

文章标签： jenkins 前端自动化

本文链接：https://blog.csdn.net/m0_61721020/article/details/122671211

版权

本教程主要讲解了怎么使用 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 操作了。

8. 如果使用 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 网站，这时需要等待一会，进行初始化。
按照提示找到对应的文件（直接复制路径在我的电脑中打开），其中有管理员密码。

6. 安装插件，选择第一个。

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

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

9. 点击 可选插件，输入 nodejs，搜索插件，然后安装。 10. 安装完成后回到首页，点击 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 文件夹，所以访问网站是空页面。