Skip to main content

理解 Nginx：从请求到 Docker 部署

本文整理了我们关于 Nginx 是什么、它在服务器里做什么，以及它在前端 Docker 部署中的角色 的完整讨论，目标是建立一个可落地的工程师级心智模型。

1. Nginx 是什么？​

一句话理解：

Nginx 是运行在服务器上的一个服务（进程），是服务器对外的 HTTP/HTTPS 门口。

它不写业务逻辑，而是专门负责：

  • 接收所有外部 HTTP 请求
  • 决定请求怎么处理
  • 要么自己返回结果
  • 要么转发给后端服务

可以把它理解为：

Web 世界里的“前台 + 门口保安 + 交通枢纽”

2. 浏览器访问时，真实发生了什么？​

当浏览器访问：

https://example.com

浏览器实际发送的是：

GET / HTTP/1.1
Host: example.com

关键点：

  • 浏览器 只认识 URL 和 HTTP
  • 它并不知道 React / Vue / Next.js

3. Nginx 在请求链路中的位置​

一个最典型的线上访问路径：

浏览器（客户端）
  ↓
Nginx（服务器门口）
  ↓
- 静态文件（直接返回）
- 或 后端 API（转发）

注意：

Nginx 接待的是“请求”，而不是“前端”本身。

这些请求可能来自：

  • 浏览器页面访问
  • 前端 JS 发起的 API 请求
  • 手机 App
  • 其他服务器

4. 为什么 Nginx 可以直接提供前端静态文件？​

4.1 前端 build 之后是什么？​

前端项目 build 后会变成：

index.html
main.js
styles.css
assets/

本质上：

它们只是普通文件，躺在服务器磁盘上。

4.2 Nginx 的核心能力之一：发文件​

Nginx 本身就是一个：

  • 用 C 写的
  • 高性能
  • 事件驱动的
  • 文件服务器 + HTTP 服务器

在 Nginx 配置中：

root /usr/share/nginx/html;

意味着：

URL 路径  →  磁盘文件路径
/         →  /usr/share/nginx/html/index.html
/logo.png →  /usr/share/nginx/html/logo.png

所以：

Nginx 不是“生成前端页面”，而是“把磁盘上的文件通过 HTTP 发给浏览器”。

5. 静态文件 vs 后端 API（Nginx 的分流能力）​

Nginx 会根据 URL 决定怎么处理请求：

GET /            →  找文件 →  index.html
GET /main.js     →  找文件 →  main.js
GET /api/users   →  转发 →  后端服务

这通常通过配置完成：

location /api/ {
    proxy_pass http://backend:3000;
}

总结一句话：

Nginx 是“文件服务器 + 请求分发器”的结合体。

6. Dockerfile 中的 Nginx：它在做什么？​

下面是一个典型的多阶段 Dockerfile 结构。

Stage 1：Builder（Node）——构建前端​

FROM node:22-slim AS builder
...
RUN npx nx build ${APP_NAME}

这一阶段的目标只有一个：

把前端项目“编译”成一堆静态文件

输出结果类似：

/app/dist/
  ├── index.html
  ├── main.js
  ├── styles.css

Stage 2：Nginx ——对外提供访问​

FROM nginx:alpine

从这一刻开始：

Node、React、Nx 都不重要了

6.1 清空默认网页​

RUN rm -rf /usr/share/nginx/html/*

意思是：

“不用你自带的 demo 页面，我有自己的。”

6.2 把前端文件放进 Nginx 的 root 目录（关键）​

COPY --from=builder /app/dist /usr/share/nginx/html

这一步完成后：

/usr/share/nginx/html/
  ├── index.html
  ├── main.js
  ├── styles.css

于是：

Nginx 可以直接对外提供前端页面

6.3 nginx.conf：决定 Nginx 的行为​

COPY nginx.conf /etc/nginx/nginx.conf

这个配置文件决定：

  • URL 如何匹配
  • 是否支持 SPA（try_files）
  • 是否有 /api 反向代理
  • gzip / cache / headers

可以理解为：

Nginx 的“工作说明书”

6.4 启动 Nginx​

CMD ["nginx", "-g", "daemon off;"]
  • Nginx 在前台运行
  • Docker 容器保持存活

7. 整体访问流程（最终版心智模型）​

浏览器
  ↓  HTTP 请求
Docker 容器
  ↓
Nginx（80端口）
  ↓
/usr/share/nginx/html/index.html

如果是 API：

浏览器
  ↓
Nginx
  ↓
proxy_pass → 后端服务

8. 最终总结（可以记住的三句话）​

  1. Nginx 是服务器对外的 HTTP 门口
  2. 前端 build 后只是静态文件，Nginx 非常擅长发文件
  3. Nginx 决定：请求是我自己处理，还是转给后端

当你理解了这套模型， 你看到 Nginx / Docker / 前端部署时， 就不再是“背配置”，而是在“读系统设计”。