Same path but different reverse_proxy access

Help
#1

I have a caddyfile with 2 reverse_proxy, something like that:

route {
    reverse_proxy @project1 https://project1.com.br {
      header_up Host project1.com.br
    }

    reverse_proxy @project2 https://project2.com.br {
      header_up Host project2.com.br
    }
}

Both have the /_next path where nextJs create its chunks/static files.

I need to be able to access the right /_next based on wich route I entered on browser. For example:

@project1 {
 path /project1
 path /_next/*
}

@project2 {
 path /project2
 path /_next/*
}

So, as you can see above, I have the ‘same’ path for the two proxies. I wanna know if it’s possible to say to browser, wich /_next access based on wich url I entered. So if I entered project.com.br/project1, I would like to have access to project1.com.br/_next.

Is that even possible?

#2

When you repeat the path matcher in a named matcher, it’s the same as just doing path /project2 /_next/* which is an OR operation, either one or the other.

Are you saying the request paths look like /project1/_next/*? If so, then match with /project1* instead and it should work.

So really, I’m not clear on what you want to happen exactly. Please clarify (list out) exactly what requests you want to proxy to what destination.

Also, please fill out the help topic template. It saves time up front by asking many of the “checklist” questions that need to answered so that we’re on the same page.

#3

I’m sorry about not filling help template, it is because I don’t have those informations. The only thing I know is the version that is v2.1.

Basically I’m trying to run two nextJs application into 1 domain. So for every nextJs app, we have the routes and the /_next/* path where the chunks are located. My problem is: both projects have /_next/* path so, when I access a url that leads to project1 the requests made to render the page must come from project1 /_next/* and should work the same way for project2.

For example, following the informations that I said in my first message:

  • my domain is: https://project.com.br for example
  • I’m doing a reverse proxy of project1 and project2 to show those projects on https://project.com.br
  • Both projects, 1 and 2, are made using nextJs
  • NextJs uses /_next folder to store it’s chunks
  • So, in project1 I have one /_next folder and in project2 I have another /_next folder
  • When I access https://project.com.br/project1 for example, what I need is that the /_next folder comes from project1 and if I access https://project.com.br/project2 I need that it comes from project2
  • I do not access https://project.com.br/project1/_next/*, what happens is: I access https://project.com.br/project1 and the browser get throught network those chunks from /_next in order to load the page and the browser get those chunks from https://project.com.br/_next. I wanna know if i can do something to say to the browser: 'hey you are in /project1 so you need to get the /_next from project1’

I’m sorry man I’m really newbie in that kind of configs, I don’t really know how to explain properly

#4

v2.1 is an old version. Please upgrade to v2.4.1

This’ll be something you need to configure in your JS app’s config. There should be a “base path” configuration that you can use to tell it to load assets from /project1/_next/ instead of simply /_next/.

I think this is what you’re looking for:

#5

Yeah, I’m trying using basePath for a while, but I don’t know how to set up on caddy, I mean, I would have /project1/_next/ but how would I do to have project.com.br/project1 instead of project.com.br/project1/project1? Let’s suppose that I set up a basePath and I want to access /somepath, the url with basePath would be something like project1.com.br/project1/somepath and I want to access using project.com.br/somepath. I don’t know if I need to change the reverse_proxy or whatever.

Im my case if I set up a basePath, I would have something like that:

  • project1.com.br/project1/project1 where the first project1 is the basePath and the second one is the path.

  • project2.com.br/project2/project2 where the first project2 is the basePath and the second one is the path.

I need that to become project.com.br/project1 and project.com.br/project2 where project1 and project2 are the paths for the pages

Those paths that I used, /project1 and /project2 could be anything

#7

That’s not what I understood from your earlier questions.

In that case, all you need to do is:

rewrite * /project1{uri}

And Caddy will rewrite the path to add a prefix to it, which then your later request handlers will use.

But I don’t think that’s actually what you want, because then there would be no way to distinguish between requests destined for one project or the other.

So what you have to do is configure a base path, and not rewrite. The above rewrite adds a path prefix. Just don’t do that, and there won’t be a second path prefix. That’s it.

#8

If I add a basePath, I don’t have to change nothing on my reverse_proxy neither on matchers paths?

#9

Yes. Your config would look like this:

reverse_proxy /project1* https://project1.com.br {
	header_up Host {http.reverse_proxy.upstream.hostport}
}

reverse_proxy /project2* https://project2.com.br {
	header_up Host {http.reverse_proxy.upstream.hostport}
}
#10

So that part I won’t need at all?

@project1 {
 path /project1
 path /_next/*
}

@project2 {
 path /project2
 path /_next/*
}

Thank you man for being patient, I’m just a frontend trying to config caddy.

#11

No. Caddy doesn’t need to care about /_next/* if you configured basepath, because that will guarantee that all the paths for your nextjs app use that basepath/prefix.

And FYI, /project1 would only match exactly /project1 and nothing else. Path matching is exact in Caddy, so you need to add the * to also match everything below that.

#12

So if I want to access only a path I would do like that?

reverse_proxy /project1/somepath https://project1.com.br {
	header_up Host {http.reverse_proxy.upstream.hostport}
}

and when I access https://project.com.br/somepath it would work?

#13

No. A request matcher looks at the incoming request and returns true or false on whether it should handle the request based on the configured rules. Request matchers don’t modify the request at all. It’s just a decision function.

If you made your request matcher /project1/somepath and requested /somepath, then the matcher would not match that path.

If you use the path matcher /project1* and make a request like /project1/somepath, then that would match, and Caddy would proxy that to https://project1.com.br/project1/somepath.

#14

Ok, so there is a way to do like this:

#15

No, because that would make /_next/* ambiguous. You must disambiguate that somehow. And to do that, you need to configure nextjs in such a way that it’s disambiguated.

#16

I see, so it’s not possible to distinguish the correct /_next depending only on the path some_path_from_project_1 for example. That was my initial question actually.

I saw a solution using NGINX, can I do something like that using Caddy?

#17

This is closer to what you need: How to change default _next in request path into something custom · Issue #5602 · vercel/next.js · GitHub

#18

Has an issue that comes by doing that way, but I think that will be it for now!

Thanks a lot @francislavoie!