13.10 端口映射实战

---

1. 为什么要学这个?

你在服务器上启动了 npm start，显示 Listening on 3000。 你在浏览器输入 http://1.2.3.4，打不开。 输入 http://1.2.3.4:3000，打开了。 太丑了。 没人会在网址后面输端口号。你需要把它藏起来。

---

2. 核心概念：Reverse Proxy (反向代理)

正向代理 vs 反向代理

• 正向代理 (VPN)：代表用户。你通过梯子访问谷歌，谷歌以为是梯子在访问它。(隐藏了用户)
• 反向代理 (Nginx)：代表服务器。用户访问 Nginx，Nginx 找后台拿数据。(隐藏了服务器)

作用：

1. 去端口号：3000 -> 80。
2. 负载均衡：把请求分给 3 个 Node 实例。
3. SSL 卸载：统一在 Nginx 处解密 HTTPS，后端只处理 HTTP。

---

3. 解决方案 (HOW)

3.1 1Panel 方式 (小白推荐)

1. 创建网站 -> 反向代理。
2. 代理地址: http://127.0.0.1:3000。
3. 确认。
4. 搞定。1Panel 会自动生成 Nginx 配置。

3.2 手写 Nginx 配置 (硬核)

编辑 /etc/nginx/sites-available/default:

server {
    listen 80;
    server_name mydomain.com;

    location / {
        # 核心：把请求转发给本地 3000 端口
        proxy_pass http://127.0.0.1:3000;
        
        # 必带的头信息 (否则后端不知道用户真实 IP)
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

3.3 流量转发图

graph TD
    User["用户浏览器"] -->|"Step 1: HTTP (80)"| Nginx["Nginx (门卫)"]
    
    subgraph Server ["云服务器内部"]
        Nginx -->|"Step 2: 转发 (3000)"| App1["Node.js 应用"]
        Nginx -->|"Step 3: 转发 (8080)"| App2["Java 后端"]
    end
    
    App1 --"Step 4: 响应"--> Nginx
    Nginx --"Step 5: 响应"--> User
    
    style Nginx fill:#e1bee7,stroke:#8e24aa
    style App1 fill:#c8e6c9,stroke:#2e7d32

---

4. 避坑指南

❌ 不要这样做	✅ 应该这样做	为什么
丢 Header	透传 Header	忘了传 X-Real-IP。后端日志里全是 127.0.0.1，无法统计用户来源，也无法做 IP 限流。
WebSocket	配置 Upgrade	Socket.io 连接失败。因为 Nginx 默认不支持 WebSocket 长连接，需要配置 Upgrade 头。
大文件超时	调大 Timeout	上传大文件报错 504。Nginx 默认超时 60s，上传视频必须调大 client_max_body_size 和 proxy_read_timeout。

---

5. 真实案例

---

6. 本章小结

1. Nginx：是互联网的交通警察。
2. Proxy Pass：是最常用的 Nginx 指令。
3. Headers：转发时别忘了带上用户的“身份证” (IP/Host)。