前端开发-Nginx了解一下
为什么前端要学Nginx？
Nginx是异步框架的网页服务器，也可以用作反向代理、负载平衡器和HTTP缓存。不知道各位同学在开发过程中有没有使用过Nginx。如果我们想玩一下个人服务器，起一个个人博客网站，Nginx是绕不过去的工具。Nginx对于前端开发，它主要解决三大痛点：
- 本地联调跨域：绕过浏览器同源限制，实现API代理转发
- 生产环境优化：压缩静态资源、开启缓存、实现CDN加速
- 高效部署工具：一键部署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; # 零拷贝传输需根据服务器硬件调整