我尝试通过docker-compose启动一些服务。其中之一是处理不同路径的nginx反向代理。其中一个路径(“/ react”)指向端口80上带有nginx的容器化react_app。仅仅反向代理是正常工作的。此外,如果我在端口80上提供react_app的nginx,所有工作都很好。将两者结合起来而不更改配置会导致像CSS和JS这样的静态文件出现404错误。
设置#1
正确地将路径/test转发到Google。 docker-compose.yml
正确地将路径/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;
}
}
}
/usr/share/nginx/html
下确实存在一个index.html文件。 - DeVolt