React 不适用于 Traefik 中的路径和前缀答案

【问题标题】：React doesnt work with Path and Prefix in TraefikReact 不适用于 Traefik 中的路径和前缀
【发布时间】：2019-04-13 15:07:10
【问题描述】：

我有一个使用以下 Dockerfile 构建的 React 应用程序

# base image
FROM node:latest as builder

# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app

# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY app/package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts@1.1.1 -g

COPY ./app/usr/src/app
# start app
CMD ["npm", "start"]

# production environment
FROM nginx:alpine
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY --from=builder /usr/src/app/build /etc/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

然后我使用以下 Docker Compose 运行它

build: .
labels:
 - "traefik.frontend.rule=Host:www.example.com;PathPrefix:/path"
 - "traefik.protocol=http"
 - "traefik.frontend.entryPoints=https"
 - "traefik.port=80"
 - "traefik.enable=true"
restart: always

当调用 example.com/path 时，我收到很多 404 错误，因为 React 应用程序不是在寻找路径，而是在 example.com 的根目录中。该应用程序在没有 PathPrefix 的情况下运行并直接调用 example.com 时处于唤醒状态。

【问题讨论】：

最终图像中的/etc/nginx/html 是（或不是）什么？构建器图像中的 /usr/src/app/build 是（或不是）什么，为什么（或为什么不）？
在那些文件夹中当然是相同的数据，它是反应构建，里面有什么。所以会有index.html等等
我感觉问题出在 React 应用程序如何构建 URL（不是以 /path 为前缀）而不是 traefik 配置。您可以使用 curl 等手动正确访问预期的 /path/ URL吗？

标签： reactjs docker docker-compose react-router traefik

【解决方案1】：

您的应用不知道 traefik 正在添加前缀。

您需要在 package.json 文件中指定 homepage 属性来修改将在您的应用中使用的每个相对 URL。使用npm run-script build 构建您的应用程序后应该没问题。

{
  "homepage": "/path"
}

react documentation

【讨论】：

【解决方案2】：

我已经找到了解决您问题的方法。让我解释一下：

我们项目的生产环境中的“默认”路径通常是/sforms
我想从任何路径提供已构建的包 - 无需重新构建在生产环境中，所以"homepage": "." 是强制性的。

例如：/sforms_1.0、/sforms_legacy...等

所以我用以下方式重新配置了 package.json 中的脚本“start”：

"start": "cross-env PUBLIC_URL=/sforms react-scripts start"

这样我就可以在/sforms下启动我的开发环境了，避免了traefik的“魔法”，但保留了“主页”：“。”。

所以在 Traefik 中，我只需要重定向所有开始的调用带有前缀/sforms 到我的开发服务器，以及所有情况被覆盖了。

让我在此处粘贴该组件的 Traefik 配置。也许它可能有用：

http:
  routers:
    debugging-oe-sl-form:
      service: debugging-oe-sl-form-proxy
      rule: "PathPrefix(`/sforms`)"
      entryPoints:
        - web

  services:
    debugging-oe-sl-form-proxy:
      loadBalancer:
        servers:
          - url: "http://host.docker.internal:3000"

【讨论】：