我正在尝试使用 Nginx 作为反向代理来为两个容器提供服务。这是我的 Nginx conf 文件的一部分:
upstream dashboard {
server dashboard:80;
}
upstream editor {
server editor:80;
}
server {
listen 80;
server_name example.com;
location / {
proxy_pass http://dashboard;
}
location /editor/ {
rewrite ^/editor(.*)$ $1 break;
proxy_pass http://editor;
}
当我在浏览器中导航到 /editor
网址时,出现 404 错误,因为该页面正在提交对驻留在上游容器“editor”中的静态资源的请求。
我对 Nginx 还很陌生,但我推测当它收到带有 url 的请求时:
http://example.com/static/css/2.3d394414.chunk.css
Nginx 无法知道相应的 css 位于 editor
容器内。我该如何修改配置来解决这个问题?我已经看到一些配置为任何静态 Assets 提供了通用路径,但我需要一个可以处理 docker 容器内 Assets 的解决方案。
最佳答案
如果其他人遇到同样的问题,这里有一个额外的答案以及@b0gusb 发布的答案。当您使用 docker 容器作为上游应用程序时,这是一个解决方案。 dashboard
和editor
例如,是由 create-react-app 组成的容器应用程序和 nginx 服务器。
首先,更改 index.html
所在的目录文件,由 create-react-app
生成,通过设置 homepage
来搜索静态资源package.json 中的字段:
{
"name": "dashboard",
"homepage": "https://example.com/dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
使用当前最新版本的react-scripts
(3.1.1) 这将生成一个 index.html 文件,其中包含指向静态 Assets 的链接,这些静态 Assets 预计位于 dashboard
内目录(或者您在 homepage
字段中的斜杠后选择的任何名称)。
现在,在您的 docker 文件中,您需要对构建 Assets 进行一些移动,以便 index.html
中的链接不要打破。以下是我的Dockerfile
:
FROM node:12.2.0-alpine as builder
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json .
RUN npm install react-scripts@3.1.1 -g
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.17.2
COPY --from=builder /usr/src/app/build/ /usr/share/nginx/html/dashboard
COPY --from=builder /usr/src/app/build/*.html /usr/share/nginx/html
EXPOSE 80
CMD [ "nginx", "-g", "daemon off;" ]
请注意 create-react-app
生成的静态资源构建,位于 dashboard
内目录和 index.html
在 /usr/share/nginx/html
目录。现在,您的 nginx 反向代理可以区分对各种容器的不同静态 Assets 的请求:
# location to handle calls by the editor app for assets
location /editor/ {
proxy_pass http://editor/editor/;
}
# location to handle calls by the dashboard app for assets
location /dashboard/ {
proxy_pass http://dashboard/dashboard/;
}
# location to handle navigation to the editor app
location /editor-path/ {
access_log /var/logs/nginx/access.log;
rewrite ^/editor-path(.*)$ $1 break;
proxy_pass http://editor/;
}
# location to handle calls to the rest/graphql api
location /api/ {
access_log /var/logs/nginx/access.log;
rewrite ^/api(.*)$ $1 break;
proxy_pass http://restserver/;
}
# location to handle navigation to the dashboard app
location / {
access_log /var/logs/nginx/access.log;
proxy_pass http://dashboard/;
}
关于docker - 无法从 Nginx 反向代理后面的 docker 容器提供静态资源,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57642492/