Question

我有一个React App，它是使用以下Dockerfile构建的

# 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 App不在example.com的根目录中寻找路径。在不使用PathPrefix的情况下运行并直接调用example.com时，应用程序处于唤醒状态。

Answer 1

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

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

{
  "homepage": "/path"
}

react documentation

Answer 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"

React在Traefik中不适用于Path和Prefix

2 个答案: