nginx 反向代理 - 如何为多个应用程序提供服务

Question

我正在尝试使用 nginx 构建一个反向代理，以使我的项目中的所有内容都可以从单个地址访问。对于单个服务，以下配置可以正常工作

/etc/nginx/sites-enabled/reverse-proxy.conf

server {
        listen 80;
        listen [::]:80;
        location  / {

        resolver 127.0.0.1;
        allow "x.x.x.x";
        deny   all;
        proxy_pass http://consul:8500;
    }

}

因此，当我在浏览器中调用服务器的 ip

x.x.x.x

时，我会看到 Consul UI 和显示

x.x.x.x/ui/dc1

的 URL。除此之外，我看到 UI 成功请求了资源文件。

我的问题；是否有可能在同一台服务器上托管两个不同的服务并仅在不同的位置引用它们？例如，如果我想包含 Vault UI 那么我会考虑做这样的事情：

server {
        listen 80;
        listen [::]:80;
        location  /consul {

        resolver 127.0.0.1;
        allow "x.x.x.x";
        deny   all;
        proxy_pass http://consul:8500;
    }

        location  /vault {

        resolver 127.0.0.1;
        allow "x.x.x.x";
        deny   all;
        proxy_pass http://vault:8200;
    }

}

但是我不确定是否可以这样做。我得到的最远的结果是打开 Consul UI，但未找到所有其他子请求（即加载资产）。

更新

我认为我的问题是我错误地使用了

location

和

proxy_pass

观察第一个配置（正在运行）

server {
        listen 80;
        listen [::]:80;
        location  / {

        resolver 127.0.0.1;
        allow "x.x.x.x";
        deny   all;
        proxy_pass http://consul:8500;
    }

}

如果我看一下curl命令

curl localhost -L -vvvv

*   Trying 127.0.0.1:80...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET / HTTP/1.1
> Host: localhost
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 301 Moved Permanently
< Server: nginx/1.18.0 (Ubuntu)
< Date: Fri, 10 Jul 2020 16:24:38 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 39
< Connection: keep-alive
< Location: /ui/
< 
* Ignoring the response-body
* Connection #0 to host localhost left intact
* Issue another request to this URL: 'http://localhost/ui/'
* Found bundle for host localhost: 0x557b754549e0 [serially]
* Can not multiplex, even if we wanted to!
* Re-using existing connection! (#0) with host localhost
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET /ui/ HTTP/1.1
> Host: localhost
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Server: nginx/1.18.0 (Ubuntu)
< Date: Fri, 10 Jul 2020 16:24:38 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 7806
< Connection: keep-alive
< Accept-Ranges: bytes
< Last-Modified: Fri, 10 Jul 2020 07:37:44 GMT
< 
<!DOCTYPE html>
<html lang="en" class="ember-loading">
...

我已经可以看到 html 了。但是，如果我将conf文件更改为：

server {
        listen 80;
        listen [::]:80;
        location  /consul/ {

        resolver 127.0.0.1;
        allow "x.x.x.x";
        deny   all;
        proxy_pass http://consul:8500;
    }

}

然后尝试像

curl localhost/consul -L -vvvv

那样称呼它，我得到以下结果：

*   Trying 127.0.0.1:80...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET /consul HTTP/1.1
> Host: localhost
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 301 Moved Permanently
< Server: nginx/1.18.0 (Ubuntu)
< Date: Fri, 10 Jul 2020 16:32:35 GMT
< Content-Type: text/html
< Content-Length: 178
< Location: http://localhost/consul/
< Connection: keep-alive
< 
* Ignoring the response-body
* Connection #0 to host localhost left intact
* Issue another request to this URL: 'http://localhost/consul/'
* Found bundle for host localhost: 0x55ba7959f9e0 [serially]
* Can not multiplex, even if we wanted to!
* Re-using existing connection! (#0) with host localhost
* Connected to localhost (127.0.0.1) port 80 (#0)
> GET /consul/ HTTP/1.1
> Host: localhost
> User-Agent: curl/7.68.0
> Accept: */*
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 404 Not Found
< Server: nginx/1.18.0 (Ubuntu)
< Date: Fri, 10 Jul 2020 16:32:35 GMT
< Content-Length: 0
< Connection: keep-alive

我将不胜感激关于这个问题的任何想法

Answer 1

你是对的，你使用

location

和

proxy_pass

的方式是错误的。当您使用

location /vault {
    proxy_pass http://vault:8200;
}

构造时，您将按原样将 URI 传递到上游，而您很可能希望从中删除

/vault

前缀。为此，您应该使用这个：

location /vault/ {
    proxy_pass http://vault:8200/;
}

您可以在这里了解有关第一个和第二个的区别的更多信息。然而，这仍然会阻止资产正确加载。

这个问题——如何在某个 URI 前缀下代理某些 Web 应用程序——在 stackoverflow 上被反复询问。唯一正确的方法是让您的代理应用程序仅通过相对 URL 请求其资产（考虑使用

assets/script.js

而不是

/assets/script.js

）或使用正确的前缀 (

/vault/assets/script.js

)。一些编写良好的应用程序能够检测它们是否在这样的 URI 前缀下使用，并在生成资产链接时使用它，一些应用程序允许通过某些设置指定它，但有些应用程序根本不适合这种使用。如果不满足这些要求，Web 应用程序将无法工作的原因非常明显 - 任何不以

/vault

开头的 URL 都不会与您的

location /vault/ { ... }

块匹配，而是通过主

location

块提供服务。因此，最好的方法是修复您的网络应用程序，但是如果您确实无法修复，可以使用多种解决方法。

一些 Web 框架已经使用相对 URL 构建其 Web 应用程序，但在
```
<base href="/">
```
的头部部分使用
```
index.html
```
。例如，React 或 Angular 使用这种方法。如果您的 web 应用程序根目录中有这样一行
```
index.html
```
，只需将其更改为
```
<base href="/vault/">
```
。

使用基于 HTTP

Referer

标头值的条件路由。这种方法对于加载资源的单页面应用程序非常有效，但如果 Web 应用程序包含多个页面，则这种方法将不起作用，在第一次从一个页面跳转到另一个页面后，正确的上游检测逻辑将中断。这是一个例子：

map $http_referer $prefix {
    ~https?://[^/]+/vault/     vault;
    # other webapps prefixes could be defined here
    # ...
    default                    base;
}

server {

    # listen port, server name and other global definitions here
    # ...

    location / {
        try_files "" @$prefix;
    }
    location /vault/ {
        # proxy request to the vault upstream, remove "/vault" part from the URI
        proxy_pass http://vault:8200/;
    }
    location @vault {
        # proxy request to the vault upstream, do not change the URI
        proxy_pass http://vault:8200;
    }
    location @base {
        # default "root" location
        proxy_pass http://consul:8500;
    }

}

更新@2022.02.19

这是使用条件重写的另一种可能的方法：

server {

    # listen port, server name and other global definitions here
    # ...

    if ($http_referer ~ https?://[^/]+/vault/)
        # rewrite request URI only if it isn't already started with '/vault' prefix
        rewrite ^((?!/vault).*) /vault$1;
    }

    # locations here
    # ...

}

使用

sub_filter

 中的

ngx_http_sub_module 指令重写响应正文内的链接。这是最丑陋的一个，但仍然可以用作最后一个可用选项。这种方法对性能有明显的影响。重写模式应根据上游响应正文确定。通常这种类型的配置看起来像

location /vault/ {
    proxy_pass http://vault:8200/;
    sub_filter_types text/css application/javascript;
    sub_filter_once off;
    sub_filter 'href="/' 'href="/vault/';
    sub_filter "href='/" "href='/vault/";
    sub_filter 'src="/'  'src="/vault/';
    sub_filter "src='/"  "src='/vault/";
    sub_filter 'url("/'  'url("/vault/';
    sub_filter "url('/"  "url('/vault/";
    sub_filter "url(/"   "url(/vault/";
}

更新@2022.02.19

ServerFault 中的相关线程：如何使用 nginx 反向代理正确处理相对 URL。

在 JavaScript 代码上使用

sub_filter

的可能注意事项：Nginx 作为同一域上两个 Nodejs 应用程序的反向代理。

Answer 2

补充一下主题：如果您使用 Vite 创建构建，您可以使用此配置设置相对路径：

导出默认的defineConfig({ 根据： '。/'， });

对于使用React Router的应用程序，您可以从BrowserRouter切换到HashRouter。我的应用程序由 NGINX 提供服务，因此我的反向代理 NGINX 配置如下：

    location /app/quiz/ {
        proxy_pass https://quiz_web/;
        proxy_ssl_server_name on;
        proxy_set_header Host https://quiz_web/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

nginx 反向代理 - 如何为多个应用程序提供服务

问题描述投票：0回答：2

2个回答

最新问题

nginx 反向代理 - 如何为多个应用程序提供服务

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2