【Nginx前端需要了解的基础配置】

前端开发中，Nginx 是最常用的 Web 服务器和反向代理工具，主要用于部署静态资源、处理跨域、配置缓存策略等。掌握以下核心 Nginx 配置，能解决前端开发和部署中的大部分问题：

一、基础配置（静态资源部署）

部署前端打包后的静态文件（如 React/Vue 构建的 dist 目录）是最常见场景，核心配置如下：

# 定义服务器
server {
    listen 80;                 # 监听端口
    server_name example.com;   # 域名（本地可填 localhost）
    root /usr/share/nginx/html; # 静态资源根目录（指向前端打包后的 dist 目录）
    index index.html;          # 默认首页

    # 处理单页应用（SPA）路由
    # 所有路由请求都指向 index.html，避免刷新 404
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 配置静态资源缓存（图片、CSS、JS 等）
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 30d;           # 缓存 30 天
        add_header Cache-Control "public, max-age=2592000";
    }
}

关键点：

• try_files $uri $uri/ /index.html：解决 SPA 应用路由刷新 404 问题（所有路由由前端框架处理）。
• 静态资源缓存：通过 expires 和 Cache-Control 减少重复请求，提升加载速度。

二、跨域配置（反向代理）

前端开发中，浏览器的同源策略会限制跨域请求，可通过 Nginx 反向代理解决：

server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 反向代理 API 请求（解决跨域）
    location /api/ {
        # 代理目标服务器（后端接口地址）
        proxy_pass http://backend-server: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;
    }
}

作用：

• 前端请求 http://localhost/api/getData 会被 Nginx 代理到 http://backend-server:3000/getData。
• 由于前端和 Nginx 同域（都是 localhost:80），避免了跨域问题。

三、HTTPS 配置（SSL 证书）

现代网站通常需要 HTTPS，配置如下（需提前申请 SSL 证书，如 Let’s Encrypt）：

server {
    listen 443 ssl;
    server_name example.com;

    # SSL 证书路径（替换为实际证书文件）
    ssl_certificate /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;

    # SSL 优化配置
    ssl_protocols TLSv1.2 TLSv1.3;  # 安全的 TLS 协议
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;

    # 静态资源配置（同 HTTP）
    root /usr/share/nginx/html;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
}

# 强制 HTTP 跳转 HTTPS
server {
    listen 80;
    server_name example.com;
    return 301 https://$host$request_uri;
}

四、压缩配置（提升加载速度）

启用 Gzip 或 Brotli 压缩静态资源（JS、CSS、HTML 等），减少传输体积：

http {
    # Gzip 压缩
    gzip on;                  # 开启 Gzip
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    gzip_vary on;             # 告诉浏览器有压缩版本
    gzip_proxied any;         # 对代理请求也压缩
    gzip_comp_level 5;        # 压缩级别（1-9，越高压缩率越好但耗 CPU）

    # Brotli 压缩（比 Gzip 效率更高，需 Nginx 编译时支持）
    brotli on;
    brotli_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
    brotli_comp_level 6;
}

五、防盗链配置（保护静态资源）

防止其他网站盗用你的图片、视频等资源：

server {
    # ... 其他配置

    # 图片防盗链
    location ~* \.(jpg|jpeg|png|gif|webp)$ {
        # 只允许指定域名访问（多个域名用 | 分隔）
        valid_referers none blocked example.com *.example.com;
        if ($invalid_referer) {
            return 403;  # 非法引用返回 403
            # 或返回一张默认图片：rewrite ^/ /default.png break;
        }
        expires 30d;  # 同时配置缓存
    }
}

• valid_referers：允许访问的来源域名，none 允许直接访问（如在浏览器地址栏输入图片 URL）。

六、前端路由与 history 模式适配

对于使用 history 模式的前端路由（如 Vue Router、React Router），需配置 Nginx 支持：

location / {
    try_files $uri $uri/ /index.html;  # 所有未匹配的路径都指向 index.html
}

# 若有子路径（如部署在 https://example.com/admin/）
location /admin/ {
    try_files $uri $uri/ /admin/index.html;
}

七、常用命令

配置完成后，需通过以下命令操作 Nginx：

nginx -t          # 检查配置文件是否有误
nginx             # 启动 Nginx
nginx -s reload   # 重新加载配置（不中断服务）
nginx -s stop     # 停止 Nginx

总结

前端开发常用的 Nginx 配置集中在：

1. 静态资源部署（SPA 路由适配、缓存策略）；
2. 跨域问题解决（反向代理）；
3. 性能优化（压缩、HTTPS）；
4. 资源保护（防盗链）。

掌握这些配置能应对大部分前端部署场景，复杂需求（如负载均衡、限流）可在此基础上扩展。实际使用时，建议将不同功能的配置拆分到单独文件（如 ssl.conf、gzip.conf），通过 include 引入主配置，保持结构清晰。