80端口 — 浏览器与Nginx的通信流程

核心架构

💻

你的电脑

Chrome 浏览器
（客户端）

出口端口 :随机
如 :51234

互联网（TCP连接）

HTTP 请求

GET /page

HTML 响应

HTTP 响应

目标端口 :80

🖥️ 远程服务器（如阿里云 ECS）

🔄 Nginx（Web 服务器）

监听端口 80（HTTP）/ 443（HTTPS）
接收浏览器发来的 HTTP 请求，根据配置做反向代理，转发给后端应用

内部转发（本机或内网） ↕ 端口 :3000 / :8080

⚙️ 应用程序（Node.js / Python / Java）

监听端口 :3000，处理业务逻辑：查数据库、拼模板、计算数据...

内部连接 ↕ 端口 :3306

🗄️ 数据库（MySQL / PostgreSQL）

监听端口 :3306，存储数据，执行 SQL 查询

📋 逐步拆解

💻 Chrome

STEP 1

DNS 解析
输入 http://www.example.com，浏览器自动识别协议为 HTTP，默认端口 80。先解析域名为 IP：93.184.216.34。

💻 Chrome

STEP 2

TCP 三次握手
浏览器用随机临时端口（如 :51234）向服务器的 :80 端口发起 TCP 连接。
:51234（浏览器） ──TCP握手──▶ :80（Nginx）

💻 Chrome

STEP 3

发送 HTTP 请求到 Nginx 的 80 端口

GET /page HTTP/1.1
Host: www.example.com
Connection: keep-alive

⚡ 这个请求到达的是 Nginx 进程（它正占着 80 端口等着呢）

🔄 Nginx

STEP 4

Nginx 收到请求，做反向代理转发
Nginx 根据 nginx.conf 配置，把请求转发给后端应用：

# nginx.conf 关键配置 server { listen 80; # ← Nginx 监听 80 端口！ server_name www.example.com; location / { proxy_pass http://127.0.0.1:3000; # ← 转发给本地 3000 端口的应用 } }

Nginx 自己不处理业务逻辑，它只是个"门卫"——收到请求后，帮你转给真正干活的程序。

⚙️ App

STEP 5

应用程序（Node.js）在 :3000 端口收到请求
处理业务逻辑：查数据库、组装数据、渲染模板，生成 HTML 字符串返回给 Nginx。

// Node.js 示例
app.listen(3000, () => {
    console.log('App running on port 3000');
});

⚙️ App

STEP 6

应用查询数据库（:3306）
应用通过 :3306 端口连接 MySQL，执行 SQL，拿到数据后拼成 HTML。这个过程完全在服务器内部，浏览器感知不到

🔄 Nginx

STEP 7

Nginx 把应用的响应返回给浏览器
应用返回 HTML → Nginx 加上响应头 → 通过 :80 端口原路送回给浏览器。

HTTP/1.1 200 OK
Content-Type: text/html

<html>...网页内容...</html>

💻 Chrome

STEP 8

浏览器收到 HTML，开始渲染页面 ✅
解析 HTML → 下载 CSS/JS/图片 → 构建 DOM → 绘制到屏幕。（到这里，和 80 端口的故事就结束了）

🔌 80 端口到底在和谁通信？