为什么前端要学Nginx？

Nginx是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。不知道各位同学在开发过程中有没有使用过Nginx。如果我们想玩一下个人服务器，起一个个人博客网站，Nginx是绕不过去的工具。Nginx对于前端开发，它主要解决三大痛点：

1. 本地联调跨域：绕过浏览器同源限制，实现API代理转发
2. 生产环境优化：压缩静态资源、开启缓存、实现CDN加速
3. 高效部署工具：一键部署SPA应用，支持路由History模式

核心功能

1. 反向代理（API请求管家）

# 将/api请求转发到后端服务器
location /api {
  proxy_pass http://backend-server:8080;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
}

原理：浏览器→Nginx→后端服务，用户无感知服务器真实地址

2. 静态资源服务（性能加速器）

# 配置Gzip压缩
gzip on;
gzip_types text/css application/javascript;

# 设置缓存策略
location /static {
  root /var/www;
  expires 30d;
  add_header Cache-Control "public";
}

效果：1MB的JS文件压缩后仅300KB，缓存命中率提升80%

3. 负载均衡（流量调度员）

upstream backend {
  server 192.168.1.1:8080 weight=5;  # 权重分配
  server 192.168.1.2:8080;
  ip_hash;  # 同一IP固定访问某服务器
}

location / {
  proxy_pass http://backend;
}

支持策略：轮询、权重、IP哈希、最少连接数

4. HTTPS配置（安全门卫）

server {
  listen 443 ssl;
  ssl_certificate /path/to/cert.pem;
  ssl_certificate_key /path/to/key.pem;
  # 强制HTTP跳转HTTPS
  return 301 https://$host$request_uri;
}

通过Let's Encrypt免费证书，10分钟实现全站加密

前端项目实战指南

1. 本地开发环境搭建（解决跨域）

# 前端项目运行在localhost:3000，代理API到localhost:8080
server {
  listen 80;
  server_name local.dev;
  
  location / {
    proxy_pass http://localhost:3000;
  }

  location /api {
    proxy_pass http://localhost:8080;
  }
}

修改Hosts文件添加127.0.0.1 local.dev，访问local.dev即可

2. SPA路由配置（解决404问题）

location / {
  root /dist;
  try_files $uri $uri/ /index.html;
}

让Vue/React的路由History模式正常运作

3. 性能优化三板斧

• 图片压缩：image_filter resize 800 600;
• Brotli压缩：brotli on; brotli_types *;
• HTTP2推送：http2_push /static/logo.png;

高频面试题精选

1.正向代理 vs 反向代理区别？

正向代理：客户端知道目标服务器（如VPN），隐藏客户端

反向代理：客户端不知道目标服务器，隐藏服务端

2.Nginx如何处理高并发？

采用事件驱动+非阻塞IO模型，单个进程可处理数万连接

3.location匹配优先级规则？
精确匹配 = > 正则 ~ > 前缀 ^~ > 普通前缀 > 通用 /

4.如何实现灰度发布

map $cookie_version $group {
  default "prod";
  "v2" "canary";
}
upstream canary { server 10.0.0.1; }
upstream prod { server 10.0.0.2; }
location / {
  proxy_pass http://$group;
}

5.Nginx性能优化参数？

worker_processes auto;  # CPU核心数
worker_connections 1024;单个进程最大连接数
keepalive_timeout 65;   # 长连接超时
sendfile on;            # 零拷贝传输

需根据服务器硬件调整