node.js - 如何在 Nginx Docker 镜像上使用 Traefik PathPrefix？

Question

我正在制作一个 React 前端应用程序，我的目标是使用 Docker 镜像提供最终版本 (npm run build)，其中包含一个多阶段构建以及我的源代码代码和 Nginx。涉及多个其他 Dockerized 服务，Traefik 充当负载均衡器/转发器/Traefik 做的任何其他事情。

事情是这样的:当我构建图像时，只要不涉及 Traefik，它就可以正常工作，我只是将应用程序转发到我的 docker-compose.yml 文件中的一个端口如下:

version: '2.4'

services:
  ui:
    ports:
      - someport:80

通过这样做，我发现在 http://address:someport 提供的应用程序没有问题。

现在我最终要做的是给应用程序一个 PathPrefix，而 Traefik 是一个很好的工具。假设我最终想从 http://address/app 找到应用程序。

据我所知，这很容易在 docker-compose.yml 文件中使用标签完成，例如:

version: '2.4'

services:
  ui:
    ports:
      - 80
    labels:
      - traefik.enable=true
      - traefik.http.routers.myapp.rule=PathPrefix("/app")
      - traefik.http.routers.myapp.entrypoints=web

如果这些标签不足以实现我想要实现的目标，请通知我!

所以在启动我的应用程序并导航到 http://address/app 之后，没有呈现任何内容。 重要! -> 通过查看控制台，应用程序似乎正在尝试访问 http://address/static/css... 和 http://address/static/js... 源文件，但未找到它们。这些地址后面没有任何内容，但是通过在它们之间添加/app，如http://address/app/static...，源文件将被找到，如应该是。我如何让我的应用程序执行此操作？

这是 Traefik 问题还是 Nginx 问题，或者可能与 npm 有关，我认为这不太可能？

Dockerfile 有点像:

# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Answer 1

我认为你缺少的是你需要让 React 知道它不是托管在根 / 而是一个子路径。为了配置不同的路径，从而使 React 能够正确构建路径以访问 CSS 和 JS 等 Assets ，您需要在 包中设置 "homepage" 键。 json 为不同的值，例如，

"homepage": "http://address/app",

您可以在 deployment section of the React docs 中阅读有关该主题的更多信息.