如何在 Nginx Docker 映像上使用 Traefik PathPrefix？答案

【问题标题】：How to use Traefik PathPrefix on an Nginx Docker image?如何在 Nginx Docker 映像上使用 Traefik PathPrefix？
【发布时间】：2020-09-08 07:54:07
【问题描述】：

我正在制作一个 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... 源文件，但没有找到它们。这些地址后面没有任何内容，但是通过在http://address/app/static... 之间添加/app，可以像预期的那样找到源文件。如何让我的应用程序执行此操作？

这是 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;"]

【问题讨论】：

标签： node.js docker nginx traefik

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

这也是我们几天前遇到的一个有趣的问题。我将分享我的发现，希望它能为您指明正确的方向。

仅使用 PathPrefix，应用程序必须完全监听前缀。来自https://docs.traefik.io/routing/routers/#rule

由于路径按原样转发，因此您的服务应在 /products 上进行侦听。

如果您的应用不在子路径上侦听，有一个中间件会去除前缀： https://docs.traefik.io/middlewares/stripprefix/ 但是需要注意的是

如果您的后端正在提供资产（例如，图像或 Javascript 文件），它很可能必须返回正确构建的相对 URL。

除了更改应用程序中的路径外，我们还没有完全找到解决方案。但也许这会有所帮助

【讨论】：

【解决方案3】：

例如在 Next.js 中，我必须创建带有内容的 next.config.js：

{
  module.exports = {
    basePath: '/nextjs',
}

nextjs 是来自 traefik 的 PathPrefix 值。

【讨论】：