跳到主要内容

Nginx 配置与部署

问题​

Nginx 在前端项目部署中扮演什么角色？常用配置有哪些？

答案​

Nginx 核心角色​

Nginx 是高性能的 HTTP 服务器和反向代理，在前端部署中主要承担：

  • 静态资源托管：HTML/CSS/JS/图片
  • 反向代理：将请求转发到后端服务
  • 负载均衡：分发流量到多个服务实例
  • SSL 终止：处理 HTTPS 加密/解密
  • Gzip 压缩：减少传输体积

常用配置​

1. 基础静态资源配置​

nginx.conf
server {
    listen 80;
    server_name example.com;
    root /var/www/html;
    index index.html;

    # SPA 路由支持（History 模式）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2?)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 禁止访问隐藏文件
    location ~ /\. {
        deny all;
    }
}

2. 反向代理​

nginx.conf
server {
    listen 80;
    server_name example.com;

    # 前端静态资源
    location / {
        root /var/www/html;
        try_files $uri $uri/ /index.html;
    }

    # API 代理到后端
    location /api/ {
        proxy_pass http://localhost: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;
    }

    # WebSocket 代理
    location /ws/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

3. 负载均衡​

nginx.conf
upstream backend {
    # 轮询（默认）
    server 127.0.0.1:3001;
    server 127.0.0.1:3002;
    server 127.0.0.1:3003;

    # 其他策略：
    # least_conn;     最少连接
    # ip_hash;        IP 哈希（会话粘滞）
    # weight          权重
    # server 127.0.0.1:3001 weight=3;
}

server {
    listen 80;
    location /api/ {
        proxy_pass http://backend;
    }
}

4. Gzip 压缩​

nginx.conf
http {
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/javascript
        application/javascript
        application/json
        application/xml
        image/svg+xml;
}

5. HTTPS / SSL​

nginx.conf
server {
    listen 443 ssl http2;
    server_name example.com;

    ssl_certificate     /etc/ssl/certs/example.crt;
    ssl_certificate_key /etc/ssl/private/example.key;
    ssl_protocols       TLSv1.2 TLSv1.3;
    ssl_ciphers         HIGH:!aNULL:!MD5;

    # HSTS
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
}

# HTTP 重定向到 HTTPS
server {
    listen 80;
    server_name example.com;
    return 301 https://$server_name$request_uri;
}

Location 匹配规则​

语法说明优先级
= /path精确匹配最高
^~ /path前缀匹配（不检查正则）高
~ /regex正则匹配（区分大小写）中
~* /regex正则匹配（不区分大小写）中
/path普通前缀匹配低
/默认匹配最低
记忆口诀

精确 → 前缀停止 → 正则 → 普通前缀 → 默认

常见面试问题​

Q1: Nginx 和 Node.js 如何配合部署？​

答案：

典型架构：Nginx 在前处理静态资源和 SSL，动态请求反向代理到 Node.js：

  • Nginx 监听 80/443 端口
  • 静态资源由 Nginx 直接返回（性能远高于 Node.js）
  • API 请求通过 proxy_pass 转发到 Node.js（通常是 3000 等内部端口）
  • Node.js 不直接暴露给公网

Q2: 如何解决前端 History 模式路由 404？​

答案：

try_files $uri $uri/ /index.html; —— 当请求的路径对应不到物理文件时，回退到 index.html，由前端路由接管。

Q3: 负载均衡有哪些策略？​

答案：

策略说明适用场景
轮询依次分发默认，服务器性能相近
加权轮询按权重比例分发服务器性能有差异
最少连接分发给当前连接最少的请求处理时间差异大
IP 哈希同 IP 固定分发到同一服务器需要会话粘滞

Q4: 如何配置跨域？​

答案：

location /api/ {
    add_header Access-Control-Allow-Origin $http_origin;
    add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
    add_header Access-Control-Allow-Headers "Authorization, Content-Type";
    add_header Access-Control-Allow-Credentials true;

    if ($request_method = OPTIONS) {
        return 204;
    }

    proxy_pass http://backend;
}

Q5: 如何优化 Nginx 性能？​

答案：

  1. 开启 Gzip/Brotli：减少传输体积
  2. 静态资源强缓存：expires 1y + immutable
  3. 开启 HTTP/2：多路复用
  4. worker 调优：worker_processes auto; + worker_connections 1024;
  5. 开启 sendfile：sendfile on; 零拷贝提升文件传输效率

相关链接​