基于nestjs框架开发前端应用自动部署系统

引言

随着互联网技术的迅速发展，前端在线部署系统在软件开发过程中扮演着越来越重要的角色。然而，目前市场上的部署系统存在一些问题，如复杂的操作、不严格的权限管理以及低构建效率等，这些问题不仅影响了开发效率，也降低了项目交付的质量。为了解决这些问题，我们提出了一个功能齐全的前端CI/CD部署系统，旨在为开发者提供更便捷、更高效的部署环境。

前端CI/CD部署系统是一种先进的应用程序部署方式，它结合了持续集成（Continuous Integration）和持续交付（Continuous delivery）两种技术。这种系统能够自动化完成代码构建、测试、部署等任务，大大提高了开发流程的效率。此外，前端CI/CD部署系统还具有严格的权限管理功能，能够确保项目安全可靠地交付。

在本文中，我们将深入探讨前端CI/CD部署系统的设计和实现过程。首先，我们将介绍该系统的架构和组成部分；然后，我们将详细阐述该系统的各种功能和特点，以及它如何解决市场上的部署系统存在的问题；最后，我们将探讨该系统在前端开发过程中的应用价值和意义。

未来，我们将继续完善前端CI/CD部署系统，提高其安全性、稳定性和拓展性，并探索其在前端开发过程中的广泛应用。我们相信，这种系统将为前端开发领域带来革命性的变化，提高软件开发的效率和质量。

1. 初始化阶段

1.1 react项目多环境适配

创建环境配置文件：为每个环境（例如开发环境、测试环境和生产环境）创建一个独立的配置文件。在项目根目录下创建一个 config 文件夹，并在其中创建相应的配置文件，如 development.js、test.js 和 production.js。

定义环境变量：在每个配置文件中，定义与该环境相关的变量。这些变量包括 API 地址、密钥、日志级别等。根据不同的环境，这些变量值将会有所不同。

根据环境加载配置：在项目中的启动文件（例如 index.js 或 nest.config.js）中，根据当前环境加载相应的配置文件。使用条件语句或工具库来判断当前环境，并导入对应的配置。

使用环境变量：在项目中的需要使用配置的地方，使用相应的环境变量。例如，在 API 请求中使用配置的 API 地址。

1.2 nestjs项目多环境适配

在根目录下创建一个 config 文件夹，并在其中创建三个配置文件：development.js、test.js 和 production.js。在每个配置文件中，定义相应的环境变量。

然后，在 nest.js 项目的 nest.config.js 文件中，根据当前环境加载相应的配置文件，在项目中使用配置的环境变量。通过这种方式，根据不同的环境灵活地配置并使用不同的变量。这样nest.js 项目就能够适应多个环境的需求。

1.3 react分辨率适配

利用 React 提供的条件渲染功能，在组件中根据屏幕尺寸判断渲染的内容。使用 window.innerWidth 获取当前窗口宽度，在组件的 render 方法中根据宽度进行条件判断。

使用弹性布局（Flexbox）或网格布局（Grid）等技术，使组件在不同屏幕尺寸下自适应调整布局。通过设置容器和元素的宽度、高度、间距等属性，实现响应式布局。

使页面在不同设备上都能呈现出最佳的布局和样式。

1.4 依赖包的管理

使用 npm 或者 yarn 进行依赖包的管理。

初始化项目：在项目根目录执行以下命令，初始化一个新的 Node.js 项目：

创建一个 package.json 文件，用于管理项目的依赖包和其他配置。

安装依赖包：在项目根目录下执行以下命令，安装需要的依赖包：

安装完成后，相关的依赖包将会被下载并保存到 node_modules 文件夹中，并在 package.json 文件的 dependencies 中进行记录。

安装开发依赖包：除了项目运行时所需的依赖包外，还可通过该方式安装开发时所需的工具和库。

安装完成后，相关的开发依赖包将会被下载并保存到 node_modules 文件夹中，并在 package.json 文件的 devDependencies 中进行记录。

版本管理：为了确保项目的稳定性和一致性，在 package.json 文件中明确规定每个依赖包的版本号。通过手动编辑 package.json 文件进行版本管理。

2. 开发阶段

2.1 封装通用拦截器

使用 axios 库来发送网络请求，并封装通用的拦截器（interceptor）来处理请求和响应。

创建一个 api.js 文件并编写通用拦截器的封装代码：

使用 axios.create() 创建了 axios 实例，并定义了请求的基础 URL 和超时时间。通过 interceptors 属性添加了请求拦截器和响应拦截器。在这些拦截器中，根据需要对请求和响应进行处理。

在其他文件中使用封装好的拦截器发送请求：

通过 import 导入封装好的 axios 实例，并使用该实例发送请求。

通过以上步骤，在 React 项目中封装通用的拦截器，并使用封装好的实例发送网络请求。根据具体需求进行更复杂的拦截器逻辑的编写，如处理请求头、处理错误状态码等。

2.2 接入码云API

通过码云 API 获取用户的账号信息和仓库权限，使用码云提供的身份验证机制和相应的 API 。

首先，在码云上创建一个应用并获取到应用的 Client ID 和 Client Secret，这些信息将用于身份验证。

创建一个名为 gitee.js 的文件，并编写访问码云 API 的代码。

使用了 axios 库来发送 HTTP 请求。getAccessToken 函数用于获取访问令牌（access token），getUserInfo 函数用于获取用户信息，getRepositoryPermissions 函数用于获取用户在指定仓库的权限。

在 nest.js 页面或 API 路由中获取用户账号信息以及仓库权限。

使用 useEffect 钩子来在页面加载时获取用户信息和仓库权限。首先，我们从 URL 查询参数中获取授权返回的 code，并使用 getAccessToken 函数获取访问令牌。然后，我们使用 getUserInfo 函数获取用户信息，并使用 getRepositoryPermissions 函数获取仓库权限。

2.3 整合Jenkins API

本项目中需要安装和配置 Jenkins。

在服务器上，需要安装并配置一个 Web 服务器（如 Nginx 或 Apache）来托管前端应用的构建文件。

在服务器上创建一个目录用于存储最新的前端构建文件。

编写一个脚本或者使用现有的工具（如 Shell 脚本），在 Jenkins 构建成功后将生成的前端构建文件复制到服务器目录。

整合 Jenkins API：在前端部署平台的页面添加一个按钮或者表单，用于手动触发 Jenkins 项目的构建。使用 Jenkins 提供的远程 API，发送 POST 请求到 Jenkins 项目的构建接口，以触发构建。

通过上述步骤，搭建一个简单的前端应用部署平台，并与 Jenkins API 进行整合。当点击部署按钮或提交表单时，前端应用的最新代码将会被构建并部署到服务器上。

另外通过整合Jenkins API，系统利用Docker进行构建环境隔离，并使用Pipeline进行构建。

2.4 Websocket通信

在服务后端部署一个 WebSocket ，用于处理客户端与服务器之间的实时通信。使用 Socket.IO库框架来实现。

在前端应用中，通过 JavaScript 的 WebSocket API 连接到设置好的 WebSocket 服务中。

使用 WebSocket API 提供的方法（如 new WebSocket(url)），建立与服务器的连接。

在前端应用中，监听 WebSocket 事件，例如 onopen（连接建立成功）、onmessage（接收消息）、onclose（连接关闭）等事件。

在合适的时机触发相应的事件处理函数。

在后端服务器，处理 WebSocket 连接并实现相应的业务逻辑。当某个用户连接或断开连接时，将其对应的连接信息存储在服务器端。

当用户执行某个操作时，前端通过 WebSocket 发送相关消息给后端。

后端接收到消息后，处理相应的业务逻辑，并向所有连接的用户发送更新的消息，以实现项目状态的同步。

客户端通过 WebSocket 的 onmessage 事件接收到后端发送的消息。解析消息内容，并根据接收到的信息更新前端的项目状态。

通过以上步骤，在前端部署系统中使用 WebSocket 实现前后端通信，并解决多人登录时项目状态同步的问题。

3. 构建阶段

3.1 线上构建系统

将项目代码部署到 OBS（Object Storage Service）和 CDN（Content Delivery Network）上，以提高项目的抗压能力并减少运维成本和机器使用成本，按照以下步骤进行操作：

注册并配置 OBS：

访问云服务提供商的 OBS 服务（如华为云 OBS），注册一个账号并创建一个 OBS 存储桶。

配置存储桶的访问权限，设置为公共读或私有，根据需求来决定是否允许公开访问。

上传项目代码至 OBS：

使用 OBS 提供的命令行工具或 SDK，将项目代码上传至 OBS 存储桶。将整个项目打包为压缩文件（如 ZIP、TAR 等），或者直接上传各个文件和文件夹。

在 OBS 中保留项目代码的目录结构，以便后续 CDN 的配置。

注册并配置 CDN：

访问云服务提供商的 CDN 服务（如华为云 CDN），注册一个账号并创建一个 CDN 加速域名。

配置加速域名的源站为 OBS 存储桶的访问地址，如 https://.obs..myhuaweicloud.com。

配置 CDN 缓存规则，以便控制文件的缓存策略和过期时间。

配置项目前端代码访问 CDN：

在项目的前端代码中，将原来的资源引用路径（如 CSS、JavaScript、图片等）替换为 CDN 加速域名下相应资源的访问路径。

例如，将原来的 替换为 。

项目的前端代码部署至 OBS+CDN 上，有以下优势：

提高抗压能力：CDN 将静态资源缓存在全球各个 CDN 节点上，加速资源的访问并减轻源站的压力。

减少运维成本和机器使用成本：使用 OBS 存储项目代码，无需自己搭建和维护文件服务器；使用 CDN 加速域名访问项目代码，无需购买大量服务器和网络带宽。

3.2 HTTP缓存配置

配置适当的 HTTP 缓存模式提高项目的性能，减轻服务器负载并改善用户体验。考虑以下几种 HTTP 缓存模式：

协商缓存：

通过与服务器进行协商判断是否需要重新获取资源。若资源未过期，避免下载相同的内容，并返回 304 Not Modified 状态码，告知浏览器使用缓存副本。

CDN 缓存：

若使用 CDN 加速服务，在配置 CDN 时，设置 CDN 缓存的过期时间、缓存规则等。

动态缓存：

对于动态生成的内容，如页面、API 接口等，使用缓存服务器（如 Redis、Memcached 等）缓存生成的结果，减轻应用服务器的负载并提高响应速度。

3.3 应用部署后通过微信通知用户

通过微信通知用户前端应用自动部署的结果，按照以下步骤进行操作：

注册一个微信公众号或小程序的开发者账号，并完成相关的配置步骤，获取 AppID、AppSecret 等信息。

使用微信提供的客服消息功能，向用户发送通知消息。通过微信公众平台或微信开放平台进行接口配置和消息模板设置。

在后端服务中，将微信推送服务所需的配置信息（如 AppID、AppSecret）保存起来，用于后续与微信服务器进行通信。

在自动部署系统中，在部署过程的关键步骤或最后一步，加入相应的代码逻辑，将部署结果（成功或失败）传递给后端服务。

后端服务接收到前端应用自动部署的结果后，根据相应的代码逻辑，使用保存的微信配置信息，调用微信提供的接口，向用户发送通知消息。

当用户完成关注公众号或小程序，并将其接收消息的设置设为开启时，用户将能够在微信中接收到部署结果的通知消息。

4. 成果与结语

前端自动部署系统作为公司IT团队的一项重要成果，成功为数据营销团队和财务团队提供了有效的服务。该系统的使用覆盖了公司60多项前端项目，包括5 个公司业务重点项目。该系统支持4个环境的自动部署，日均构建20次，保证了项目的稳定性和安全性。过去的4个月中，该系统一直稳定运行，没有发生任何线上事故，为公司带来了极大的安全保障。

此外，该系统的使用还帮助公司节省了两名运维人员，60个服务器资源，总计50万人民币的运营成本。这一成果证明了该系统的价值和实用性，为公司业务发展提供了强有力的支持。

总的来说，前端自动部署系统是公司IT团队的一项优秀成果，为公司的业务发展带来了巨大的贡献。

作者简介：黄元（1994—），男，广西南宁人，本科，助理工程师，研究方向：计算机软件。