Subdomain works but domain does not in Traefik router rule

Traefik Traefik v2 (latest)
1

I have a working traefik file config that I used in development.

Using the config below, when I docker-compose up I can access the host which is api.contacts.localhost but when I try to access contacts.localhost which serves a react app it doesn't and it automatically change its schemes to https

  backend:
    build:
      context: "./api"
      target: dev
    container_name: backend
    environment:
      - APP_PORT
      - APP_HOSTNAME
      - DB_USER
      - DB_PASSWORD
      - DB_HOST
    env_file: ".env"
    expose:
      - 4000
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik"
      - "traefik.http.routers.backend.rule=Host(`api.contacts.localhost`)"
      - "traefik.port=80"
    volumes:
      - "./api:/app"
    depends_on:
      - database

  client:
    build:
      context: "./client"
      target: dev
    container_name: client
    ports:
      - "3000:3000"
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik"
      - "traefik.http.routers.client.rule=Host(`contacts.localhost`)"
      - "traefik.port=80"
    depends_on:
      - backend
    volumes:
      - "./client:/app"

If I change the rule for client from contacts.localhost to client.contacts.localhost

client:
    ...
    labels:
      - "traefik.enable=true"
      - "traefik.docker.network=traefik"
      - "traefik.http.routers.client.rule=Host(`client.contacts.localhost`)"
      - "traefik.port=80"

I can now access my react application.

Is there a way to serve my react application without a need for subdomain?

2

Hello @nullstrike,

What does curl -v contacts.localhost give you (when using the original configuration)?

3

Hi @daniel.tomcej

Here's the output from the command you provided.

➜  contacts git:(main) ✗ curl -v contacts.localhost
*   Trying ::1:80...
* Connected to contacts.localhost (::1) port 80 (#0)
> GET / HTTP/1.1
> Host: contacts.localhost
> User-Agent: curl/7.74.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 404 Not Found
< Content-Type: text/plain; charset=utf-8
< X-Content-Type-Options: nosniff
< Date: Tue, 29 Jun 2021 15:02:27 GMT
< Content-Length: 19
<
404 page not found
* Connection #0 to host contacts.localhost left intact
4

Hello @nullstrike,

Can you enable the debug log on Traefik, and see if the contacts.localhost router is properly being created?

Also, can you confirm that the 404 is not being generated by your application container? (aka that no request is coming to your app?)

5

Its weird, after testing it through curl it seems my react app was already working since I have this output.

➜  contacts git:(main) ✗ curl -v contacts.localhost
*   Trying ::1:80...
* Connected to contacts.localhost (::1) port 80 (#0)
> GET / HTTP/1.1
> Host: contacts.localhost
> User-Agent: curl/7.74.0
> Accept: */*
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< Access-Control-Allow-Origin: *
< Cache-Control: no-cache
< Content-Length: 669
< Content-Type: text/html
< Date: Wed, 30 Jun 2021 08:28:44 GMT
< Etag: W/"29d-AHMxgoAUgqO3XXQuc+QE5QVeAEI"
<
<!DOCTYPE html>
<html lang="en">
  <head>
<script type="module" src="/@vite/client"></script>
  <script type="module">
import RefreshRuntime from "/@react-refresh"
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true
</script>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
* Connection #0 to host contacts.localhost left intact

Its corresponding log

traefik_1   | time="2021-06-30T08:29:54Z" level=debug msg="vulcand/oxy/roundrobin/rr: begin ServeHttp on request" Request="{\"Method\":\"GET\",\"URL\":{\"Scheme\":\"\",\"Opaque\":\"\",\"User\":null,\"Host\":\"\",\"Path\":\"/\",\"RawPath\":\"\",\"ForceQuery\":false,\"RawQuery\":\"\",\"Fragment\":\"\",\"RawFragment\":\"\"},\"Proto\":\"HTTP/1.1\",\"ProtoMajor\":1,\"ProtoMinor\":1,\"Header\":{\"Accept\":[\"*/*\"],\"User-Agent\":[\"curl/7.74.0\"],\"X-Forwarded-Host\":[\"contacts.localhost\"],\"X-Forwarded-Port\":[\"80\"],\"X-Forwarded-Proto\":[\"http\"],\"X-Forwarded-Server\":[\"529518b91f3b\"],\"X-Real-Ip\":[\"172.24.0.1\"]},\"ContentLength\":0,\"TransferEncoding\":null,\"Host\":\"contacts.localhost\",\"Form\":null,\"PostForm\":null,\"MultipartForm\":null,\"Trailer\":null,\"RemoteAddr\":\"172.24.0.1:38984\",\"RequestURI\":\"/\",\"TLS\":null}"
traefik_1   | time="2021-06-30T08:29:54Z" level=debug msg="vulcand/oxy/roundrobin/rr: Forwarding this request to URL" ForwardURL="http://172.24.0.4:3000" Request="{\"Method\":\"GET\",\"URL\":{\"Scheme\":\"\",\"Opaque\":\"\",\"User\":null,\"Host\":\"\",\"Path\":\"/\",\"RawPath\":\"\",\"ForceQuery\":false,\"RawQuery\":\"\",\"Fragment\":\"\",\"RawFragment\":\"\"},\"Proto\":\"HTTP/1.1\",\"ProtoMajor\":1,\"ProtoMinor\":1,\"Header\":{\"Accept\":[\"*/*\"],\"User-Agent\":[\"curl/7.74.0\"],\"X-Forwarded-Host\":[\"contacts.localhost\"],\"X-Forwarded-Port\":[\"80\"],\"X-Forwarded-Proto\":[\"http\"],\"X-Forwarded-Server\":[\"529518b91f3b\"],\"X-Real-Ip\":[\"172.24.0.1\"]},\"ContentLength\":0,\"TransferEncoding\":null,\"Host\":\"contacts.localhost\",\"Form\":null,\"PostForm\":null,\"MultipartForm\":null,\"Trailer\":null,\"RemoteAddr\":\"172.24.0.1:38984\",\"RequestURI\":\"/\",\"TLS\":null}"
traefik_1   | time="2021-06-30T08:29:55Z" level=debug msg="vulcand/oxy/roundrobin/rr: completed ServeHttp on request" Request="{\"Method\":\"GET\",\"URL\":{\"Scheme\":\"\",\"Opaque\":\"\",\"User\":null,\"Host\":\"\",\"Path\":\"/\",\"RawPath\":\"\",\"ForceQuery\":false,\"RawQuery\":\"\",\"Fragment\":\"\",\"RawFragment\":\"\"},\"Proto\":\"HTTP/1.1\",\"ProtoMajor\":1,\"ProtoMinor\":1,\"Header\":{\"Accept\":[\"*/*\"],\"User-Agent\":[\"curl/7.74.0\"],\"X-Forwarded-Host\":[\"contacts.localhost\"],\"X-Forwarded-Port\":[\"80\"],\"X-Forwarded-Proto\":[\"http\"],\"X-Forwarded-Server\":[\"529518b91f3b\"],\"X-Real-Ip\":[\"172.24.0.1\"]},\"ContentLength\":0,\"TransferEncoding\":null,\"Host\":\"contacts.localhost\",\"Form\":null,\"PostForm\":null,\"MultipartForm\":null,\"Trailer\":null,\"RemoteAddr\":\"172.24.0.1:38984\",\"RequestURI\":\"/\",\"TLS\":null}"
traefik_1   | 172.24.0.1 - - [30/Jun/2021:08:29:54 +0000] "GET / HTTP/1.1" 200 669 "-" "-" 2 "client@docker" "http://172.24.0.4:3000" 2ms

Although its correctly returns the app, I still can't access the host directly in the browser.