什么是Web服务器

网站背后的"服务员"

当你在浏览器输入一个网址按下回车，几秒钟后页面就出现了。这背后是谁在"服务"你？答案就是 Web服务器。

💡 类比：Web服务器就像餐厅的服务员。你（浏览器）点菜（发请求），服务员（Web服务器）去厨房（后端程序/数据库）取餐，然后端给你（返回响应）。

Web服务器做了什么？

Web服务器的核心工作就三步：

静态服务 vs 动态服务

Web服务器提供两种类型的内容：

静态服务

服务器上有什么文件，就原封不动地返回给你：

请求: GET /about.html
响应: 直接返回 about.html 文件的内容

动态服务

服务器运行后端程序，根据请求动态生成内容：

请求: GET /api/user?id=123
响应: 后端程序查数据库，生成 JSON 返回

常见的Web服务器

开发环境 vs 生产环境

用 Node.js 写一个最简单的Web服务器

只需要几行代码，就能创建一个Web服务器：

// server.js
const http = require("http");

const server = http.createServer((req, res) => {
  // 收到请求，返回响应
  res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
  res.end("<h1>你好，这是我的Web服务器！</h1>");
});

server.listen(3000, () => {
  console.log("服务器运行在 http://localhost:3000");
});

运行后，打开浏览器访问 http://localhost:3000，就能看到页面了。

Next.js 的服务器

在 Next.js 项目中，你不需要手动创建服务器。框架已经帮你搞定了：

# 开发环境 — 启动开发服务器
npm run dev
# 服务器自动运行在 http://localhost:3000

# 生产环境 — 先构建，再启动
npm run build
npm run start

反向代理：服务器背后的服务器

在生产环境中，通常会用 Nginx 作为反向代理，站在最前面接收所有请求，再分发给后面的应用服务器：

端口号的含义

Web服务器需要监听一个端口号，就像酒店的房间号：

访问 http://example.com 实际上是 http://example.com:80，浏览器自动省略了 :80。

🎯 AI编程小贴士：当你的 Next.js 项目运行 npm run dev 时，它启动的就是一个开发用的 Web 服务器。如果端口被占用（报错 EADDRINUSE），可以让 AI 帮你找到并结束占用端口的进程。

小结

• Web服务器是监听端口、接收请求、返回响应的程序
• 提供静态服务（返回文件）和动态服务（运行程序生成内容）
• 开发时用框架内置服务器，生产环境用 Nginx 等专业服务器
• 反向代理能实现负载均衡、HTTPS、安全防护等功能
• npm run dev 就是在启动一个本地 Web 服务器