Expose 2 dockerized react apps on port 80 with Traefik

[lip]

Hey there,

I'll admit it, I'm kind of a newbie here and just starting out with the whole concept of reverse proxy and so on.
So here's my issue, and I can't get quite my head around it (although I've been trying hard to solve it).

I'm using create-react-app to power 2 web apps on the same Debian server. I'm trying to dockerize each app, and let Traefik do all the heavy lifting to route incoming requests on port 80 to the corresponding docker container depending on the domain name used.

After several (failed) attempts, here is where I'm at in terms of docker-compose file

version: "3.3"

services:

  traefik:
    image: "traefik:v2.8"
    container_name: "traefik"
    command:
      #- "--log.level=DEBUG"
      - "--api.insecure=true"
      - "--providers.docker=true"
      - "--providers.docker.exposedbydefault=false"
      - "--entrypoints.web.address=:80"
    ports:
      - "80:80"
      - "8080:8080"
    volumes:
      - "/var/run/docker.sock:/var/run/docker.sock:ro"
  
  app:
    build:
      context: .
    container_name: erp-etude
    stdin_open: true
    volumes:
       - ./src:/app/src
       - ./public:/app/public
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.app.rule=Host(`chabanon.online`)"
      - "traefik.http.routers.whoami.entrypoints=web"

This is all fine and dandy, when I'm logging in to the Traefik dashboard, I can see the services up and running but strangely not request gets forwarded... I can't access my app from the outside.

Any help or insight will be much, much appreciated.

Thanks for you help.

[nalta]

Hi

First correct the line bellow
(the router entrypoint name must match the corresponding router 'rule' name)

traefik.http.routers.whoami.entrypoints=web
to
traefik.http.routers.app.entrypoints=web

Second add a 'loadbalancer" to the service app to tell Traefik where to forward the requests
Generic sample, assuming your "app" listen to port XX, add

traefik.http.services.app.loadbalancer.server.port=XX

[lip]

Thanks Nalta for your help.
Unfortunately I can't get it to work. I can see both services up and running, I can ping my docker container but using my external DNS domain nothing shows up...

[bluepuma77]

Have you defined a port in your app image using "expose"? If not, you need to add loadbalancer to the labels. Make sure to use the correct port your app is listening on. Furthermore you should use the same ID within all the label strings:

labels:
      - "traefik.enable=true"
      - "traefik.http.routers.MyAPP.rule=Host(`chabanon.online`)"
      - "traefik.http.routers.MyAPP.entrypoints=web"
      - "traefik.http.services.MyAPP.loadbalancer.server.port=80"

Update: a single port is correctly exposed, so no need for loadbalancer.

[lip]

Hey,
If that's any help, I'm joining my docker file as well for the react app.

FROM node:latest

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 80



CMD ["npm", "start"]

When running docker-compose, I can access the traefik dashboard (on port 8080), but loading seems stuck when trying to access port 80 I can't reach my react app and no error appears on the dashboard... weird. To be honest, I'm a bit lost here.

[bluepuma77]

To test if it's a Docker/Traefik/app issue, I would use your current docker-compose.yml and replace

app:
  build:
    context: .
  ...

with

app:
  image: traefik/whoami:v1.8.1
  ...

to see if that service/container is reachable within your setup.

Furthermore you can test if your app is working correctly by removing Traefik from docker-compose.yml and just add ports 80:80 to your app.

[lip]

Ok so I resolved the issue ! It had to do with my React container. Adding the option max_old_space_size in the package.json file fixed the problem

 "start": "PORT=80 react-scripts --max_old_space_size=8128 start"

I hope this can be of some help to others.