带有 proxy_pass 的 Nginx 根位置和带有 try_files 的子路径

Question

我有一个 Nginx 服务器，必须将一个 React 应用程序和另一个 Nginx 与 PHP 配置结合起来，如下所示：

1. 在 /client 路径上为 React 应用程序提供托管在当前 Nginx 实例上的文件。
2. 在 /（根）路径上必须通过内部 IP 为另一个应用程序提供服务。

这是当前配置：

worker_processes     2;
worker_rlimit_nofile 32768;

events {
  worker_connections 16384;
}

http {

  server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;
    server_name domain.com;
    location / {
      return 301 https://$host$request_uri;
    }
  }

  server {

    include mime.types;

    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml;
    gzip_disable "MSIE [1-6]\.";

    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server ipv6only=on;

    ssl_certificate       /app/ssl/cert.pem;
    ssl_certificate_key   /app/ssl/key.pem;
    ssl_session_timeout   5m;
    ssl_protocols         TLSv1 TLSv1.1 TLSv1.2;

    server_name domain.com

    location /client {
      root /app/build/;
      index index.html index.htm;
      try_files $uri $uri/ /index.html;
    }

    location / {
        proxy_pass http://192.168.1.1;
        proxy_http_version  1.1;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_connect_timeout 159s;
        proxy_send_timeout   120;
        proxy_read_timeout   120;
        proxy_buffer_size    64k;
        proxy_buffers     16 32k;
        proxy_busy_buffers_size 64k;
        proxy_temp_file_write_size 64k;
    }

  }
}

以及 192.168.1.1 实例的以下 Nginx：

server {
    listen 80;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass 192.168.1.2:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

在此配置中，即使我输入 /client 路径，它也只会显示 proxy_pass。 如果我删除 proxy_pass 位置指令，则带有 try_files 的客户端路径可以正常工作。

注 1：React 在 createBrowserHistory 中有一个基本名称 /client。

注2：第一个Nginx之前可以工作，但proxy_pass源是公共URL。

Answer 1

您当前的

location /client

块正在错误的位置查找文件，因此始终默认为

/index.html

，由包含

proxy_pass

的位置处理。

root

指令通过将根值与 URL 的路径元素连接来形成文件的路径。因此 URL

/client/foo

将解析为路径名

/app/build/client/foo

，这不是您想要的。

alias

指令与

location

值一起使用，通过替换将URL转换为路径名。

例如：

location /client {
  alias /app/build;
  index index.html index.htm;
  try_files $uri $uri/ /client/index.html;
}

因此 URL

/client/foo

将解析为路径名

/app/build/foo

。

请注意，位置和别名值应 both 以

/

结尾或 neither 以

/

结尾，以便正确替换。

请注意，

try_files

指令的最后一个参数是 URI、错误代码或命名位置。在这种情况下，正确的 URI 应该是

/client/index.html

。