Accessing apps on path rather than subdomain

[G33kman]

So, I have spent the last week and a half searching everything I can on how Traefik works and how to make something work, and I have officially ended up in the corner rocking back and forth...
To be honest I don't even know where to begin with the issue I'm having.

The host is Squarespace so no wildcard certificates.
I really would like to use the subdomain as the access point so that I don't have to setup multiple A records for each service.

I would like to have the setup be something like:
"server.domain.com/apps/app1"
"server.domain.com/apps/app2"

I have tried both "Path(/app1)" and "PathPrefix" without any success...

I don't want the post to get too long, so I will add any info I can for questions.

If anyone wants to take a stab at finding a solution, I would be forever in your debt...
I'm only a week behind on my deadline so I'm not freaking out by any means!

Thank you in advance!

[Bugs5382]

I think we have the same issue... Proxy, Two Services, Two Different Ports .. i think it's time for a Issue report.

[bluepuma77]

Create a router rule (with backticks):

Host(`example.com`) && PathPrefix(`/app1`)

and an according service. Either manually in a dynamic config file or with Configuration Discovery with labels. Check simple Traefik example.

Caveat: most web apps don’t like to be placed on a path, as they usually respond with absolute paths for redirect, links, scripts and images. It only works when you can set some kind of "base path" in the app. Therefore best practice is using sub-domains.

Next time please share your full Traefik static and dynamic config, and docker-compose.yml if used.

[G33kman]

@Bugs5382 - I remember reading through your post.
I think you and I are definitely struggling with the same issue but I'm pretty sure @bluepuma77 has the answer (unfortunately) with the "Caveat" portion.

So, it looks like I'm going to be going the subdomain route.

Thank you both for the feedback though!

[Bugs5382]

@G33kman - So...

I found this.. Traefik redirect / (root) to sub path with Docker labels · GitHub

I am going to try it out.

[Bugs5382]

Ok. So here is an update.

I created this MIddleware:

apiVersion: traefik.io/v1alpha1
kind: Middleware
metadata:
  name: test-replacepath
  namespace: <my namepsce>
spec:
  replacePath:
    path: /graphql

And updated the routes to this:

  routes:
    - kind: Rule
      match: Host(`host.tld`) && PathPrefix(`/graphql`)
      middlewares:
        - name: test-replacepath
      services:
        - kind: Service
          name: controller
          port: 3000
    - kind: Rule
      match: >-
        Host(`host.tld`)
      priority: 10
      services:
        - kind: Service
          name: frontend
          port: 80

I also had to modify my GraphQL query in my vite application to point https://host.tld:433/graphql (just changed an environment var) in the code instead of 3000. It does not show the 443 of course in inspection. Now the issue I have is that any other router other than / and /graphql I get a 404, and does not his the frontend service.

I am thinking for my usecase I might add headers to the graphql query and use that as the matching so it doesn't have to do anything with PathPrefix which seem to the crusp of the issue.

Unless someone else has an idea to make it so that any path goes to the frontend service, I am all ears.

[bluepuma77]

@Bugs5382

match: >-
        Host(`host.tld`)

This seems strange, simply try

match: Host(`host.tld`)

Sadly I don’t know anything about k8s to go deeper.

[Bugs5382]

That's just it used to be on more than one line.

[Bugs5382]

So the issue was with Treafik, but nginx logs helped me point out the error.

Here is the issue for React and React Router.

/ 
/list
/queue
/print
/assets - these are static folders
/locale - these are static folders
/graphql - with the above changes, but an additional modification. (Read more)

So I did change the GraphQL to a header inside the react app to use 'x-graphql' set as 'true' and did a match on that:

    - kind: Rule
      match: Host(`host.tld`) && Headers(`X-Graphql`, `true`)
      middlewares:
        - name: <middleware posted above>
      services:
        - kind: Service
          name: controller
          port: 3000

This works much better since /graphql is not a 'route' within the react-router and stable.

Now onto the 404 issue which cam from nginx, not traefik. Since assets and locale are static within the nginx system and with vite compile, everything is really in the "index.html" file:

Thus when visiting / everything worked without issue. Once I went to /list for example, ngnix was trying to go to /usr/share/nginx/html/list which did not exist.

So that helped me think... well... time to replace whatever path there is with /:

A new middleware:

apiVersion: traefik.io/v1alpha1
kind: Middleware
metadata:
  name: test-replacepath-2
spec:
  replacePath:
    path: /

Attached to:

    - kind: Rule
      match: Host(`host.tld`) && PathPrefix(`/list`) || PathPrefix(`/queue`) || PathPrefix(`/print`)
      middlewares:
        - name: test-replacepath-2
      services:
        - kind: Service
          name: frontend
          port: 80

My biggest issue is that someone will have to modify this "IngressRoute" every time there is a new path to route in react. I am going to test a few more things, maybe a negative matching on /assets and /locale.

Close. Will post a full solution soon.