Nginx实战填坑指南

root和alias区别

root与alias都能将请求映射到服务器对应文件上,nginx会根据映射关系返回对应请求URI的服务器文件。主要有以下区别:

  1. alias处理规则:用alias路径替换location路径。root处理规则:root路径+location路径。

  2. alias顾名思义,表示目录别名,仅用于location上下文,而root则是最上层目录的定义。不限于location上下文。

  3. 细节区别:alias后面必须要用“/”结束,否则会找不到文件。而root则无此限制,可加可不加。

location ^~/assets/ {
  root /data/www;
}

当请求URI为example.com域名下/assets/logo.png 时,nginx将会返回服务器上路径为 /data/www/assets/logo.png 的文件。

location ^~/assets/ {
  alias /data/www/;
}

当请求URI为example.com域名下/assets/logo.png 时,nginx将会返回服务器上路径为 /data/www/logo.png 文件。

跨域CORS设置

前端请求远端服务器资源时,如果遇到跨域问题,可以通过nginx配置CORS规则,解决此问题。

server {
  listen 443 ssl;
  server_name example.com;
  root /data/www/;

  location ^~/api {
    set $flag '0';

    proxy_pass  http://127.0.0.1:3000;

    # 允许example域下的子域名跨域
    if ($http_origin ~* "(https?:\/\/.*\.example\.com($|\/))") {
      set $flag '1';
    }

    if ($flag = '1') {
      # 允许的域
      add_header Access-Control-Allow-Origin "$http_origin";
      # 允许携带用户认证信息
      add_header Access-Control-Allow-Credentials true;
      # 允许的方法
      add_header Access-Control-Allow-Methods "POST, GET, PUT, PATCH, DELETE";
      # 允许的请求头
      add_header Access-Control-Allow-Headers 'DNT,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,X-Csrf-Token';
    }
  }
}

http重定向到https

如果你的网站还在使用http,那么建议升级到https。因为Chrome早已发布公告:2020 年 1 月,Chrome 80 会将所有混合音频和视频资源自动升级为 HTTPS,如果资源无法通过 HTTPS 加载,则将自动被阻止。最终,在 2020 年 2 月,Chrome 81 将所有混合图像、音频与视频自动升级为 HTTPS,并且阻止那些无法通过 HTTPS 加载的图像。

通过以下nginx配置可以将http重定向到https:

server {  
  listen  80;
  server_name example.com;
  # 使用rewrite实现重定向
  rewrite ^(.*)$  https://$host$1 permanent;
  # 或者使用下面的return开启
  # return 301 https://$host$request_uri;
}

server {
  listen 443 ssl;
  server_name example.com;
  index index.html index.htm;
  ...
}

还有一个方法,当 nginx 配置的站点只允许 https 访问时,当用户使用 http 访问时,nginx 会报 497 错误码。那么我们就能够利用 error_page 命令将 497 状态码的链接重定向到 https。497 状态码定义如下:

497 - normal request was sent to HTTPS

server {  
  listen 443;
  server_name example.com;
  ssl on;
  ssl_certificate cert/example.pem; 
  ssl_certificate_key cert/example.key;

  # 将http请求重定向到https
  error_page 497 https://$host$uri?$args; 
}

单页web应用刷新页面404问题

在使用vue或者react开发单页面应用时,如果router使用的是history模式,nginx配置不合理可能会导致刷新页面出现404。通过如下配置,可轻松解决。

location ^~/admin {
  alias  /usr/share/nginx/html/admin/dist/;
  index  index.html index.htm;
  # 常规配置
  # try_files $uri $uri/ index.html;
  # 如果是SPA(单页)应用
  try_files $uri $uri/ @router;
} 

location @router {
  rewrite ^.*$ /admin/index.html last;  
}

在上面的配置中,@ 符号,用于定义一个Location块,该块不能被外部客户端所访问,只能被nginx内部配置的指令所访问,比如 try_files 或 error_page。

nginx spa