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

简介: 前端项目自动化部署——超详细教程(Jenkins、Github Actions)

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。

  1. 第一部分是使用 Gitea 配置局域网 git 服务器,再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。
  2. 第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。

阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识,只要按照本教程的指引,就能够实现自动化部署项目。

PS:本人所用电脑操作系统为 windows,即以下所有的操作均在 windows 下运行。其他操作系统的配置大同小异,不会有太大差别。

Gitea + Jenkins 自动构建前端项目并部署到服务器

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

配置 Gitea

  1. 下载 Gitea,选择一个喜欢的版本,例如 1.13,选择 gitea-1.13-windows-4.0-amd64.exe 下载。
  2. 下载完后,新建一个目录(例如 gitea),将下载的 Gitea 软件放到该目录下,双击运行。
  3. 打开 localhost:3000 就能看到 Gitea 已经运行在你的电脑上了。
  4. 点击注册,第一次会弹出一个初始配置页面,数据库选择 SQLite3。另外把 localhost 改成你电脑的局域网地址,例如我的电脑 IP 为 192.168.0.118

  1. 填完信息后,点击立即安装,等待一会,即可完成配置。
  2. 继续点击注册用户,第一个注册的用户将会成会管理员。
  3. 打开 Gitea 的安装目录,找到 custom\conf\app.ini,在里面加上一行代码 START_SSH_SERVER = true。这时就可以使用 ssh 进行 push 操作了。

  1. 如果使用 http 的方式无法克隆项目,请取消 git 代理。
git config --global --unset http.proxy
git config --global --unset https.proxy

配置 Jenkins

  1. 需要提前安装 JDK,JDK 安装教程网上很多,请自行搜索。
  2. 打开 Jenkins 下载页面。

  1. 安装过程中遇到 Logon Type 时,选择第一个。

  1. 端口默认为 8080,这里我填的是 8000。安装完会自动打开 http://localhost:8000 网站,这时需要等待一会,进行初始化。
  2. 按照提示找到对应的文件(直接复制路径在我的电脑中打开),其中有管理员密码。

  1. 安装插件,选择第一个。

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

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

  1. 点击 可选插件,输入 nodejs,搜索插件,然后安装。
  2. 安装完成后回到首页,点击 Manage Jenkins -> Global Tool Configuration 配置 nodejs。如果你的电脑是 win7 的话,nodejs 版本最好不要太高,选择 v12 左右的就行。

创建静态服务器

  1. 建立一个空目录,在里面执行 npm init -y,初始化项目。
  2. 执行 npm i express 下载 express。
  3. 然后建立一个 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 文件夹,所以访问网站是空页面。

不过不要着急,一会就能看到内容了。

目录
相关文章
|
4月前
|
JSON Kubernetes 安全
找到啦,我们已上车,Github 27000+ star,研发团队必备开源工具项目,真丝滑!!!
Trivy 是一款高效灵活的开源安全扫描工具,支持容器镜像、文件系统、Kubernetes 等多目标扫描,具备快速、易用、集成性强等特点,适用于 DevSecOps 全流程安全检测。
204 0
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-10-28 开源项目周报 Top15
本周GitHub热门项目涵盖Svelte、Open Interpreter、PowerShell等,涉及Web开发、AI助手、自动化工具等领域,Python、JavaScript为主流语言,展现开源技术活跃生态。(239字)
482 19
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-11-04 开源项目周报 Top14
本周GitHub热门项目涵盖屏幕截图转代码、网页监控、低代码开发等。Python与TypeScript主导,亮点项目包括AI生成代码工具、开源社交应用Bluesky及机器人框架LeRobot,展现AI与自动化技术的快速发展趋势。
226 15
|
3月前
|
人工智能 JavaScript Docker
Github 2024-11-11 开源项目周报 Top15
本周GitHub热门项目涵盖多领域:Python与TypeScript领跑,包括屏幕截图转代码、本地文件共享、PDF处理、AI开发代理等。亮点项目如screenshot-to-code、LocalSend、OpenHands及Diagrams,兼具创新与实用性,广受开发者关注。
298 13
|
3月前
|
人工智能 算法 JavaScript
Github 2024-10-14 开源项目周报 Top14
本周GitHub热门项目共14个,Python项目占7席。涵盖算法实现、生成式AI、金融分析、目标检测等领域,包括TheAlgorithms系列、OpenBB金融平台、Ultralytics YOLO11、Manim动画框架等,展现开源技术多元发展态势。
161 8
|
3月前
|
人工智能 Rust JavaScript
Github 2024-10-07 开源项目周报 Top15
本周GitHub热门项目共15个,Python项目占比最高达7个。榜首为Python算法实现集合TheAlgorithms/Python,Star数超17万;其他亮点包括Godot游戏引擎、OpenBB金融平台、ToolJet低代码框架及新兴AI相关项目如Crawl4AI、Llama Stack等,涵盖游戏、金融、AI、理财等多个领域。
169 4
|
3月前
|
人工智能 Rust 算法
Github 2024-09-30 开源项目周报 Top15
本周GitHub热门项目揭晓:Python主导,AutoGPT居首,涵盖AI、编程、数学动画等领域,助力开发者探索前沿技术。
160 4
|
3月前
|
人工智能 JavaScript 前端开发
Github 2024-09-16 开源项目周报 Top14
本周GitHub热门项目涵盖Python、TypeScript、Go等语言,React居首。亮点包括微软PowerToys、Node版本管理器、AI证件照工具HivisionIDPhotos及端侧大模型MiniCPM等。
141 2
|
3月前
|
Rust JavaScript 安全
Github 2024-09-02 开源项目周报 Top13
本周GitHub热门项目涵盖AI、开发工具与开源替代品。包括Notion替代AppFlowy、Airtable替代NocoDB、云平台Coolify及可观察性平台OpenObserve等,涉及Python、TypeScript、Rust等语言,聚焦效率、隐私与自动化。
215 1
|
4月前
|
人工智能 编解码 JSON
不看后悔!GitHub 开源 MultiTalk .8k star 强大的人语音+图像绑定项目
MultiTalk 是 GitHub 上的开源项目,具备音频驱动、多人对话视频生成功能。支持多路音频与图像绑定,实现高同步唇动与角色互动,适用于教学、虚拟人及短视频创作,已获 8k 星标。
388 0

热门文章

最新文章

推荐镜像

更多