Nginx 反向代理不提供靜態文件

Question

我嘗試通過 docker-compose 啟動一些服務。 其中之一是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 進行反向代理和 React App。 加載 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;
        }
    }
}

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

這將更新靜態文件的相對路徑。