Webswerver partially working. times out on css and js GET when page is loading

I have several machines across the world in a VLAN using tailscale.

on this network I have a docker swarm.

I am using traefik to route and load balance to my webserver service that is created in a different stack.

I am using unencrypted http.

when I navigate to the public domain name for my webserver it starts to load. the browser tab gets renamed and the pages turns white. the spinner spins... but here it hangs.

the html file is received through the GET request. but the css and js files that are called out in the html file seem to hang on the GET request. the page hangs indefinetly.

I attempted to use curl -v to pull the files and it also hangs. I get this message:

mark@YOGA9i:~$ curl -v http://mypublicdomain/index-bfb2ae58.css
*   Trying myipaddress:80...
* Connected to mypublicdomain (myipaddress) port 80 (#0)
> GET /assets/index-bfb2ae58.css HTTP/1.1
> Host: mydomainname
> User-Agent: curl/7.81.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Content-Length: 348735
< Content-Type: text/css; charset=utf-8
< Date: Sat, 08 Jul 2023 03:35:15 GMT
< Etag: 9e345a412fc9970eeb8947e3f60b3e01
< Last-Modified: Fri, 07 Jul 2023 18:36:08 GMT
< Server: uvicorn

I have changed the IP and domain names to keep my privacy. if I do curl on just the domain it does return the index.html file.

here are the docker-compose.yml files

version: "3.8"

services:
  traefik:
    image: "traefik:v2.4"
    ports:
      - 80:80
      - 8080:8080
    command:
      - --log.level=TRACE
      - --api.insecure=true
      - --api.debug=true
      - --ping=true
      - --providers.docker=true
      - --providers.docker.swarmMode=true
      - --providers.docker.exposedbydefault=false
      - --providers.docker.network=traefik-public-ntwk
      - --providers.docker.watch=true
      - --api.dashboard=true
      - --entrypoints.web.address=:80
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    deploy:
      placement:
        constraints:
          - node.hostname == webhookdev
      labels:
        - "traefik.enable=true"
        - "traefik.docker.network=traefik-public-ntwk"
        - "traefik.http.services.traefik-public.loadbalancer.server.port=8080"
    networks:
      - traefik-public-ntwk

  webhooks-listener:
    image: gunicorn_wh
    volumes:
      - W-repo:/W
        #ports:
        #- "5000:5000"
    deploy:
      replicas: 1
      labels:
        - traefik.enable=true
        - traefik.http.routers.webhooks.entrypoints=web
        - traefik.http.routers.webhooks.rule=Method("POST") && Path("/test")
        - traefik.http.services.webhooks.loadbalancer.server.port=5000
        - traefik.docker.network=traefik-public-ntwk
    command:
      ["gunicorn", "-w", "1", "-t", "60", "-b", "0.0.0.0:5000",  "main:app"]
    networks:
      - traefik-public-ntwk
    environment:
      FLASK_ENV: development


volumes:
  W-repo:
    driver: local
    driver_opts:
      type: nfs
      o: addr=dellprecision2,rw
      device: :/mnt/nfs_share

networks:
  traefik-public-ntwk:
    driver: overlay
    attachable: true
    name: traefik-public-ntwk

AND FOR THE SERVICE THAT RUNS THE WEBSERVER


---
version: '3'
services:
  freqtrade:
    image: freqtradeorg/freqtrade:stable
    # image: freqtradeorg/freqtrade:develop
    # Use plotting image
    # image: freqtradeorg/freqtrade:develop_plot
    # Build step - only needed when additional dependencies are needed
    volumes:
      - /W/${USERDATA}:/freqtrade/user_data
    networks:
      - traefik-public-ntwk

    deploy:
      mode: replicated
      replicas: 1
      restart_policy:
        condition: none
      labels:
        - "traefik.enable=true"
        - 'traefik.http.routers.dev.rule=Host("mypublicdomain.com")'
        - "traefik.http.services.dev.loadbalancer.server.port=8080"

    #restart: unless-stopped
    # Expose api on port 8080 (localhost only)
    # Please read the https://www.freqtrade.io/en/stable/rest-api/ documentation
    # before enabling this.
    # Default command used when running `docker compose up`
    command: ${FT_COMMAND}



volumes:
  W-repo:
    driver: local
    driver_opts:
      type: nfs
      o: addr=dellprecision2,rw
      device: :/mnt/nfs_share/${USERDATA}

networks:
  traefik-public-ntwk:
    external: true

Use 3 backticks in front and after the code to format it, or select the code and press the </> button.

Upgrade Traefik to a recent version (v2.10), 2.4 is over a year old.

When using Docker Swarm you should constrain the Traefik service to manager nodes. (Doc)

Enable Traefik debug log and check the Traefik dashboard.

Check your target service container log for errors.

Check your browsers developer tools network tab for the requests. Most applications try to switch to https, but you don’t have https enabled.

Thank you for your reply. I tried all your suggestions and none seem to have helped. The process seems to time out when trying to GET the files from /assets.

I did have success if I forced my web service to run on the exit node in the swarm. I would really like to get to the bottom of this though. here is my setup:

2 machines in my basement, 2 machines in the cloud.

all are connected in a virtual LAN with tailscale.

all are a docker swarm manager node.

I have traefik running on the exposed node in the vultr cloud.

if I run my web service on a swarm node in my basement then we get the partial page loading as described. it is able to get the index.html and start to load assets. but it hangs. I get no error or warning messages in any of the docker service logs, the tailscale logs, or any of the machine logs. I do see log messages related to the GET request for the js ans css files. and the report "OK 200"

if I run the web service on the same vultr ineternet exposed node that traefik is running on then the page loads fast.

do I need an instance of traefik running on every node?

How do you create traefik-public-ntwk? Is it a Docker overlay network? Make sure to set the MTU to a smaller than default value, that fits into the packet size of your VLAN.

OMG Thank you!!! That was it. I found this on tailscale website.

**Tailscale uses a MTU of 1280** . If there are other interfaces which might send a packets larger than this, those packets might get dropped silently. These can be verified by using tcpdump.

Not being educated in networking I wasnt even aware of MTU. I set the overlay network mtu to 600 and it all works fine!

You should set the MTU to the maximum possible to reduce the packet overhead. Not sure if the 1280 is the internal possible or external MTU, but try that value.

Setting MTU in docker-compose.yml.

thank you that has been helpful!

I do have one more question if you have time. this one seems to be a stumper.

I am going to have multiple instances of this web app runing and I want to route to each instance using path prefixes.

this is causing a problem because the index.html isn't setup to send this prefix in the url.

so when I use a path prefix the GET requests dont include it and there is a 404 error on them.

is there a way to tell the client to use the same URL with the path when make a get request?

What apps do you want to use behind PathPrefix?

Be aware that this usually does not work with standard web apps because they are not "path-aware" and mostly send responses with fixed absolute paths (redirect, links to pages, images, scripts), and those won’t match anymore.

It’s best practice to use sub-domains instead.