如果找不到 nginx 从静态服务尝试反向代理

nginx serve from static if not found try reverse proxy

我有一个使用 angularjs 开发的应用程序,当访问 dist/ 文件夹时加载整个应用程序。

我想做的是,当在 angularjs 上找不到页面时,为了尝试反向代理,我尝试进行以下设置,但 nginx 不允许在同一位置设置两次单块

server {
    listen 80;
    server_name example.com;
    keepalive_timeout 60;
    client_max_body_size 10M;
    root /var/lib/www/dist;
    charset utf-8;

    location / {
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        root /var/lib/www/dist;
        try_files $uri $uri/ /index.html =404;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_buffering off;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
        if (!-f $request_filename) {
            proxy_pass http://app_root;
            break;
        }
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/lib/app/etc/templates;
    }

}

所以基本上,如果 URL 在 angularjs 上出现 404,我希望它尝试将其传递给 proxy_pass http://app_root; 任何人都可以就如何实现此设置提出建议?

谢谢,

更新

所以我正在尝试 "Mohammad AbuShady" 提出的方法,并将我的 nginx 设置更新为以下内容,但仍然无法正常工作,而是尝试在 AngularJS 应用程序中查找页面而不是移动到@proxy up_stream 设置

upstream app_root {
    server unix:/tmp/app_root.sock fail_timeout=0;
}

server {
    listen 80;
    server_name example.com;
    keepalive_timeout 60;
    client_max_body_size 10M;
    root /var/lib/www/dist;
    charset utf-8;

    location / {
        expires -1;
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
        root /var/lib/www/dist;
        try_files $uri$args $uri$args/ $uri/ /index.html @proxy;
    }

    location @proxy {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_buffering off;
        if (!-f $request_filename) {
            proxy_pass http://app_root;
            break;
        }
    }

    error_page 500 502 503 504 /500.html;
    location = /500.html {
        root /var/lib/app/etc/templates;
    }

}

试试这个莫:

server {
listen 80;
server_name example.com;
keepalive_timeout 60;
client_max_body_size 10M;
root /var/lib/www/dist;
charset utf-8;

location / {
    expires -1;
    add_header Pragma "no-cache";
    add_header Cache-Control "no-store, no-cache, must-revalidate, post-check=0, pre-check=0";
    root /var/lib/www/dist;
    try_files $uri $uri/ /index.html =404;
    error_page 404 = @404;
}

location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_buffering off;
    proxy_http_version 1.1;
    proxy_set_header Connection "";
    if (!-f $request_filename) {
        proxy_pass http://app_root;
        break;
    }
}

location @404 {
    proxy_pass http://app_root;
}

error_page 500 502 503 504 /500.html;
location = /500.html {
    root /var/lib/app/etc/templates;
}

}

你想多了,一个位置就可以处理它,然后再给它一个后备

location / {
  # omitted extra settings
  # check notes below
  try_files $uri @proxy;
}

location @proxy {
  # omitted proxy settings
  proxy_pass http://app_root;
}

备注:

  1. 不需要第二根内部位置,它已经定义在 服务器块
  2. 我删除了 $uri/,因为您的服务器中没有 index
  3. 我也删除了/index.html,如果你确实想使用它那么你可能想将它定义为服务器块中的索引并将$uri/放回

    server {
      index index.html;
      location / {
        try_files $uri $uri/ @proxy;
      }
    }
    
  4. 我不知道 app_root 在哪里,但我假设它是在其他地方定义的上游。