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

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

自动构建 + 部署到服务器

  1. 下载 Jenkins 提供的 demo 项目 building-a-multibranch-pipeline-project,然后在你的 Gitea 新建一个仓库,把内容克隆进去,并提交到 Gitea 服务器。

  1. 打开 Jenkins 首页,点击 新建 Item 创建项目。

  1. 选择源码管理,输入你的 Gitea 上的仓库地址。

  1. 你也可以尝试一下定时构建,下面这个代码表示每 5 分钟构建一次。

  1. 选择你的构建环境,这里选择刚才配置的 nodejs。

  1. 点击增加构建步骤,windows 要选 execute windows batch command,linux 要选 execute shell

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

  1. 保存后,返回首页。点击项目旁边的小三角,选择 build now

  1. 开始构建项目,我们可以点击项目查看构建过程。

  1. 构建成功,打开 http://localhost:8080/ 看一下结果。

  1. 由于刚才设置了每 5 分钟构建一次,我们可以改变一下网站的内容,然后什么都不做,等待一会再打开网站看看。

  1. 把修改的内容提交到 Gitea 服务器,稍等一会。打开网站,发现内容已经发生了变化。

使用 pipeline 构建项目

使用流水线构建项目可以结合 Gitea 的 webhook 钩子,以便在执行 git push 的时候,自动构建项目。

  1. 点击首页右上角的用户名,选择设置

  1. 添加 token,记得将 token 保存起来。

  1. 打开 Jenkins 首页,点击 新建 Item 创建项目。

  1. 点击构建触发器,选择触发远程构建,填入刚才创建的 token。

  1. 选择流水线,按照提示输入内容,然后点击保存

  1. 打开 Jenkins 安装目录下的 jenkins.xml 文件,找到 <arguments> 标签,在里面加上 -Dhudson.security.csrf.GlobalCrumbIssuerConfiguration.DISABLE_CSRF_PROTECTION=true。它的作用是关闭 CSRF 验证,不关的话,Gitea 的 webhook 会一直报 403 错误,无法使用。加好参数后,在该目录命令行下输入 jenkins.exe restart 重启 Jenkins。

  1. 回到首页,配置全局安全选项。勾上匿名用户具有可读权限,再保存。

  1. 打开你的 Gitea 仓库页面,选择仓库设置

  1. 点击管理 web 钩子,添加 web 钩子,钩子选项选择 Gitea
  2. 目标 URL 按照 Jenkins 的提示输入内容。然后点击添加 web 钩子

  1. 点击创建好的 web 钩子,拉到下方,点击测试推送。不出意外,应该能看到推送成功的消息,此时回到 Jenkins 首页,发现已经在构建项目了。

  1. 由于没有配置 Jenkinsfile 文件,此时构建是不会成功的。所以接下来需要配置一下 Jenkinsfile 文件。将以下代码复制到你 Gitea 项目下的 Jenkinsfile 文件。jenkins 在构建时会自动读取文件的内容执行构建及部署操作。
pipeline {
    agent any
    stages {
        stage('Build') {
            steps {  // window 使用 bat, linux 使用 sh
                bat 'npm i'
                bat 'npm run build'
            }
        }
        stage('Deploy') {
            steps {
                bat 'xcopy .\\build\\* D:\\node-server\\dist\\ /s/e/y' // 这里需要改成你的静态服务器资源目录
            }
        }
    }
}
  1. 每当你的 Gitea 项目执行 push 操作时,Gitea 都会通过 webhook 发送一个 post 请求给 Jenkins,让它执行构建及部署操作。

小结

如果你的操作系统是 Linux,可以在 Jenkins 打包完成后,使用 ssh 远程登录到阿里云,将打包后的文件复制到阿里云上的静态服务器上,这样就能实现阿里云自动部署了。具体怎么远程登录到阿里云,请看下文中的 《Github Actions 部署到阿里云》 一节。

目录
相关文章
|
1月前
|
开发工具 git
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
174 68
如何操作github,gitee,gitcode三个git平台建立镜像仓库机制,这样便于维护项目只需要维护一个平台仓库地址的即可-优雅草央千澈
|
4月前
|
编解码 Oracle Java
java9到java17的新特性学习--github新项目
本文宣布了一个名为"JavaLearnNote"的新GitHub项目,该项目旨在帮助Java开发者深入理解和掌握从Java 9到Java 17的每个版本的关键新特性,并通过实战演示、社区支持和持续更新来促进学习。
129 3
|
3月前
|
监控 前端开发 jenkins
Jenkins 在前端项目持续部署中的应用,包括其原理、流程以及具体的实现方法
本文深入探讨了Jenkins在前端项目持续部署中的应用,涵盖其基本原理、流程及具体实现方法。首先介绍了Jenkins的基本概念及其在自动化任务中的作用,随后详细解析了从前端代码提交到生产环境部署的全过程,包括构建、测试、部署等关键步骤。最后,强调了持续部署中的代码质量控制、环境一致性、监控预警及安全管理等注意事项,旨在帮助开发者高效、安全地实施持续部署。
91 5
|
4月前
|
存储 前端开发 JavaScript
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
本文介绍了10个极具价值的GitHub存储库,旨在帮助各级JavaScript开发人员提升技能。这些资源涵盖了从基本概念到高级算法、编码风格指南、面试准备等各个方面,包括经典书籍、实用工具和面试手册。无论您是刚入门的新手还是有经验的开发者,这些存储库都能为您提供丰富的学习资源,助您在JavaScript领域更进一步。探索这些资源,开启您的学习之旅吧!
88 0
🚀 10 个 GitHub 存储库,助你成为前端巨匠✨
利用 GitHub Actions 自动化你的软件开发流程
在现代软件开发中,自动化是提升效率与质量的关键。GitHub Actions 作为 GitHub 的强大自动化工具,允许你在仓库中自动执行多种任务,如测试、打包、部署代码及自动合并 Pull Requests。本文介绍了 GitHub Actions 的核心概念、设置方法及其实用示例,帮助你快速上手并优化开发流程。通过 YAML 文件定义的工作流程可显著提高工作效率和代码质量。
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是由 GitHub 提供的自动化工具,可让你在仓库中触发和执行自动化工作流程,如自动运行测试和部署应用。其核心概念包括工作流程(定义在 YAML 文件中的一系列自动化步骤)、作业和步骤。本文将指导你如何设置和使用 GitHub Actions,并提供实用的自动化示例,帮助你提高开发效率和代码质量。通过简单的配置文件,你可以实现自动运行测试、部署应用甚至自动合并 Pull Requests。
|
6月前
|
存储 安全 Java
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
在一次意外中,作者因三年前将测试代码遗忘在GitHub上而遭遇了代码被他人fork的问题。为解决这一危机,作者详细介绍了如何通过GitHub的DMCA下架通知流程安全删除敏感代码,包括处理私人信息和商标侵权的具体步骤。本文不仅提供了实用的操作指南,还强调了及时响应的重要性,帮助读者避免类似风险
134 1
【事故】记一次意外把公司项目放到GitHub并被fork,如何使用DMCA下架政策保障隐私
|
5月前
|
开发者
利用 GitHub Actions 自动化你的软件开发流程
在快速发展的软件开发环境中,自动化对于提升效率与质量至关重要。GitHub Actions 作为一款强大的工具,能帮助开发者实现从自动运行测试到部署应用等工作的自动化。本文详细介绍了 GitHub Actions 的核心概念、设置方法及实际应用示例,如自动测试、部署和合并 Pull Requests,助力提升开发流程的自动化水平。
|
6月前
|
SQL JavaScript 前端开发
Github 2024-08-05 开源项目周报 Top15
根据 Github Trendings 的统计,本周(2024年8月5日统计)共有15个项目上榜。以下是根据开发语言汇总的项目数量: - Go 项目:4个 - JavaScript 项目:3个 - Python 项目:3个 - Java 项目:2个 - TypeScript 项目:2个 - C 项目:1个 - Shell 项目:1个 - Dockerfile 项目:1个 - 非开发语言项目:1个
202 2
利用 GitHub Actions 自动化你的软件开发流程
GitHub Actions 是 GitHub 提供的自动化工具,可在仓库中触发和执行工作流程,包括自动运行测试、部署应用等。其核心概念包括工作流程(Workflow)、作业(Job)和步骤(Step),均定义在 YAML 文件中。本文将指导你如何设置和使用 GitHub Actions,并提供自动运行测试、部署应用及合并 Pull Requests 的示例,帮助提高开发效率和代码质量。

热门文章

最新文章