Traefik错误使用reactjs加载静态文件

Question

总结

我正在使用 Traefik 作为 docker 容器的反向代理。但是，每当我无法呈现反应页面时，因为静态文件不会通过 traefik 加载，但如果我使用公开端口访问它（不使用 traefik），它就可以正常工作很好。

此外，代理工作正常，因为有一个 api 可以无错误地访问。

配置

Docker-撰写

# docker-compose.yml
version: '3.7'
services:
  traefik:
    image: traefik:v2.2.0
    ports:
      - "${FRONT_HTTP_PORT:-80}:80"
      - "${TRAEFIK_PORT:-8080}:8080"
    environment: 
      - TRAEFIK_LOG_LEVEL=DEBUG
      - TRAEFIK_PROVIDERS_DOCKER_EXPOSEDBYDEFAULT=false
      - TRAEFIK_PROVIDERS_DOCKER=true
      - TRAEFIK_PROVIDERS_DOCKER_NETWORK=traefik01
      - TRAEFIK_API_INSECURE=true
      - TRAEFIK_ENTRYPOINTS_FRONT=true
      - TRAEFIK_ENTRYPOINTS_FRONT_ADDRESS=:${FRONT_HTTP_PORT:-80}
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
    security_opt:
      - label:type:docker_t

  frontend:
    build: ./frontend
    ports:
      - "999:80"
    expose:
      - 80
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.frontend.entrypoints=front"
      - "traefik.http.routers.frontend.rule=PathPrefix(`/frontend{regex:$$|/.*}`)"
      - "traefik.http.routers.frontend.middlewares=frontend-stripprefix"
      - "traefik.http.middlewares.frontend-stripprefix.stripprefix.prefixes=/frontend"
      - "traefik.http.routers.frontend.priority=2"
      # - "traefik.http.routers.frontend.priority=1"
      # - "traefik.frontend.rule=Host:ctf.itasahobby.com"
    stdin_open: true

  api:
    build: ./api
    expose: 
      - 80
    links:
      - database
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.api.entrypoints=front"
      - "traefik.http.routers.api.rule=PathPrefix(`/api{regex:$$|/.*}`)"
      - "traefik.http.routers.api.middlewares=api-stripprefix"
      - "traefik.http.middlewares.api-stripprefix.stripprefix.prefixes=/api"
      - "traefik.http.routers.api.priority=2"

  database:
    build: ./database
    restart: always
networks:
  default:
    external:
      name: testnetwork

React Docker文件

# Frontend (react) Dockerfile
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
ENV PORT 80

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

图片

这是使用代理的错误图片。不使用代理工作。

Answer 1

错误是我将以下中间件应用到 React 应用程序：

      - "traefik.http.routers.frontend.middlewares=frontend-stripprefix"
      - "traefik.http.middlewares.frontend-stripprefix.stripprefix.prefixes=/frontend"

所以即使我正确设置了基础 url 应用程序接收的所有请求都从 url 中删除了“/frontend”并最终返回基础 index.html 这导致错误。

Answer 2

您可以使用 spa-to-http 在容器中为您的 ReactJS 应用程序提供服务，它是 super-simple 并且除了撰写文件之外不需要其他配置：只需在您的 React 前端文件夹中创建一个 Dockerfile下一个内容：

FROM node:16-alpine as builder
WORKDIR /code/
ADD package-lock.json .
ADD package.json .
RUN npm ci
ADD . .
RUN npm run build

FROM devforth/spa-to-http:latest
COPY --from=builder /code/dist/ .

要在 compose 中路由 traefik：

myapp:     
   build: "frontend" # name of the folder where Dockerfile is located 
   labels:
     - "traefik.enable=true"
     - "traefik.http.routers.myapp.rule=Host(`myapp.localhost`)"       - 
     - "traefik.http.services.myapp.loadbalancer.server.port=8080" # route traffic t0 port 8080

如果您需要更多信息，可以阅读我的 Detailed step-by-step guide to serve Vue.js app using Traefik and spa-to-http

此外，这里有一个 GitHub 存储库：spa-to-http page on GitHub。

披露：我是公司的首席执行官，该公司根据自己的需要创建了 spa-to-http。我们 open-sourced 它并获得了麻省理工学院的许可，因此您可以将它用于任何商业项目

Traefik错误使用reactjs加载静态文件

Traefik error loading static files using reactjs

reactjs

docker-compose

traefik

总结

配置

图片