这里，作者决定反其道而行之，从用户端（终端）反推，而不是正面放弃前端发布的整个链接。这是为了帮助大家更好的理解。
问题：反向用户如何访问Web应用程序？
哦，还有，当你第一次在地址栏中输入一个URL时，浏览器会根据该URL进行域名解析，从浏览器的缓存、本地主机和DNS节点中找到该域名对应的IP地址。访问根DNS服务器并发起TCP链接。三次握手……哦，坏习惯还是太多了。抱歉，我们再试一次。
CDN。用户通过地址访问CDN，检索HTML文件，下载并解析HTML文件内容，加载其他相应资源。 （如何获取CDN的资源？） 文件服务器（指资源所在的源服务器，以下统称“文件服务器”）。 CDN 根据用户访问将资源返回到文件服务器。 （我们如何获取文件服务器的资源？） 文件传输。打包后的dist 产品通过某种方式传输到文件服务器，例如rsync。 （dist 产品是如何创建的？） 项目打包。以SPA项目为例，通过特定的前端打包工具对代码进行打包，得到产品。 （代码从哪里来？）代码仓库。开发人员在本地进行业务开发，然后提交代码到代码仓库。 git、gitlab 等
上面的五个推理点很可能就是你实现前端部署自动化需要做的事情。您需要实现的前端发布平台组织了完成上述步骤的自动化过程所需的功能点。
为用户提供前端界面，用于配置项目、触发构建和其他数据库，并存储用户项目配置信息、构建记录和其他构建自动化。包括拉取代码、运行打包命令和与文件服务器同步的其他文件（文件上传），以及更新CDN 缓存（通常为index.html），以便用户可以访问现代Web 应用程序。
插图是作者亲自绘制的，请参考以加深理解。
如上图所示，这本质上是构建前端发布平台最基本的特征点。接下来，我们将对每个链接进行解释。
一、为什么需要自动化部署？
二、如何着手发布平台？
准备前端项目
我认为每个人都比我更擅长前端项目。我简单解释了这部分。
作者只需使用vite新建一个Vue3项目即可~
pnpm 创建vite CICD-fe
复制代码
运行项目，让它完成~
2、前端需要实现的功能有：
* 提供项目部署的**配置**操作。喜欢：
+ 代码仓库地址
+ 需要建立的分支
+ 项目打包命令
+ 上传到对应文件服务器路径
+ 访问运行环境中的域名映射关系！[](https://img-blog.csdnimg.cn/img_convert/b54f296822d64d1786a1b923dc760172.webp?x-oss-process=image/format,png)
* **提供构建控制操作**。喜欢：
+ 开始建造
+ 停止施工
+ 回滚操作
* **显示构建信息**。喜欢：
+ 构建日志输出（**jenkins** 控制台输出）
+ 构建进度提示！[](https://img-blog.csdnimg.cn/img_convert/61091dfde20d7e6fbe239d634abcdd9a.webp?x-oss-process=image/format,png)
现在，这里就大致介绍一下前端项目的准备工作以及前端需要实现的功能。有关前端的更多实用细节，请继续关注本系列的最后一篇文章：全栈前端发布平台的实际应用！
三、实战前端发布平台技术准备
准备后端项目
首先确定整个后端的目录结构。我不是专业的后端，但是我还是需要模仿一下MVC的架构模型。
| — CICD-node # 项目名称
| — 包.json
| — pnpm-lock.yaml # 锁定文件
| — src # 项目代码目录
| — config #项目配置
| — Controller #接口实现层
| — Model # 数据模型层，定义数据的模式。
| — Route # 路由层
| — 服务#接口，数据嫁接层
复制代码
这是实际后端目录结构的最基本的定义。当然，以后还会添加一些新的目录（jenkins、gitlab、middleware等）。这些作者在使用时都会详细解释。本文建议您应该在项目中尽可能多地进行原型设计。详细的后端实用信息请看作者专栏系列第二篇！
那么整个后端各层之间的关系就会如下图所示。
简单来说，用户发起请求——根层——控制器层——服务层——数据库
2. 运行后端项目。
您所要做的就是运行该过程。本专栏的第二部分（包括数据库部分）将介绍详细的后端实践。如果您向Postman 提交请求并且该请求已成功处理并发回，那么您就可以开始了！
* 首先，创建`koa`并运行程序。
Resume Master采取了行动，从官方文档中复制了代码。
””
const Koa=require(\’koa\’);
const app=new Koa();
app.use(异步ctx={
ctx.body=\’你好世界\’;
});
应用程序.听(3000);
复制代码
””
再次设置“package.json”，更容易启动。
””
\’脚本\’: {
\’dev\’: \’node ./src/index.js\’ //运行入口文件
}
复制代码
””
直接运行“pnpm dev”，打开*localhost:3000*即可查看效果。
* 实现路由层。
这里我们使用“koa-router”。首先，“安装”它。有关该库的更多信息，请直接查看[github]()。
按照上面的Koa 示例，根据路由器的文档进行某些更改，创建并测试“get”和“post”。
””
const Koa=require(\’koa\’)
const Router=require(\’@koa/router\’)
常量路由器=新路由器()
const app=new Koa();
//获取请求
router.get(\’/test\’, (ctx, next)={
ctx.body={
代码： 0,
data: { name: \’Jin Bolanget\’ }
}
})
//发布请求
router.post(\’/test\’, (ctx, next)={
ctx.body={
代码： 0,
data: { name: \’金柏然帖子\’ }
}
})
应用程序
.use(路由器.routes())
.use(router.allowedMethods())
应用程序.听(3000);
复制代码
””
启动服务后，通过postman检查效果。第一个是“获取”请求。
然后是“post”请求：
您可以看到所有请求均成功，后端项目已基本准备就绪。当然，在真正的战斗中，并不是像例子中那样，所有的路线都会堆积在入口文件中。在“index”条目上运行。然后创建一个**中间件**，统一封装返回数据的外壳，比如错误处理时返回什么代码，未登录时返回什么代码等等都需要去做。详情请关注作者第二篇文章！我们看看后端需要实现什么功能。
后台需要实现的功能有：
实现与前端的交互。
处理前端发起的配置保存、构建、回滚和其他操作，并返回前端与gitlab 交互所需的数据。
获取gitlab仓库信息、分支信息等获取gitlab提交记录等与Jenkins集成。
通过启动构建、停止构建、获取构建状态、构建日志等与数据库进行交互。无论如何，这都是一种非常庸俗的策略。
1. 前端
Jenkins 可能是前端专业人士最不熟悉的。谁有时间回去做这样的事情呢？所以当我们开始谈论Jenkins时，我们需要介绍一下Jenkins是什么。为此！作者还请教了几位运维专家，如何用大家都能理解的方式来讲解Jenkins。让我总结一些要点。
它是一个流水线工厂，集成了多个主流的打包和编译插件。通过原生提供UI界面交互，并通过界面完成项目构建配置，用户可以在一处实现CI/CD流程。从代码拉取、代码分析、编译、归档到部署全自动化实现。它支持多种脚本构建（例如脚本管道）并提供高度的自由度。
嗯，这可能很难解释，但毕竟不接触过就很难有这样的概念。简而言之，您只需要知道如何使用Jenkins 自动化git pull、npm ci 和npm run 构建操作即可。对Jenkins的粗浅了解并不影响自动化前端部署发布平台的实现。
2. 后端
从代码拉取、代码分析、编译、归档到部署全自动化实现。
4.支持多种脚本构建（如脚本管道），提供高度自由度。
嗯，这可能很难解释，但毕竟不接触过就很难有这样的概念。简而言之，您只需要知道如何使用Jenkins 自动化git pull、npm ci 和npm run 构建操作即可。对Jenkins的粗浅了解并不影响自动化前端部署发布平台的实现。
3. jenkins
#Jenkins+Node+Vue真正的前端自动化部署平台_jenkins pnpm 以上相关内容来源网络，仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92043.html
