开发环境服务器 vs 生产环境服务器：开发与生产须分明

【背景】作为开发者，我们在不同的阶段都与两种服务器环境打交道——开发环境服务器和生产环境服务器。虽然听起来名字相似，但它们的职责和工作方式简直是天差地别！

不知道朋友们有没有跟我一开始刚了解的时候的一些疑惑，因为刚开始我们并没有实际在生产环境中的部署经验，只是一直在开发环境下练习如何开发项目，所以可能就会有一种疑惑，为什么通过 npm run dev 或者 pnpm dev 跑起来的服务器，不能直接在部署环境下直接启动呢？我在开发环境下都用着好好的，直接在服务器（这里说的是服务器托管平台租的服务器）中启动不就完事了，为什么还要高处什么Nginx、Tomcat、Nodejs来启动后端服务呢，搞那么麻烦。

哈哈哈哈，我不知道真的是我想太多了，还是也有朋友们跟我有一样的困惑。接下来就让我们了解一下两者如何在开发过程中各显神通吧，我保证我说完，你就能恍然大悟了。

一、开发环境服务器

在现代前端开发的世界里，构建工具层出不穷，而 Vite 凭借其“快如闪电”的特性，迅速成为开发者们的宠儿，所以我们就以他为例来讲解了。

1. 开发环境服务器是什么？

开发环境服务器的核心目标是——让开发变得快速、方便和灵活。开发时，我们最需要的是效率，而非高超的性能。所以，开发环境服务器提供的服务更侧重于实时调试和快速反馈。你会发现，它就像一位无所不能的助手，时刻准备好帮助你迭代和修复代码。

2. 为什么Vite是如此惹人喜欢呢？

好像有点点偏题了，但是既然提到了他，就也介绍一下吧，不然不尊重它了。但是什么他是谁开发的，怎么开发的这些就不介绍了，主要讲一下他的功能。

在开发环境下，Vite 的开发服务器扮演了静态资源托管的角色。具体来说：

静态资源托管
- 当你在浏览器中访问 Vite 开发服务器（通常是 http://localhost:5173），它会响应你的请求，提供静态资源（如 HTML、CSS、JS 和图片）。
- Vite 使用现代浏览器支持的原生 ESModules 来加载 JavaScript，直接通过 HTTP 请求获取模块并动态解析依赖。
快速热更新（HMR）：Vite 的开发服务器除了托管静态资源，还提供热更新功能（HMR）。当你修改代码时，Vite 会实时推送更新到浏览器，而不需要刷新整个页面。

3. 开发环境服务器的特点

代码托管： 开发环境服务器只是把你的HTML、CSS、JS文件提供给浏览器渲染。它不涉及复杂的性能优化，专注于让你快速看到结果。
极速响应： 只要你修改了一行代码，Vite就像闪电一样把修改结果呈现在浏览器里，不等待，不犹豫。
开发体验： 你可以专注于功能和界面，像在草稿纸上一样，不断修改，快速预览。

看到这里，我先是介绍了一下生成服务器的作用和功能，可能你会觉得，这些我都知道呀，网上到处都能看到的这些介绍。并不是卖关子哈，而是我还是想后面介绍完生成服务器之后一起来对比分析，他俩的差别

二、生产环境服务器：Nginx与Node.js，稳重且强大💪

1. 什么是生产环境服务器？

与开发环境的轻快与灵活不同，生产环境服务器肩负着重任——它不仅需要高效稳定，还得能应对大量的用户请求。生产环境的目标是提供稳定、可靠、且高性能的服务，确保在流量高峰时网站不会“瘫痪”。

我们接下来介绍两个常用的生产环境下的部署服务器

2. Nginx：高效的反向代理和静态资源托管专家

Nginx 是一位经验丰富的服务器大师，它不仅能处理静态资源，还能做负载均衡、反向代理、缓存等。它能让你的网站在真实环境中“高枕无忧”，不怕流量洪水冲击。

Nginx的几大必杀技：

反向代理： 通过将请求转发给后端服务器，Nginx可以减轻单一服务器的压力。
负载均衡： 当流量较大时，Nginx会自动将请求分配给多台服务器，避免服务器“超载”。
静态资源托管： 它能高效处理HTML、CSS、JS文件，确保页面加载速度极快。
缓存机制： Nginx可以缓存静态资源，提高请求的响应速度。

对于开发者来说，使用Nginx就像给你的应用加上了“护盾”，让它能够在面对高并发流量时依然稳如泰山。

server {listen 80;server_name example.com;location / {root /path/to/your/build/directory;try_files $uri $uri/ /index.html;}
}

3. Node.js：高效处理后端逻辑和API请求

Node.js作为后端技术，专注于处理API请求和业务逻辑。它以非阻塞I/O和事件驱动架构闻名，能够在高并发的情况下保证性能。

生产环境中的Node.js，通常用来处理前端发送的请求，进行数据处理、权限验证等。如果你希望你的应用能够快速响应用户的请求，Node.js无疑是一个强大的选择。

// 使用Express.js处理API请求
const express = require('express');
const app = express();

app.get('/api/products', (req, res) => {res.json({ products: [] }); // 返回产品列表
});

app.listen(3000, () => {console.log('API server running on port 3000');
});

4. 生产环境服务器的特点：

(1) 处理请求分发和静态资源托管

静态资源： 将 HTML、JS、CSS 等资源交给浏览器。
API 请求： 将 API 请求转发到后端逻辑处理器（如 Node.js）。

(2) 支持多种协议和优化

比如 Nginx 可以：

支持 HTTPS 协议，提升安全性。
启用缓存，减少服务器负载。
配置负载均衡，提高并发能力。

(3) 提高系统稳定性

生产环境中，前端和后端职责明确，有利于分开优化和维护。例如：

前端专注于用户体验（页面展示、动态交互）。
后端专注于业务逻辑（数据处理、权限校验）。

【生产服务器特点总结】

高可用性： 生产环境需要高可靠性，系统要能够稳定运行，不会宕机。

性能优化： 压缩、缓存、CDN等技术都可以帮助提升性能，确保用户在访问时获得快速的响应。

安全性： 使用HTTPS、权限控制、身份验证等手段保护数据安全，防止恶意攻击。

监控和日志： 在生产环境中，监控系统的运行情况并记录详细日志是必须的，便于问题的及时发现与修复。

三、开发环境与生产环境的区别：一张表清晰对比

我们先总体上来总结对比一下：

特性	开发环境（Vite）	生产环境（Nginx、Node.js）
目标	快速开发与调试，提升开发效率	提供稳定、可靠的生产服务
性能优化	追求开发效率，性能非首要目标	高性能，支持大流量与高并发
安全性	安全性较低，主要用于调试	高安全性，启用HTTPS等防护
配置复杂度	简单、轻便，开箱即用	配置复杂，需要考虑负载均衡等
使用场景	本地开发调试，快速预览	用户访问，生产环境部署

四、回归话题：为什么 Vite 不能直接用作生产服务器？

相信大家看完上面的内容，应该也是大体上有一定的理解了，其实很简单。虽然 Vite 和 Nginx/Node.js 都叫“服务器”，但它们的职责和能力完全不同。

Vite 是一个轻量级的开发工具，它的“服务器”能力仅限于静态资源托管。

Nginx/Node.js 是面向生产环境的通用服务器，就是它们又可以托管静态资源，当客户端请求这个服务器下对应的端口时，也可以返回响应静态资源，又可以处理多种类型的请求、实现复杂的后端逻辑。

1. Vite 和后端服务器到底有何不同？

可以把 Vite 和 Nginx/Node.js 的分工比作一个城市的快餐店和中央厨房：

Vite 是快餐店

快速出餐（预览前端页面）。
提供简单的菜单（HTML、JS、CSS）。
不做复杂加工（不处理后端逻辑）。

Nginx/Node.js 是中央厨房

负责全城的配餐（处理 API 请求）。
储备丰富的原材料（数据库交互）。
考虑如何高效、卫生、安全地运作（高并发处理、负载均衡、权限校验）。

两者的职责完全不同。你可以在开发时用快餐店（Vite）解决问题，但到了正式营业（生产环境），必须依靠中央厨房。即利用开发服务器的热更新等特性，快速构建和开发项目，然后生产环境下需要考虑到安全性、后端处理逻辑和性能等，只有生产服务器才有这些能力。

现在大家应该完全理解为什么不能如我们所愿了吧，我们在开发学习或者练习过程后对开发环境服务器的配置和使用已经很熟悉了，为什么不能直接在生产环境下也直接来一个 npm run dev 开启一个服务器端口（比如 Vite 默认使用的 5173）呢？还要搞出一套 Node.js 和 Nginx 等另外一套操作。

【Vite：“哥，不是我不配合你的思维呀，是我的开发者没给我赋予这些职责和能力呀，我的工作只是提供静态资源和模块热更新，无法处理业务逻辑！😭”】