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

我正在尝试使用 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;
    } 

当我导航到/editorurl 在我的浏览器中，因为该页面正在提交对驻留在上游容器“编辑器”中的静态资源的请求。

我对 Nginx 还很陌生，但我推测当它收到带有 url 的请求时：http://example.com/static/css/2.3d394414.chunk.css

Nginx 无法知道相应的 css 位于editor容器。我该如何修改配置来解决这个问题？我已经看到一些配置为任何静态资产提供了通用路径，但我需要一个可以处理 docker 容器内资产的解决方案。

如果其他人遇到同样的问题，这里有一个额外的答案以及 @b0gusb 发布的答案。当您使用 docker 容器作为上游应用程序时，这是一个解决方案。dashboard and editor，例如，是包含以下内容的容器创建反应应用程序 https://github.com/facebook/create-react-app应用程序和 nginx 服务器。

首先，更改目录index.html文件，由生成create-react-app，通过设置搜索静态资源homepagepackage.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 文件，其中包含指向静态资产的链接，这些静态资产预计位于dashboard目录（或者您在斜线后选择的任何名称）homepage场地）。

现在，在您的 docker 文件中，您需要对构建资产进行一些移动，以便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 [email protected] /cdn-cgi/l/email-protection -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 in the /usr/share/nginx/html目录。现在，您的 nginx 反向代理可以区分对各种容器的不同静态资产的请求：

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