Nginx反向代理不提供静态文件

Question

我试着通过码头写作开始一些服务。其中之一是处理不同路径的nginx反向代理。一条路径("/react")是一个容器化react_app，端口80上有一个nginx。完全相反的代理是正确工作的。另外，如果我在端口80上服务器react_app的nginx，那么所有的工作都可以。在不更改的情况下将两个组合在一起，配置中的任何内容都会导致对于诸如css和js这样的静态文件的404。

安装#1

将路径/test更正到Google。

docker-compose.yml

version: "3"

services:
  #react_app:
  #  container_name: react_app
  #  image: react_image
  #  build: .
  reverse-proxy:
    image: nginx:latest
    container_name: reverse-proxy
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - '80:80'

nginx.conf (反向代理)

location /test {
    proxy_pass http://www.google.com/;
}

安装程序#2

没有反向代理。容器react_app内部nginx的正确答案。

docker-compose.yml

version: "3"

services:
  react_app:
    container_name: react_app
    image: react_image
    build: .
  #reverse-proxy:
  #  image: nginx:latest
  #  container_name: reverse-proxy
  #  volumes:
  #   - ./nginx.conf:/etc/nginx/nginx.conf
  #  ports:
  #    - '80:80'

安装程序#3 (不工作！)

反向代理和反应应用程序与nginx。加载index.html，但失败，因此在/static中加载文件

nginx.conf (反向代理)

location /react {
    proxy_pass http://react_app/;
}

docker-compose.yml

version: "3"

services:
  react_app:
    container_name: react_app
    image: react_image
    build: .
  reverse-proxy:
    image: nginx:latest
    container_name: reverse-proxy
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    ports:
      - '80:80'

激活这两个系统会导致静态内容失败。在我看来，反向代理试图服务器文件，但失败了(原因很充分)，因为在reac_app的nginx中没有日志条目。这是来自reac_app nginx的配置，也许我遗漏了一些东西。

nginx.conf (在react_app容器内)

events {}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       80;
        server_name  localhost;

        root   /usr/share/nginx/html;
        location / {
            try_files $uri /index.html;
        }
    }
}

-->更新

这是一个相当令人不满意的解决办法--但它奏效了。尽管现在有了反应，路由却变得一团糟。我无法到达/反应/登录

http {
    server {
        server_name services;

        location /react {
            proxy_pass http://react_app/;
        }

        location /static/css {
            proxy_pass http://react_app/static/css;
            add_header  Content-Type    text/css;

        }
        location /static/js {
            proxy_pass http://react_app/statics/js;
            add_header  Content-Type    application/x-javascript;
        }
    }
}

Answer 1

如果您检查浏览器中缺少的静态文件的路径，您会注意到它们的相对路径与您预期的不同。您可以通过在nginx反向代理配置中添加子过滤器来修复此问题。

http {
    server {
        server_name services;

        location /react {
            proxy_pass http://react_app/;

            ######## Add the following ##########
            sub_filter 'action="/'  'action="/react/';
            sub_filter 'href="/'  'href="/react/';
            sub_filter 'src="/'  'src="/react/';
            sub_filter_once off;
            #####################################
        }
    }
}

这将更新静态文件的相对路径。