关于 web 服务器架构的一点疑问

[yezheyu]

在传统的 web 架构中，浏览器发送 http 请求，web 服务器返回网页

而在前后端分离架构中，好像多了个前端服务器，我想问下这个前端服务器有什么用？

是接收后端返回的 json 数据，然后渲染成网页，再返回给浏览器吗？

就是说后端服务器只负责处理数据，前端服务器负责渲染成网页是吗？

那 ajax 是不是可以理解为一个微型的前端服务器，接收后端服务器返回的 json 数据，然后渲染到网页上

第二个问题：在下面 web 架构图中，各个软件负责啥工作？

• nginx 负责接收前端请求，使用 IO 多路复用监听多个 socket
• 请求静态资源直接响应
• 请求动态资源，转发给 uwsgi 服务器
• uwsgi 服务器把 http 协议中各个字段拆分出来，交给 web 应用
• web 应用依照字段到数据库取值，处理，按原路返回给浏览器
• nginx 中某个 socket 一有 IO 事件，就交给 web 应用，web 应用使用线程池分配一个线程来处理这个用户请求

我上面写的流程有问题吗？

现在服务器架构是使用 IO 多路复用 + 线程池处理吗?

[gadfly3173]

ajax 是一个前端发送请求请求用的技术，和渲染没关系，也不能把它称为服务器。这个技术是用来让前端有在浏览器中与服务器进行交互的能力。

[br_wang]

前端服务器描述不太清楚。
如果是指 SSR 服务，目的只是把传统服务端渲染的逻辑独立出来， 前端利用框架技术实现同一套代码的浏览器渲染和服务端渲染的复用。
如果是指静态资源服务，一般是 CDN 服务，负责浏览器渲染所需资源的分发。
ajax 是数据传递方式，没明白怎么个服务器概念。

[duan602728596]

前端服务器可以接收后端的的数据。比如我们就是用的 RPC 获取的数据，然后处理数据。如果有 SSR 的话还需要执行 SSR 方法。在开发环境中，可能还需要集成 webpack ，负责文件的打包、编译、压缩。

[yezheyu]

@br_wang 嗯，像前端使用 vue 开发，好像是也会运行一个服务器，我指的前端服务器就是这个

ajax 那个比喻好像是不太恰当，不要在意

[yezheyu]

@duan602728596
“比如我们就是用的 RPC 获取的数据，然后处理数据”
这个处理数据，是指啥？把数据渲染成网页吗？

[cheng6563]

"WEB 服务器”是可以套多层的，比如 CDN->nginx a->nginx b
“前端服务器”的架构位置也在"Web 服务器"这一层。只是开发环境懒得手动打包配 nginx ，所以就弄了个即时编译并反代的工具给你用。

[gadfly3173]

@yezheyu #4 你说的那个东西是 express ，他只是方便你在本地模拟 http 环境罢了。不需要 ssr 的前端直接用 nginx 作为容器也是可以的

[yezheyu]

@gadfly3173 意思是那只是个测试服务器是吗？

那完全前后端分离的架构，数据渲染是由谁负责呢？

是浏览器先渲染个模板，然后使用 ajax 去后端服务器取数据，浏览器再渲染到网页上

那模板从哪取？把它当静态资源存在 nginx 上吗?

还是像你们说的，有个专门的 ssr 服务器负责把网页渲染好，再返回给浏览器

[duan602728596]

@yezheyu 拿到最原始的数据，然后处理成需要的数据

[Austaras]

@yezheyu 两种都有，搞 SSR 的一般都是有一定需求，比如希望搜索引擎收录或者加快首屏速度之类的
此外还有更复杂的 react server component 等

[br_wang]

@yezheyu 这样看业务具体选择了。可纯浏览器渲染，也能 SSR 渲染，模板都编译到 js 文件里。
SSR 只解决在 js 执行前 html 本身有内容（比如上面同学提到的 SEO 场景），js 实际运行时还是会做前端应用基于状态与和当前已渲染的 dom 比对结合过程 （ hydration ）处理的。

[rbq123456]

@yezheyu 这个前端服务器只是开发的时候用的，开发的时候会一边改代码一边看页面效果，前端服务器就是负责把编译成浏览器能运行的 html 和 js ，同时把编辑器里修改的代码同步到浏览器而已，实现前端代码热更新。打包之后的代码是不会包含这个服务器的，文件也是 html+js ，而非源代码的.vue 。

至于什么 ajax ，就是请求数据的 api ，根本不算服务器。

至于 ssr ，这个才能算是前后端分离后的前端服务器，你可以理解为，把传统 mvc 架构中 viem 这一部分抽离出来，单独部署成一个服务，你可以用 java 可以用 php 来实现，只是前端 ssr 选择了用 nodejs 来实现，这样就可以使用 vue 或者 react 来做。

[yezheyu]

@duan602728596 后端服务器能处理，干嘛还要多此一举交给前端服务器处理呢？又或者干脆让前端服务器直接去数据库取数据，完全用不着后端服务器啊？

[fatbear]

@yezheyu 你既然已经说了在前后端"分离"的架构中是这样这样做，你这里回答又认为多此一举，那你首先要就搞清楚为什么要分离，前后端分离的核心在于解耦数据逻辑与数据展示之间的关系，前端专注于做前端的视图渲染，后端只负责数据处理，最大限度的降低人员之间的合作成本，你所谓前端服务器的 12L 已经解析很清楚了。目前比较普遍的做法是前端在完成开发之后 build 成浏览器可解析的 html+css+js 文件，然后由 nginx 反代统一管理这些静态文件和后端服务器。至于楼上提到的 SSR ，是前后端分离的下一个阶段，为什么 web 开发发展了这么多年又回到了前后端合并的路子上，楼主可以自行搜索"同构渲染"

[gadfly3173]

@yezheyu #13 分离的目的是可维护可扩展。你的业务需求简单当然可以一把梭，但是这样不利于项目的工程化。如果前后端混在一起，用后端的模板引擎，一个问题就是这些模板谁来写？前后端都越发的复杂，后端了解在模板里的数据绑定，但是不了解前端的复杂页面如何编写，反之亦然。分开的目的就是为了各司其职，同时也可以减轻后端服务器的压力。

[darkengine]

这个架构里的所谓“web 服务器”不是必须的，直接让 django, flask 监听 80 端口一样可以提供接口给前端页面进行 ajax 请求。

[fgwmlhdkkkw]

弄个虚拟机，自己装一遍就全明白了。

[Donahue]

@darkengine 你说的情况是使用了内置的 web 服务器，django 内置了一个符合 wsgi 标准的 web 服务器, 这个 web 服务器是用于开发调试用的，性能比 nginx 差，对静态资源处理没有 nginx 好，开发调试用的。至于 flask 我就不知道了，应该也差不多奥

[darkengine]

@Donahue 前后端分离的前端页面（静态）部分当然可以走 nginx ，而 django 和 flask 提供的是接口，并不是开发调试用的。即使上线了接口从 nginx 转一道，最后提供数据的照样的 django 和 flask 提供的是接口。

[darkengine]

所谓的前后端分离，有一层意思是文中的'web 服务器'可以分开为“前端 web 服务器”和“后端 web api 服务器”。前端的静态文件（所有 html, js, css 图片）等可以放到一个 web 服务器中，例如 nginx ，或者开发的时候用 yarn start 跑起来的，或者直接 python -m SimpleHTTPServer 、servce -s 等命令临时跑起来调试的，又或者是放到 AWS 的 cloudfront 上，只要浏览器能正常请求到就行。

而浏览器加载完页面，js 发起的 ajax 请求的是“后端 web api 服务器”。可以直接用 django/flask/go-gin/php 提供，当前现实中更常见的是用 nginx 转一道。