docker - 无法从 Nginx 反向代理后面的 docker 容器提供静态资源

Question

我正在尝试使用 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 的解决方案。

Answer 1

如果其他人遇到同样的问题，这里有一个额外的答案以及@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/;
    }