React在Traefik中不适用于Path和Prefix [英] React doesnt work with Path and Prefix in Traefik

问题描述

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

I have a React App, that I build with the following 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运行该

Then I run this with the following 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 。

When calling example.com/path I get a lot of 404 Errors, as the React App is not looking for path, but in the root of example.com. The App is woking when run without PathPrefix and calling example.com directly.

推荐答案

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

Your app doesn't know that traefik is adding a prefix.

您需要指定主页 package.json 文件中的$ c>属性，以修改将在您的应用中使用的每个相对URL。使用 npm运行脚本构建构建应用后，应该没问题。

You need to specify homepage property in package.json file to modify every relative URLs that will be used in your app. After building your app using npm run-script build it should be fine.

{
  "homepage": "/path"
}

< a href = https://create-react-app.dev/docs/deployment#building-for-relative-paths rel = nofollow noreferrer>反应文档

这篇关于React在Traefik中不适用于Path和Prefix的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！