Whitebird behind reverse proxy

[jeannovak]

Hi,

Hope y'all doing great.

I've been testing whitebird for the past few days and wanted to put it behind a reverse proxy. While testing, I found some things that confused me a bit when implementing it.

I'm using docker and one of the things that got me was how the client is expected to connect to the backend. I know nothing about webapps, so yea.

This caused some confusion because CORS does not allow for the browser to create HTTP requests for different domains. Since my configuration was not 100% in agreement with the idea of the client acessing backend, the browser simply blocked the request due to the URL used to access the main webpage (frontend) being different to the URL accessed when trying to open a new whiteboard (backend).

I was at first curious why the docker-compose had mapped ports (40000:5000 and 40001:3001) because docker is designed in a way that its really simple to provide communication between containers (As used in the backend/db communication) and so I didn't see the need for a backend port being mapped. After the situation described above I understood that this port was actually necessary for the client.

Trying to tie that with the idea of reverse proxying the application, I started testing some different configurations and got it working. I'm sharing below my configuration for docker-compose.yml, backend.env, the frontend Dockerfile as well as the labels necessary to use traefik for reverse proxying it in a way that the client will use only one encrypted URL and avoiding mapping ports at all.

Just a reminder that you would need a A or AAAA entry in your DNS zone pointing to the traefik's IP. My traefik entrypoints are called http and https and it may differ in your environment. Also replace domain.tld with your domain.

Docker-compose.yml

Note the main changes below: All containers are configured in a docker network called proxy, the port mappings being disabled, as well as labels for traefik.

The objective here is to make traefik route everything from URL whitebird.domain.tld to the frontend container. Now, if the URL whitebird.domain.tld is accompained by the URI /whiteboard or /socket.io, it actually routes it to the backend container.

version: '3.7'
services:
  mongodb:
    container_name: whitebird-db
    restart: unless-stopped
    image: mongo:latest
    networks:
      - proxy
    environment:
      MONGO_INITDB_ROOT_USERNAME: <user>
      MONGO_INITDB_ROOT_PASSWORD: <password>
    volumes:
      - /var/containers/Whitebird/mongodb:/data/db
  backend:
    container_name: whitebird-backend
    restart: 'no'
    build: ../../backend
    env_file: ./backend.env
    networks:
      - proxy
    depends_on:
      - mongodb
#    ports:
#      - '40001:3001'
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.whitebird-backend.entrypoints=http"
      - "traefik.http.routers.whitebird-backend.rule=Host(`whitebird.domain.tld`) && PathPrefix(`/whiteboard`) || PathPrefix(`/socket.io`)"
      - "traefik.http.middlewares.whitebird-backend-https-redirect.redirectscheme.scheme=https"
      - "traefik.http.routers.whitebird-backend.middlewares=whitebird-backend-https-redirect"
      - "traefik.http.routers.whitebird-backend-secure.entrypoints=https"
      - "traefik.http.routers.whitebird-backend-secure.rule=Host(`whitebird.domain.tld`) && PathPrefix(`/whiteboard`) || PathPrefix(`/socket.io`)"
      - "traefik.http.routers.whitebird-backend-secure.tls=true"
      - "traefik.http.routers.whitebird-backend-secure.service=whitebird-backend"
      - "traefik.http.services.whitebird-backend.loadbalancer.server.port=3001"
      - "traefik.docker.network=proxy"
  frontend:
    container_name: whitebird-frontend
    restart: unless-stopped
    networks:
      - proxy
    build: ../../frontend
#    ports:
#      - '40000:5000'
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.whitebird.entrypoints=http"
      - "traefik.http.routers.whitebird.rule=Host(`whitebird.domain.tld`)"
      - "traefik.http.middlewares.whitebird-https-redirect.redirectscheme.scheme=https"
      - "traefik.http.routers.whitebird.middlewares=whitebird-https-redirect"
      - "traefik.http.routers.whitebird-secure.entrypoints=https"
      - "traefik.http.routers.whitebird-secure.rule=Host(`whitebird.domain.tld`)"
      - "traefik.http.routers.whitebird-secure.tls=true"
      - "traefik.http.routers.whitebird-secure.service=whitebird"
      - "traefik.http.services.whitebird.loadbalancer.server.port=5000"
      - "traefik.docker.network=proxy"

networks:
  proxy:
    external: true

backend.env

This file is pretty much the same.

# ---------------------- MONGO DB ---------------------------
MONGO_URI=mongodb://<user>:<password>@mongodb
MONGO_DBNAME=backend

# -------------------- APP SETTINGS -------------------------
APP_BACKEND_PORT=3001
APP_SOCKET_PORT=
APP_JOINCODE_LENGTH=8
                        

frontend/Dockerfile

In the frontend Dockerfile, since from the POV of the client, you will always request things to the same domain, you can basically replace API_URL, SOCKET_URL and FRONTEND_HOST to the same URL

# Backend Server Location
ENV API_URL='https://whitebird.domain.tld/'
ENV SOCKET_URL='https://whitebird.domain.tld/'

# Frontend Host
ENV FRONTEND_HOST='http://whitebird.domain.tld'