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

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


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


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

一、开发环境服务器

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

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

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

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

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

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

  1. 静态资源托管
    • 当你在浏览器中访问 Vite 开发服务器(通常是 http://localhost:5173),它会响应你的请求,提供静态资源(如 HTML、CSS、JS 和图片)。
    • Vite 使用现代浏览器支持的原生 ESModules 来加载 JavaScript,直接通过 HTTP 请求获取模块并动态解析依赖。
  2. 快速热更新(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 不能直接用作生产服务器

相信大家看完上面的内容,应该也是大体上有一定的理解了,其实很简单。虽然 ViteNginx/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:“哥,不是我不配合你的思维呀,是我的开发者没给我赋予这些职责和能力呀,我的工作只是提供静态资源和模块热更新,无法处理业务逻辑!😭”】

2. 工具链的分工让开发更高效

在现代前后端分离开发模式中,工具链的分工是优化开发和生产的关键:

  1. 开发阶段:使用 Vite 提供热更新和静态资源托管,让开发者快速调试和测试页面。

  2. 生产阶段:

    • 使用 Nginx 托管静态资源,同时充当反向代理,将 API 请求转发到 Node.js。

    • 使用 Node.js 处理后端业务逻辑,与数据库交互。

两者的分工明确,既提高了开发效率,也确保了生产环境的稳定和安全

至此,我们通过分析两种服务器的使用场景、功能支持与特点,解答了最初心里的小疑惑,其实就是各司其职嘛,还有就是,是 Vite 无法满足我们在生产环境下的需求,所以我们也不能将他用于生产环境。最后,希望这篇博客也能给各位朋友带来启发,欢迎一起交流和分享知识!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/63978.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Maxscript移动、旋转和缩放

3DMAX对象最常用的三种变换方式是移动、旋转和缩放。本文将详细介绍这些是如何工作的。移动&#xff1a; 使用move函数处理移动&#xff1a; move <object> <vector> 按矢量移动对象&#xff1a; c cone() --c is at 0,0,0 move c [0,1,0] --after this l…

恢复删除的文件:6个免费Windows电脑数据恢复软件

数据恢复软件可帮助您从众多存储设备中恢复损坏或删除的数据。您可以使用这些文件恢复软件来检索文件、文档、视频、图片等。这些应用程序支持多种标准文件格式&#xff0c;如 PNG、RTF、PDF、HTML、JPG、MP3 等。 经过超过 75 小时的研究&#xff0c;我分析了 25 最佳免费数据…

探索 Python 编程调试案例:程序平均值的修复过程

&#x1f49d;&#x1f49d;&#x1f49d;Python 作为一门广泛应用的编程语言&#xff0c;其编程过程并非总是一帆风顺。即使是经验丰富的程序员&#xff0c;也会在代码中遇到各种错误。而调试Python代码过程&#xff0c;也是学习中不可避免的步骤。 今天来看一个简单的案例。…

简单了解一下 Go 语言构建约束?

​构建约束是一种在 Go 语言中控制源文件编译条件的方法&#xff0c;它可以让您指定某些文件只在特定的操作系统、架构、编译器或 Go 版本下编译&#xff0c;而在其他环境中自动忽略。这样可以方便您针对不同的平台或场景编写不同的代码&#xff0c;实现条件编译的功能。 构建…

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之计数器与累加器实战题目

题目1—三个连续的自然数计算 问题描述&#xff1a; 若有3个连续的自然数&#xff0c;已知第一个自然数为100&#xff0c;请编写程序输出这3个自然数。 输入格式&#xff1a; 无 输出格式&#xff1a; 三行三个整数 输入输出样例&#xff1a; 输入样例 输出样例 无 1…

人工智能大语言模型起源篇(二),从通用语言微调到驾驭LLM

上一篇&#xff1a;《人工智能大语言模型起源篇&#xff08;一&#xff09;&#xff0c;从哪里开始》 &#xff08;5&#xff09;Howard 和 Ruder 于2018年发表的《Universal Language Model Fine-tuning for Text Classification》&#xff0c;https://arxiv.org/abs/1801.06…

基于MATLAB的电力系统潮流计算

为了进行潮流计算&#xff0c;通常可以使用像MATPOWER这样的电力系统分析工具包&#xff0c; 在MATLAB中的MATPOWER工具包中&#xff0c;多个不同的系统模型被定义为测试案例&#xff08;case&#xff09;。这些测试案例用于模拟和分析电力系统中的潮流计算、最优潮流问题、稳…

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg

Unity屏幕截图、区域截图、读取图片、WebGL长截屏并下载到本地jpg 一、全屏截图并保存到StreamingAssets路径下 Texture2D screenShot;//保存截取的纹理public Image image; //显示截屏的Imagepublic void Jietu(){StartCoroutine(ScrrenCapture(new Rect(0, 0, Screen.width…

使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图

可以使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图。以下是具体的操作步骤&#xff1a; 1. 连接设备 确保 Android 设备通过 USB 或网络连接到电脑&#xff0c;并运行以下命令检查连接状态&#xff1a; adb devices2. 截取屏幕截图 运行以下命令将设…

TypeScript 的崛起:全面解析与深度洞察

一、背景与起源 &#xff08;一&#xff09;JavaScript 的局限性 类型系统缺失 难以在编码阶段发现类型相关错误&#xff0c;导致运行时错误频发。例如&#xff0c;将字符串误当作数字进行数学运算&#xff0c;可能在运行时才暴露问题。函数参数类型不明确&#xff0c;容易传入…

Moretl无人值守日志采集工具

永久免费: 至Gitee下载 使用教程: Moretl使用说明 用途 定时全量或增量采集工控机,电脑文件或日志. 优势 开箱即用: 解压直接运行.不需额外下载.管理设备: 后台统一管理客户端.无人值守: 客户端自启动,自更新.稳定安全: 架构简单,兼容性好,通过授权控制访问. 架构 技术架…

The Rise and Potential of Large Language ModelBased Agents:A Survey---摘要、背景、引言

题目 基于大语言模型的Agent的兴起与发展前景 论文地址&#xff1a;https://arxiv.org/pdf/2309.07864.pdf 项目地址&#xff1a;https:/github.com/WooooDyy./LLM-Agent–Paper-List 摘要 长期以来&#xff0c;人类一直在追求等同于或超越人类水平的人工智能(A)&#xff0c;…

lc46全排列——回溯

46. 全排列 - 力扣&#xff08;LeetCode&#xff09; 法1&#xff1a;暴力枚举 总共n!种全排列&#xff0c;一一列举出来放入list就行&#xff0c;关键是怎么去枚举呢&#xff1f;那就每次随机取一个&#xff0c;然后删去这个&#xff0c;再从剩下的数组中继续去随机选一个&a…

题目 1761: 学习ASCII码

题目 1761: 学习ASCII码 时间限制: 2s 内存限制: 192MB 提交: 4331 解决: 2415 题目描述 刚开始学C语言&#xff0c;ASCII码可是必须要会的哦&#xff01;那么问题来了&#xff0c;要求你用熟悉的printf输出字符常量 ’ t ’ 的ASCII以及ASCII码值63对应的字符&#xff01; 注…

使用Flink CDC实现 Oracle数据库数据同步的oracle配置操作

使用Flink CDC实现 Oracle数据库数据同步的oracle配置操作&#xff0c;包括开启日志归档和用户授权。 flink官方参考资料&#xff1a; https://nightlies.apache.org/flink/flink-cdc-docs-master/zh/docs/connectors/flink-sources/oracle-cdc/ 操作步骤&#xff1a; 1.启用…

字体子集化实践探索

最近项目rust生成PDF组件printpdf需要内嵌完整字体导致生成的PDF很大&#xff0c;需要做压缩&#xff0c;但是rust的类库allsorts::subset::subset不支持windows&#xff0c;所以做了一些windows下字体子集化的尝试 方案一&#xff1a;node.js做子集化 fontmin 缺点是也需要集…

Spring Boot教程之二十五: 使用 Tomcat 部署项目

Spring Boot – 使用 Tomcat 部署项目 Spring Boot 是一个基于微服务的框架&#xff0c;在其中创建可用于生产的应用程序只需很少的时间。Spring Boot 建立在 Spring 之上&#xff0c;包含 Spring 的所有功能。如今&#xff0c;它正成为开发人员的最爱&#xff0c;因为它是一个…

Vue自定义快捷键做粘贴

静态&#xff1a; export default {data() {return {customContent: 这里是你想要粘贴的自定义内容 // 自定义内容};},mounted() {window.addEventListener(keydown, this.handleKeyDown);},beforeDestroy() {window.removeEventListener(keydown, this.handleKeyDown);},meth…

【C语言篇】C 语言总复习(下):点亮编程思维,穿越代码的浩瀚星河

我的个人主页 我的专栏&#xff1a;C语言&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞❤ 收藏❤ 在C语言的世界里&#xff0c;结构体和联合体以及文件操作都是非常重要且实用的知识板块&#xff0c;掌握它们能帮助我们更高效地组织数据以及与外部文…

CNCF云原生生态版图-项目和产品综合分析

CNCF云原生生态版图-项目和产品综合分析 CNCF云原生生态版图-项目和产品综合分析整体统计分析中国研发人员贡献项目和产品其中&#xff0c;纳入 CNCF 管理的开源项目 链接 CNCF云原生生态版图-项目和产品综合分析 整体统计分析 在对云原生技术选型时&#xff0c;优先选择经过 …