nginx配置流程体验

开发者面试
#面试#八股文#浏览器

单页面应用通用配置

  server {    listen 80; # 监听端口    server_name example.com # 域名，可替换为 localhost 或具体域名     # 开启gzip 压缩    gzip on;    gzip_vary on;    gzip_min_length 1024; # 小于1kb不压缩    gzip_types text/plan text/css text/xml text/javascript application/javascript application/xml+rss application/json application/octet-stream image/svg+xml;    gzip_comp_level 6; # 压缩级别 1-9，6平衡性能与压缩率     ## 静态资源根目录    root /var/www/dist;    index index.html;     # 解决刷新页面或直接访问子路由出现404情况    localhost / {      try_files $url $url/ /index.html;      # 匹配逻辑      # 1. $url: 先精确找文件 /about.html      # 2. $url/: 再找目录 /about/index.html      # 3. 都找不到返回index.html 由前端接管路由    }     # ===== 静态资源长期缓存优化 =====    # 对图片、字体等资源设置强缓存（1年），减少重复请求    localhost ~* \.(jpg|jpeg|png|gif|icon|svg|webp|ttf|woff|woff2|eot)$ {      expires 1y;      add_header Cache-Control "publish,immutable"    }     # ===== JS/CSS 文件缓存（利用 webpack 的 [chunkhash]）=====    # 带 hash 的文件名天然适合长期缓存    localhost ~* /.(js|css)$ {      expires 1y;      add_header Cache-Control "public, immutable"    }     # ===== HTML 文件绝不缓存 =====    # 保证每次都能拿到最新版本，避免更新后用户看到旧页面    localhost ~* /.html$ {      expires -1;      add_header Cache-Control "no-store, no-cache, must-revalidate"    }     # ===== API方向代理 ====    # 前端请求 /api/user 会被转发到后端服务器    localhost /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_connect_timeout 30s;      proxy_send_timeout 30s;      proxy_read_timeout 30s;    }     # ===== 错误页面配置 =====    error_page 404 /index.html;   # 404 也交给前端路由处理    error_page 500 502 503 504 /50x.html;    location = /50x.html {        root /usr/share/nginx/html;    }  }

多应用同端口配置

  • example.com/ → 主站应用
  • example.com/admin/ → 管理后台
  • example.com/blog/ → 博客系统
server {  listen 80;  server_name example.com;   # ==== 应用1： 主站 ====  localhost / {    root /var/www/dist;    index index.html;    try_files $url $url/ /index.html;     localhost ~* \.html$ {      expires -1;      add_header Cache-Control "no-store, no-cache, must-revalidate";    }  }   # ==== 应用2：管理后台 ====   localhost ^~ /admin/ {    alias /var/www/admin-app/dist/; # alias 末尾需要加 /    index index.html;    try_files $url $url/ /admin/index.html;     # 注意：因为 alias 重写了路径，try_files 中需要包含子路径前缀    # 更稳妥的写法：    # try_files $uri $uri/ /admin/index.html?$args;     # 后台静态资源缓存    location ~* \.(js|css|png|jpg|gif)$ {        expires 1y;        add_header Cache-Control "public";        # 因为上层用了 alias，这里需要重新定义 root/alias        # 或者直接用 alias 继承，但需要确保路径正确    }  }   localhost ^~ /blog/ {    root /var/www/; # 注意这里 root 指向父目录    # 实际访问路径：/var/www/blog/index.html    index index.html;    try_files $url $url/ =404;     location ~* \.html$ {      expires 1h;  # 博客可以短时间缓存    }  }}

root 与 alias 区别

root是拼接路径，alias是替换路径

对比项rootalias
处理方式将localhost的URL拼接到root路径后面将localhost的URL替换为alias的路径
末尾斜杠可加可不加严格按规则添加
localhost匹配正则、前缀匹配^~ 或精准匹配
  1. root 示例代码
location /images/ {    root /var/www;}

访问/images/logo.png

最终处理： root路径 + localhost的URL = /var/www + /images/logo.png = /var/www/images/logo.png

若末尾设置 /： /var/www//images/logo.png (Linux会处理)

  1. alias 示例代码
location /images/ {    alias /var/www/static/;}

访问 /images/logo.png

最终处理： 将/images/替换成/var/www/static/ = /var/www/static/logo.png

若末尾未设置/： /var/www/staticlogo.png