通过以下展示不同情况下的配置：location 路径、root 路径、alias 路径、proxy_pass 代理路径。 然后对比这几个配置路径地址，建议 location 后面都带上斜杠。

基础配置说明

  1. # 进程数量
  2. worker_processes 1;
  4. events {
  5.   # 最大连接数量
  6.   worker_connections 1024;
  7. }
  9. http {
  10.   include mime.types;
  11.   default_type application/octet-stream;
  12.   sendfile on;
  13.   keepalive_timeout 65;

强制http跳转https

  1. server {
  2.   listen 80;
  3.   server_name test.com;
  5.   # http强制跳转到https
  6.   rewrite ^(.*)$ https://$server_name$1 permanent;
  7. }

配置微信支付的校验文件

  1. server {
  2.   listen 80;
  3.   server_name localhost;
  5.   # 默认根路径
  6.   location / {
  7.     root index.html;
  8.   }
  9.   # 微信支付校验文件，可以直接配置访问名称
  10.   location ^~/MP_verify_2g3uEjrB5B2LIbNl.txt {
  11.     alias /home/MP_verify_2g3uEjrB5B2LIbNl.txt;
  12.   }
  13.   # 微信支付校验文件，也可以通过正则配置
  14.   location ~^/MP_verify_[a-zA-Z0-9]*\.(txt)$ {
  15.     root /home/;
  16.     rewrite ^/home/(.txt)$ /home/$1 last;
  17.   }
  18. }

root和alias两种配置静态资源的区别

  1. server {
  2.   listen 80;
  3.   server_name localhost;
  5.   # 用root方式，location中的路径会拼加到root的地址后面
  6.   # 请求路径为：http://localhost:8080/files/index.jpg    实际访问为：/home/files/index.jpg
  7.   location ~^/files/ {
  8.     root /home/;
  9.     index index.html index.htm;
  10.   }
  11.   # 用alias方式，location中的路径不会拼加到alias的地址后面
  12.   # 这请求路径为：http://localhost:8080/files/index.jpg    实际访问为：/home/index.jpg
  13.   location ~^/files/ {
  14.     alias /home/;
  15.     index index.html index.htm;
  16.   }
  17. }

请求后台接口代理配置

  1. server {
  2.   listen 8080;
  3.   server_name localhost;
  5.   #################### 第一种场景（代理地址不加斜杠） ####################
  6.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/api/getUser
  7.   location ^~/api/ {
  8.     proxy_pass http://127.0.0.1:8000;
  9.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  10.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  11.   }
  12.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际指向为：http://127.0.0.1:8000/api/getUser
  13.   location ^~/api {
  14.     proxy_pass http://127.0.0.1:8000;
  15.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  16.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  17.   }
  19.   #################### 第二种场景（代理地址+斜杠） ####################
  20.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/getUser
  21.   location ^~/api/ {
  22.     proxy_pass http://127.0.0.1:8000/;
  23.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  24.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  25.   }
  26.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000//getUser
  27.   location ^~/api {
  28.     proxy_pass http://127.0.0.1:8000/;
  29.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  30.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  31.   }
  33.   #################### 第三种场景（代理地址+后缀） ####################
  34.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/user/getUser
  35.   location ^~/api {
  36.     proxy_pass http://127.0.0.1:8000/user;
  37.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  38.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  39.   }
  40.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/usergetUser
  41.   location ^~/api/ {
  42.     proxy_pass http://127.0.0.1:8000/user;
  43.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  44.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  45.   }
  47.   #################### 第四种场景（代理地址+后缀+斜杠） ####################
  48.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/user/getUser
  49.   location ^~/api/ {
  50.     proxy_pass http://127.0.0.1:8000/user/;
  51.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  52.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  53.   }
  54.   # 请求路径为：http://127.0.0.1:8080/api/getUser   实际代理为：http://127.0.0.1:8000/user//getUser
  55.   location ^~/api {
  56.     proxy_pass http://127.0.0.1:8000/user/;
  57.     proxy_set_header Host $http_host; #后台可以获取到完整的ip+端口号
  58.     proxy_set_header X-Real-IP $remote_addr; #后台可以获取到用户访问的真实ip地址
  59.   }
  60. }

前端项目如何部署Nginx

  1. server {
  2.   listen 8090;
  3.   server_name localhost;
  5.   # 默认访问
  6.   # 部署路径：/home/web/my_demo
  7.   # 访问路径为：http://localhost:8090/
  8.   location / {
  9.     try_files $uri $uri/ /index.html;
  10.     proxy_set_header X-Real-IP $remote_addr;
  11.     proxy_set_header Host $http_host;
  12.     root /home/web/my_demo/;
  13.     index index.html index.htm;
  14.   }
  16.   # 带前缀的访问
  17.   # 部署路径：/home/web/my_demo
  18.   # 访问路径为：http://localhost:8090/my_demo/
  19.   # 如果location路径最后没有配置斜杠，则浏览器输入访问地址后，路径最后会自动拼一个斜杠
  20.   location ^~/my_demo/ {
  21.     try_files $uri $uri/ /my_demo/index.html;
  22.     proxy_set_header X-Real-IP $remote_addr;
  23.     proxy_set_header Host $http_host;
  24.     root /home/web/;
  25.     index index.html index.htm;
  26.   }
  27. }
  28. }

注意这几个 Nginx 不同访问路径和代理的配置，注意有加斜杠和不加的区别。