Nginx反向代理无法提供静态文件。

Question

我尝试通过docker-compose启动一些服务。其中之一是处理不同路径的nginx反向代理。其中一个路径（“/ react”）指向端口80上带有nginx的容器化react_app。仅仅反向代理是正常工作的。此外，如果我在端口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 反向代理和 React 应用程序。 可以加载 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;
        }
    }
}

--> 更新

这是一个不太令人满意的解决方法，但它可以工作。但现在反应路由出现了问题。我无法访问 /react/login

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;
        }
    }
}

- DeVolt

---

您没有向反向代理提供有关如何处理React应用程序的请求的任何信息。您只是说在端口80上侦听调用并解析任何调用到index.html，但实际上该文件可能不存在。我猜您的React应用程序正在3000端口上运行，对吗？ - Sorix

反向代理使用代理_pass http://react_app/通过内部域名。因此，react_app的nginx在80端口提供服务。我尝试在3000端口上运行它并使用我的机器上的nginx（而不是docker内部），结果显示相同的行为。在react_app容器中，路径/usr/share/nginx/html下确实存在一个index.html文件。 - DeVolt

抱歉，错过了那部分内容，没有意识到第三个设置会使用前面的一些东西。看看这个链接 https://dev59.com/6rXna4cB1Zd3GeqPSuqU，或许能澄清事情。 - Sorix

大家好，我也遇到了完全相同的问题。@DeVolt，你解决了吗？ - Raph117

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;
            #####################################
        }
    }
}

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

- ksaliya

---

谢谢！这个可以用，但是React路由问题还存在。Nginx响应路由，例如/login，应该被转发到index.html。 - DeVolt