gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:09:29 25 4
gpt4 key购买 nike

我尝试通过 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 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 路由被搞砸了。 我无法访问/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 反向代理配置中添加子过滤器来解决此问题。

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

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

关于docker - Nginx 反向代理不提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59771723/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com