从Vite前端到Express后端：完整理解服务器工作原理

如果你是刚开始学习后端开发的初学者，或者已经了解基础知识但想更深入理解服务器、路由请求等核心概念，这篇文章会对你很有帮助。

刚开始感到困惑是很正常的，不用着急一下子全部理解。随着实践经验的积累，你会慢慢掌握这些知识。希望这篇文章能帮你理清思路，或者巩固你已经知道的内容。

我们将讨论以下重要概念：

前端路由和后端路由的区别
从源代码到服务器的完整流程
开发环境和生产环境的本质差异
Express中路由顺序的重要性

前端路由 vs 后端路由

路由指的是当用户访问特定URL时，决定应该返回哪段代码或哪个页面。这是前后端开发的第一大区别。

前端路由（Vite + react Router）

使用现代前端框架（如React with Vite）时，我们不需要手动处理静态文件的路由：

开发服务器很智能：Vite的开发服务器专门为快速开发设计。它知道如何读取src目录下的源文件，并自动在对应的URL下提供这些文件。

自动路由：如果我们的html或React代码引用了/styles/main.css，Vite服务器立即知道在哪里找到这个物理文件（在内存或文件系统中），并立即发送给浏览器。我们不需要为这个写特殊代码！

专注于应用逻辑：使用React Router这样的库，我们只需要关注应用逻辑（比如"如果URL是/profile，就显示Profile组件"）。这种路由发生在浏览器中，在JavaScript文件加载之后。

后端手动路由（Express.js）

Express.js是一个轻量级框架，它没有内置的"魔法"功能。

路由需要手动设置：一旦让Express.js作为主服务器，我们必须明确告诉它对每个到达的请求做什么。

我们想要处理POST /api/login请求来验证密码？必须写app.post('/api/login',...)。

我们想要处理GET /api/users请求来返回用户列表？必须写app.get('/api/users', ...)。

不认识静态文件：如果没有指令，当收到/main.css请求时，Express不知道这是一个静态文件。它会寻找API路由或渲染逻辑。如果找不到，就会返回404错误。

刚开始时，Vite开发服务器在背后做了很多自动工作，它自动处理所有路由和静态文件服务。但当我们引入Express.js时，这种自动魔法就消失了。Express需要我们明确指示：必须手动定义API路由，更重要的是必须使用express.static()来告诉Express："静态文件都在这里"。没有这一步，我们的CSS和JavaScript文件对服务器就是不可见的，页面就会显示异常。

从源代码到服务器的完整流程

开发环境中的静态文件：

在React项目中运行npm run dev时：

没有物理文件夹：Vite服务器直接从src目录读取文件（.jsx、.css等），并保持在内存中。它不会创建包含编译后文件的物理文件夹。

速度快：我们保存的任何更改都通过热重载立即传输到浏览器，让编码体验很流畅。

不适合生产环境：虽然速度快，但这种模式不稳定、不安全，也没有为成千上万的真实用户访问进行优化。

从src到dist：

什么时候以及为什么需要编译？在发布应用（进入生产环境）之前，我们必须编译代码：

编译命令：npm run build。

优化处理：这个命令会获取所有源文件（React、CSS等），进行压缩（让文件更小）、合并（打包成更少的文件包），并为最大加载速度进行优化。

生成dist：所有优化后的文件都放入一个新的物理文件夹，通常叫dist或build。这个文件夹包含前端最终版本的静态文件，准备被提供服务。

使用express.static()：

如何提供dist文件夹服务？现在我们有了优化后的dist文件夹，必须告诉Express（后端）需要公开提供这个文件夹的服务：

解决方案是express.static()：这行代码是我们给Express服务器的指令：

// 在生产环境中，Express服务前端的'dist'文件夹
app.use(express.static(path.join(__dirname, 'client/dist')));

它的作用：当HTTP请求到达服务器且不匹配任何我们定义的API路由（比如不以/api开头）时，Express会在dist文件夹中查找！如果找到匹配请求URL的文件（比如/style.css），它会立即发送给客户端并停止路由过程。

开发环境 vs 生产环境

如果在前后端项目中都看到npm run dev命令，可能会以为它们做同样的事情。其实不是！这是关键区别，特别是在考虑安全性和性能时。

两个npm run dev：两个服务器，两个目的

当我们谈论开发模式和生产模式时，描述的是运行代码的状态和目的。

开发模式（我们的工作台）：

开发模式是我们的工作台，为速度和调试优化。

目的：唯一目标是促进快速编码、测试和调试。

前端设置：服务器在一个端口（如5173）运行Vite开发服务器。

后端工具：使用nodemon等工具，在保存更改时自动重启服务器。

错误信息：错误信息详细且直接打印到控制台，帮助你立即修复问题。

优化：文件按原样提供，优化最少，因为文件大小和速度不是主要关注点。

生产模式（线上公共服务器）：

生产模式是交付给公众的最终优化版本，为稳定性和安全性构建。

目的：目标是向公众提供稳定、快速、安全的体验。

前端设置：前端代码先构建（编译和压缩），然后由单个Express服务器在其指定端口（如3000）提供服务。

后端工具：使用高度优化的进程管理器（如PM2）来保持服务器持续稳健运行。

错误信息：错误在内部记录，但从不向公众用户显示，防止安全泄露。

优化：文件被深度压缩并积极缓存，以获得最大性能和更快的加载速度。

安全风险：

为什么不在生产环境运行开发模式？在公共服务器上以开发模式运行Express服务器是严重的安全漏洞，强烈不建议这样做。

安全泄露：开发错误通常包含敏感数据，比如服务器上的文件路径、环境变量，甚至数据库结构的片段。向攻击者透露这些信息是严重漏洞！

性能问题：开发模式为便利性而非速度构建。在真实用户负载下，会经历慢响应时间、差的资源管理和有限的可扩展性。

稳定性问题：像nodemon这样的工具旨在保存更改时重启代码。这种行为对于需要24/7运行的公共应用来说是不可预测且高度不稳定的。

路由顺序的重要性

现在来看看以正确顺序设置路由和中间件的关键过程，确保Express正确处理所有请求。

中间件的作用：app.use()

在Express中，中间件就是在请求-响应周期中执行的函数。它可以访问请求对象req、响应对象res和周期中的下一个函数next。

app.use(middleware)：这个方法主要用于注册中间件。它对所有HTTP方法（GET、POST等）和所有路径执行提供的函数（除非我们指定路径前缀）。

黄金规则：中间件按照代码中定义的准确顺序执行。一旦中间件发送响应（比如res.send('Hello')），周期就停止，后续的中间件或路由处理程序都不会执行。

示例执行顺序：

app.use(cors())
app.use(express.json())
app.use('/api', apiRouter)
app.use(express.static(dist_path)) // 这是关键分隔点！
// ... 其他路由 ...

React Router的陷阱：

为什么需要app.get('*')？这是将后端逻辑连接到前端应用的最后一块拼图。

目的：app.get('')路由是通配处理程序。它使用通配符来匹配任何之前定义的中间件或路由没有处理的GET请求。

场景：当用户在浏览器中直接输入像mysite.com/profile这样的链接时，服务器看到对/profile的请求。

Express检查API路由（如/api）。不匹配！

Express检查express.static()中是否有名为profile的文件。不匹配！

请求落到app.get('*')。

解决方案：我们告诉Express对任何不匹配的路径都提供主应用文件（index.html）。

app.get('*', (req, res) => {
    // 告诉Express："发送HTML文件，让React Router处理URL"
    res.sendFile(path.resolve(FRONTEND_BUILD_PATH, 'index.html'));
});

结果：浏览器加载index.html，React接管，React Router读取/profile URL并显示正确的组件，让单页应用体验无缝衔接。

总结

如果你是后端开发的初学者，这些东西没有立即理解，不要灰心，刚开始确实会让人困惑。我想我们刚开始时都有过这些问题。

主要挑战是我们需要转变思维方式和思考角度，从前端工具如Vite的自动内存服务，转向Express更手动和结构化的路由方法。

希望这篇文章对你有帮助，或者让你回想起刚开始学习后端时的挣扎经历。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13082