Web架构梳理

本篇博文主要梳理Web网站框架和技术栈，旨在更深刻理解Web工作原理，助于渗透测试。

其实网站种类很多，架构也五花八门，这里从大类角度，将网站分为静态网站和动态网站。

静态网站

静态网站是最简单的一类网站。

其核心特点是：Web服务器直接返回已经存在的HTML文件，而不会在访问时动态生成页面内容。访问流程如下：

浏览器->Web服务器->HTML文件

例如客户端直接访问https://example.com/index.html，服务器直接读取网站目录下的index.html文件并返回给浏览器客户端。

这里有个常见的误区，即只有动态网站才会使用Web服务器。实际上，无论是静态网站还是动态网站，都离不开Web服务器。

Web服务器（Web Server）本质上是一种能够接收HTTP请求并返回HTTP响应的软件。例如，当用户在浏览器中访问某个URL，浏览器会向服务器发送HTTP请求，Web服务器接收到请求后，会根据配置找到对应的资源并返回给浏览器。

常见的Web服务器包括Nginx、Apache、Caddy和IIS等，常用于本地测试的Python http.server模块也可看作Web服务器。

此外，还有一种比较特殊的、经常用于搭建个人博客或项目文档的网站部署方式，即静态网站托管服务（Static Website Hosting Service）。这类服务通常由平台提供现成的服务器、HTTPS证书、CDN加速以及自动部署能力，用户只需上传或同步静态网站文件即可完成发布，无需自行购买服务器或配置Web服务器。

常见的静态网站托管服务包括GitHub Pages、Cloudflare Pages、Netlify和Vercel等。由于这类服务通常仅负责托管HTML、CSS、JavaScript、图片等静态资源，无法直接运行PHP、Java、Python等服务端程序，因此本质上仍属于静态网站的范畴。

现代开发中，静态网站早已脱离了“纯手写HTML”的原始阶段。开发者通常使用静态网站生成器（Static Site Generator，SSG），常见的如Hexo、Hugo、VitePress）来自动生成页面。此外，借助JAMstack架构，静态网站可以通过JavaScript在客户端调用第三方API或Serverless函数。这意味着，即使网站本质上是静态托管的，依然可以实现动态评论、在线搜索、用户登录等丰富的交互功能。

HTML、CSS和JavaScript是构建网页最基础的前端技术，也是绝大多数网站前端部分的核心组成。

静态网站具有部署简单、访问速度快、服务器资源消耗低以及安全风险较少等显著优点。然而，其缺点也同样明显：由于页面内容固定，导致用户的交互能力有限，一旦数据需要更新，就必须重新生成整个页面。

动态网站

动态网站主要是指页面内容并非预先生成并存储为固定的HTML文件，而是在用户访问时由服务端程序或客户端脚本根据请求动态生成。与静态网站相比，动态网站能够根据用户身份、数据库内容以及业务逻辑实时返回不同的页面和数据。通信流程如下所示：

浏览器->Web服务器->应用服务器->数据库->HTML代码

传统一体化

传统一体化是早期Web开发最常见的模式。在这种架构下，前端页面和后端业务逻辑运行在同一个应用系统中，由后端程序直接生成HTML页面并返回给浏览器。

一个较为完整的动态网站架构，通常包含Web服务器、应用服务器和数据库等组件。其中，应用服务器（Application Server）负责处理业务逻辑、访问数据库并动态生成HTML代码返回给Web服务器，最终由Web服务器返回给客户端。

在实际部署中，并非所有动态网站都会包含上述全部组件。例如一些小型网站可以直接由Tomcat、Spring Boot或Node.js运行时对外提供Web服务，而无需额外部署Nginx或Apache等独立Web服务器。这是因为许多现代应用服务器或运行环境本身已经具备处理HTTP请求和返回HTTP响应的能力；对于数据量较小或内容固定的场景，网站甚至可以不接入数据库。

此外，在LAMP（Linux+Apache+MySQL+PHP）和LNMP（Linux+Nginx+MySQL+PHP）等经典PHP架构中，通常不存在类似Tomcat、WebLogic等独立的应用服务器。Web服务器会根据配置规则匹配请求，通常通过请求文件的后缀名等，将PHP请求转发给PHP运行环境，如mod_php或PHP-FPM执行，PHP解释器负责处理业务逻辑、访问数据库并生成动态页面。从功能上看，PHP运行环境承担了应用服务器的职责，因此也可以视为应用服务器层的一种实现形式。

当前互联网网站最常见的服务端技术生态主要包括PHP、Java、Python、.NET以及Node.js，它们覆盖了绝大多数企业网站、管理系统和互联网应用。除此之外，Go、Ruby、Rust等语言也被广泛应用于部分特定场景。

不同开发语言可以使用相同的Web服务器，但应用服务器通常与开发语言密切相关。为了简化页面渲染、路由管理、数据库访问等开发工作，各种语言生态逐渐出现了大量Web框架，用于快速构建动态网站。下表列出了常见的传统一体化网站开发技术栈，具体如下表所示：

传统一体化架构的优点是开发简单、部署方便，前后端代码集中在同一个项目中，适合中小型网站快速开发。然而随着业务规模增长，前端与后端代码耦合较高，团队协作和系统扩展会逐渐变得困难。因此，现代互联网应用更多采用前后端分离架构。

前后端分离

前后端分离是目前互联网应用最主流的Web开发架构。与传统一体化模式中由后端直接生成HTML页面不同，前后端分离将页面展示与业务逻辑彻底拆分：前端负责页面渲染与用户交互，后端则专注于业务处理和数据提供，两者通过API接口进行通信。

在这种架构下，浏览器首次访问时，Web服务器会返回前端页面资源（HTML、CSS、JavaScript）。随后，JavaScript代码在浏览器中运行，通过HTTP接口向后端请求数据。后端通常以JSON格式返回数据，前端再根据返回结果动态更新页面内容。

与传统一体化架构相比，前后端分离架构中的应用服务器不再负责生成HTML页面，而是通过API接口向浏览器返回JSON等结构化数据。浏览器加载的前端页面（通常由Vue、React等框架开发）负责解析数据并完成页面渲染。

在实际部署中，前端项目通常会被编译为HTML、CSS和JavaScript等静态文件，并部署在Nginx、Apache、CDN或静态网站托管平台上；后端服务则独立部署在应用服务器、容器平台或云服务中，通过API接口向前端提供数据。

常见的技术栈如下表所示：

各层次的作用如下：
前端开发框架：用于构建用户界面和实现页面交互逻辑，负责将数据渲染为用户可见的网页内容。
前端构建工具：用于将开发阶段的源码进行编译、打包和优化，生成可直接部署到Web服务器的静态文件。
后端API框架：用于实现业务逻辑、处理用户请求、访问数据库，并通过接口向前端提供数据服务。
数据交换格式：用于前后端之间传输数据，其中JSON因结构清晰、跨语言支持良好而成为最常用格式。
接口规范：用于定义前后端之间的数据交互方式和接口设计规则，保证不同系统能够统一通信。

前后端分离架构的优点是职责清晰、便于团队协作、前后端可以独立开发和部署，同时能够支持Web、移动端、小程序等多个客户端共享同一套后端接口，因此非常适合中大型互联网应用。然而，该架构也会增加系统复杂度，需要额外处理接口认证、跨域访问、前后端版本兼容等问题，对开发和运维能力提出了更高要求。

References

[1] https://aws.amazon.com/cn/compare/the-difference-between-web-server-and-application-server/