Nginx 介绍

NolanKy
63 阅读4分钟

Nginx（读作“Engine X”）是一款服务器软件，主要用来接收浏览器的 HTTP/HTTPS 请求，并返回网页文件或把请求转发给后端服务。

结合你前面问的“前端页面怎么让用户看到”，Nginx 可以理解为网站的接待员和文件服务员。

1. Nginx 在网站里处于什么位置？

用户浏览器
    ↓ 请求 https://www.example.com
云服务器
    ↓
Nginx
    ├── 返回前端文件：HTML、CSS、JS、图片
    └── 转发 API 请求：交给后端程序处理

注意这几个概念不同：

  • 云服务器：你租用的远程计算机。
  • Nginx：安装在这台计算机上的软件。
  • 前端文件：Nginx 提供给浏览器的内容。
  • 后端程序：处理登录、查询订单等业务逻辑的程序。

Nginx 可以直接安装在云服务器上，也可以放在容器中运行。

2. Nginx 最常见的功能

① 提供静态文件：让用户看到前端页面

假设你构建前端后，把文件放到了服务器上：

/var/www/my-site/
├── index.html
├── assets/
│   ├── app.js
│   └── app.css
└── logo.png

配置 Nginx 后，浏览器请求与文件之间可以这样对应：

访问 /               → 返回 index.html
访问 /assets/app.js  → 返回 assets/app.js
访问 /logo.png       → 返回 logo.png

Nginx 负责返回文件，浏览器负责渲染页面和执行前端 JavaScript。

② 反向代理：把请求转给后端

假设你的后端程序运行在服务器的 3000 端口：

浏览器请求 /api/products
          ↓
Nginx：接收公网请求
          ↓ 转发
后端服务：127.0.0.1:3000
          ↓
返回商品数据
          ↓
Nginx 返回给浏览器

这就叫反向代理。

用户只需要访问网站域名，不需要知道后端实际运行在哪个地址、哪个端口。后端也可以只监听本机地址，不直接暴露到公网。

③ 处理 HTTPS

Nginx 可以配置域名证书，负责与浏览器建立加密连接：

浏览器 ── HTTPS 加密连接 ── Nginx

如果 Nginx 和后端在同一台服务器上，Nginx 到后端之间通常可以通过本机 HTTP 通信。

④ 负载均衡

当一个后端实例处理不过来时，可以运行多个实例，让 Nginx 分配请求：

                    ┌── 后端 A
浏览器 → Nginx ─────┼── 后端 B
                    └── 后端 C

这样可以分担压力，也可以配合健康检查、故障处理等机制提高可用性。具体能力取决于版本和配置。

3. 一个前端 + 后端的配置例子

假设：

  • 域名是 www.example.com。
  • 前端文件放在 /var/www/my-site。
  • 后端运行在本机 3000 端口。
  • 前端使用 /api/ 请求后端。

下面是一份用于说明原理的 HTTP 配置，正式上线还需要配置 HTTPS：

server {
    listen 80;
    server_name www.example.com;

    root /var/www/my-site;
    index index.html;

    # /api/ 请求转发给后端
    location /api/ {
        proxy_pass http://127.0.0.1:3000;

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 其他请求提供前端文件
    location / {
        try_files $uri $uri/ /index.html;
    }
}

这里几个关键配置的作用：

配置含义
listen 80接收发往 80 端口的 HTTP 请求
server_name指定这个站点处理的域名
root指定前端文件所在目录
index index.html设置默认首页文件
location根据请求路径选择处理方式
proxy_pass把请求转发给后端
try_files尝试查找文件，找不到则回退到指定地址

上面这个 proxy_pass 会保留 /api/ 路径：

用户请求：/api/products
后端收到：/api/products

如果后端的接口实际是 /products，需要调整代理配置，不能直接照搬。

try_files 的回退主要适用于 Vue、React 等单页应用，让用户直接访问 /about 时也能加载前端页面。

4. Nginx 平时怎么管理？

以 Ubuntu 上通过软件包安装的 Nginx 为例：

# 安装
sudo apt update
sudo apt install nginx

# 启动
sudo systemctl start nginx

# 查看运行状态
sudo systemctl status nginx

# 检查配置语法
sudo nginx -t

# 修改配置后，重新加载
sudo systemctl reload nginx

修改配置后，先检查，再重新加载，是很重要的习惯：

sudo nginx -t && sudo systemctl reload nginx

Ubuntu 的站点配置通常放在 /etc/nginx/sites-available/，并通过链接到 /etc/nginx/sites-enabled/ 来启用。不同安装方式的配置位置可能不同。

另外，Nginx 启动成功不代表外网一定能访问：云服务器的安全组和系统防火墙仍需允许对应端口。

5. 只有前端，需要 Nginx 和 Node.js 都运行吗？

对于构建后生成静态文件的 Vue / React 项目，通常只需要 Nginx，不需要一直运行 Node.js。

构建阶段：
源码 → Node.js 执行 npm run build → HTML / CSS / JS

部署后：
浏览器 → Nginx → HTML / CSS / JS

但如果是 Node.js 后端，或者 Next.js、Nuxt 的服务端渲染应用，就可能需要：

浏览器 → Nginx → Node.js 服务

一句话总结：Nginx 是网站入口——既能把前端文件发给浏览器，也能把业务请求转给后端。

avatar
文章
阅读
粉丝