Serving an Angular dockerized application with Traefik in docker swarm

Traefik Traefik v2
1

I am trying to serve a site developed in Angular. Angular app is dockerized in an nginx container. I have a rails backend and a postgres database along with it.

version: "3.8"
services:

# Traefik
  traefik:
    image: traefik:v2.3
    ports:
      - target: 80
        published: 80
        mode: host
    command:
      - --providers.docker
      - --providers.docker.swarmmode
      - --entrypoints.http.address=:80
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    networks:
      - proxy
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.api.rule=Host(`192.168.100.200`)"
    deploy:
      mode: global
      placement:
        constraints:
          - node.hostname == node1

  postgresql:
    image : xxxxxx/custom-postgres:latest
    volumes:
       pgdata:/var/lib/postgresql/data
    networks:
      - proxy
    ports: ["5432"]
    environment :
      - POSTGRES_DB=postgres
      - POSTGRES_PASSWORD=secret
      - POSTGRES_USER=postgres
      - DATABASE_HOST=postgresql
    deploy :
      mode: replicated
      replicas 1

  frontend :
    image : xxxxx/frontend-nginx:latest
    volumes :
      - /etc/nginx/nginx.conf:/etc/nginx/nginx.conf
    networks :
      - proxy
    ports  :
      - 80
    depends_on :
      - core-api
    environment :
      - BACKEND_HOST=http://core-api:3000/
    deploy:
      mode : replicated
      replicas: 1
      labels: 
        - traefik.enable=true
        - traefik.docker.network=proxy
        - traefik.http.routers.frontend.rule=Path(/)
        - traefik.http.routers.frontend.priority=5
        - traefik.http.services.frontend.loadbalancer.server.port=80

  core-api                  :
    image                   : xxxx/core-api:latest
    command                 :
                            - /bin/sh
                            - -c 
                            - |
                              rails db:create db:migrate
                              rake db:seed
                              rm -f tmp/pids/server.pid
                              rails s -p 3000 -b 0.0.0.0
    networks                :
                            - proxy
    ports                   : 
                            - 3000
    depends_on              : 
                            - postgresql
    environment             :
                            - DATABASE_HOST=postgresql
    deploy                  :
      mode                  : replicated
      replicas              : 1

volumes :
  pgdata:

networks      :
  app-net     :
    driver    : overlay
    name      : proxy
    attachable: true

The problem is when I type the IP in the browser it redirects to http://192.168.100.200/en/public. I cannot see the redirection in the developer tools. It is doing it internally I think. The redirect should happen but that is not because the javascript files are no where to find it seems, and it fails to complete the redirect. The javascript files are giving me 404 when seen in the developer tools of the browser. If I use this without Traefik everything works as it should. Moreover it works with sample docker image like nginxdemos/hello . Traefik loadbalance it well and serves the site correctly. I tried the 'redirect' middleware but, I am not sure how to use it in this situation.

image
image1896×356 40.5 KB

image
image893×501 45 KB

How should I correctly tell this to Traefik ?

2

Hi there, did you solved this issue? I am trying to do exactly the same with the same error :frowning:

3

Share your full Traefik static and dynamic config, and docker-compose.yml if used.

4

Hi bluepuma77,

I have created a public github repo with the whole code for you to check. You can find detailed issue description in the README.md file in the repo. Please let me know if you have any additional questions, I really appreciate you are spending time to help me with my struggle.

Thank you again for your time and effort.

Repo link:

5

Do you use Swarm? Then you would need to run docker stack deploy which does not support inline build found in the docker-compose.yml.

Use a Docker network (or Docker Swarm overlay network) to connect the proxy with the target containers, see simple Traefik example. (Simple Traefik Swarm example)

You usually can not force a web app with GUI to a path, as the response might contain links, redirects, scripts and images with fixed path. Best practice is to use a sub-domain instead.

If you can set something like APP_BASE_HREF that's great, but in your case it seems not to work for traefik-angular-issue-petclinic-ui as intended. The app seems to run at http://<ip>:82/practice/petclinic/, but it still loads scripts from /, check the browsers developer tools network tab.

6

Thank you for your points.
I am not using Swarm. I'll add the network. The subdomain works fine but it does not suite my needs.
I will try to come with the solution where the Traefik will redirect everything on the URL path to the angular but will remove the URL prefix so angular container will listen on the root path... If I will succeed, I'll post my solution here.

Thank you again for your time and effort.