docker - Nginx 反向代理不提供静态文件
问题描述
我尝试通过 docker-compose 启动一些服务。其中之一是nginx 反向代理,处理不同的路径。一个路径(“/react”)是一个容器化的 react_app,在端口 80 上有一个 nginx。只有反向代理才能正常工作。另外,如果我在端口 80 上为 react_app 的 nginx 服务,一切正常。将两者结合在一起而不更改配置中的任何内容会导致 css 和 js 等静态文件出现 404。
设置 #1
将路径 /test 正确转发到 Google。
码头工人-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 的正确答案。
码头工人-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/;
}
码头工人-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;
}
}
}
解决方案
如果您在浏览器中检查丢失的静态文件的路径,您会发现它们的相对路径不是您所期望的。您可以通过在 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;
#####################################
}
}
}
这将更新静态文件的相对路径。
推荐阅读
- css - 在 CSS 文件中访问 Laravel 的公共文件夹
- java - 在spring(boot)启动时扫描使用自定义@Annotation注释的任意目标(TYPE,METHOD,FIELD)
- javascript - Google Visualization API 在同一个 HTML 上加载 2 个脚本
- automation - 如何仅将 pdf 的特定页面内容复制到剪贴板?
- javascript - 文件(图像)不存储到本地存储
- javascript - 如何使用 javascript 或 jquery 等下载图像
- elasticsearch - 如何在elasticsearch脚本中将字段与_id进行比较?
- ruby-on-rails - 如果条件通过,则运行一个块
- javascript - 如何使用 JavaScript 访问特定的 json 元素
- c - 从 void 双指针数组输出 void 指针