Question

我试图通过docker-compose启动一些服务。其中之一是 nginx反向代理，它处理不同的路径。一种路径（“ /反应”）是通过端口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 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;
        }
    }
}

->更新

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

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反向代理不提供静态文件

0 个答案: