So, I decided to go to v3-RC01 since v3 will now follow Golang regex vs. Perl and also allow "not matches" to happen. (See: Traefik V3 Migration Documentation - Traefik)
From a Kube YAML:
spec:
entryPoints:
- websecure
routes:
- kind: Rule
priority: 5
match: Host(`{{ .Values.frontend.fqdn }}`) && (PathPrefix(`/{path:(^/(assets|locale)(/.*)?$)}`) || PathPrefix(`/`)). # This should match anything strict "/," "/assets/*," and "/locale/*."
services:
- kind: Service
name: frontend
port: {{ .Values.service.port }}
- kind: Rule
match: Host(`{{ .Values.frontend.fqdn }}`) && !PathPrefix(`/{path:(^/(assets|locale)(/.*)?$)}`) # This should match anything other strict "/," "/assets/*," and "/locale/*."
priority: 10
middlewares:
- name: middleware-frontend-replacement-path
services:
- kind: Service
name: frontend
port: {{ .Values.service.port }}
As everyone knows, react-router normally requires everything to hit the / endpoint to solve internal paths, and the static content still needs to be served. I can usually get one working, but not the other. I would rather use this than create and update my rules for every possible "path" that I need to send back to the "/."
Let me know if you need anything else. This is on IngreessRoute.
No, not everyone knows
Can you supply a simple mapping with examples what should be matched and what not?
Sure. This is not private cause I am 100% sure people use these as their endpoints as well:
Static:
/
/assets
/locale/en/
/locale/en_US/
Dynamic React Router:
/list
/print/:id
/print/list
/queue
So when I should visit any of the dynamic, the middleware should bring it back to / so that react router works and takes off and does the processing. Right now, in my current state I am getting this:
index-fH2BXevF.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
as it does not match the rule not to use the middleware. I tried changing the priority of the rule, with no luck. This is even when visiting the "/" of the site.
So my understanding is that /list
and /print/:id
(plus 2 more) would be passed through to an active service, whereas all others go to static. Why not just create a rule with PathPrefix()
for the dynamic ones, they would be matched first, longer rule -> higher priority. Others goes to static.
What do you mean by reset to /
? I would assume your API is not only responding on plain /
.
Ok.
Lets start fresh again.. I have only one service: frontend, which is running Nginx of the complied frontend with Vite. This is not any API or anything of that nature. I have the API working on a different endpoint /graphql with some fancy headers on a different ingress route that works still.
This regex... matches the static routes.
Treafik, picks it up as valid Regex. You can see that I put ! for the one to be negated.
Following me so far....
So when I visit https:/// it should be hitting the top rule, correctly. React Router or the compiled code accepts it as the root. However, when the client tries to access the /assets and the /locale path, it seems not to find it at all. I know /list, etc, and the others are working fine because in the ngnix logs..
It's showing the redirect back to /; however, because the client can get data from /assets/, the Javascript/React does not load.
Loading the JS file directly:
https://URL/assets/index-fH2BXevF.js
Fails to load the js file.
Be aware that a PathPefix(`/`)
will match any request, as a path in http has nothing to do with a file path or folder name, but is the full path after the domain, including a potential "file name" and "extension".
For example /script1234.js
is a http path.
Well, I want that matched if the middleware rule hits. While golang regex does not have a "not" putting a ! in front of PAthPrefix should make it negate. i.e. false and true, etc. So I think this might not be working as designed for 3.0.0RC1