Nginx反向代理不提供静态文件 [英] Nginx reverse-proxy not serving static files

问题描述

我试图通过docker-compose启动一些服务.其中之一是 nginx反向代理，它可以处理不同的路径.一种途径("/反应")是通过端口80上带有nginx的容器化react_app .唯一地，反向代理工作正常.另外，如果我在端口80上服务器react_app的nginx，一切正常.在配置中将不更改的任何内容组合在一起会导致针对诸如CSS和JS之类的静态文件的404.

I tried to start some services via docker-compose. One of them is a nginx reverse-proxy, handling different paths. One path ("/react") is to a containerized react_app with a nginx on port 80. Solely, the reverse-proxy is working correctly. Also, if I server the nginx of the react_app on port 80, all work's fine. Combining both without changing anything in the config leads to 404 for static files like css and js.

设置#1
正确转发路径/test到Google.

Setup #1
Correct forward for path /test to 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回答.

Setup #2
No reverse proxy. Correct answer from nginx inside of container 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'

设置#3(不起作用！)
反向代理和带有Nginx的React App.加载index.html，但失败，因此将文件加载到/static

Setup #3 (not working!)
Reverse proxy and React App with nginx. Loads index.html, but fails so load files in /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的配置，也许我遗漏了一些东西.

Activating both systems leads to failing static content. It seems to me that the reverse-proxy tries to server the files, but fails (for good reason), because there is no log entry in reac_app's nginx. Here's the config from the reac_app nginx, perhaps I'm missing something out.

nginx.conf (在react_app容器内部)

nginx.conf (inside react_app container)

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

->更新

这是一个不太令人满意的解决方法-但它可以工作.虽然现在反应很混乱，但路由却搞砸了.我无法访问/反应/登录

This is a rather unsatisfying workaround - but it works. Although now reacts routing is messed up. I cannot reach /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;
        }
    }
}

推荐答案

如果在浏览器中检查丢失的静态文件的路径，您会注意到它们的相对路径不是您所期望的.您可以通过在nginx反向代理配置中添加子过滤器来解决此问题.

If you check the paths of the missing static files in your browser, you'll notice their relative paths are not what you expect. You can fix this by adding sub filters inside your nginx reverse proxy configuration.

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

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

This will update the relative paths to your static files.

这篇关于Nginx反向代理不提供静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！