Caddyfile - How can we do reverse proxy on a single port for multiple server?

[philippos86]

1. Caddy version (caddy version):

v2.4.6

2. How I run Caddy:

a. System environment:

macOS 12.1 Montery

b. Command:

caddy run
caddy adapt
caddy reload

c. Service/unit/compose file:

d. My complete Caddyfile or JSON config:

:2020 {
        reverse_proxy /frontend localhost:8092
        reverse_proxy /backend localhost:8093
}

3. The problem I’m having:

I have a system that has 2 servers, backend and frontend.
The frontend is a React app.
I want to use reverse proxies in caddy to direct requests coming from outside to my servers.
If I want to run only one server, let’s say the frontend, I use a Caddyfile as the following, and it works properly

:2020 {
        reverse_proxy localhost:8092
}

4. Error messages and/or full log output:

However, when I use the following Caddyfile
↓↓↓

5. What I already tried:

:2020 {
        reverse_proxy /frontend localhost:8092
        reverse_proxy /backend localhost:8093
}

and try to reach the frontend site, I could see the title on browser’s tab, however, the frontend itself won’t be loading.

6. Links to relevant resources:

I have took a look at the following question on StackOverflow Caddyfile Subdomain with Multiple Proxies and tried to follow similar solution, however, that didn’t work.

So my question is how to implement such a configuration.

Edit

I just noticed the following: The resources of my UI are loaded as expected using the first Caddyfile, however, they are missing in the second one!

Here I would add a second question to my previous one: Why some sources are missed using the second configuration?

reactjsreverse-proxy

[francislavoie]

In Caddy, path matchers are exact. That means that /frontend will only match requests to exactly /frontend, but not /frontend/foo. You need to add a * to tell Caddy to match more, i.e. /frontend*.

Request matchers (Caddyfile) - Caddy Documentation

[philippos86]

Thank you @francislavoie for your reply and explanation.
I would like to mention 2 points here:

1. In my case, I have nothing after frontend. However, I just tried your solution with /frontend* and that didn’t solve the problem.
2. I just edited my question (just before I noticed your reply), and mentioned that I noticed that some source files are not loaded when I use the second caddy file.

Is that because of the same reason you mentioned?

[francislavoie]

What URL is used to load those resources? Check the network tab in your browser.

If your app isn’t configured to make requests under the /frontend path, then Caddy won’t handle those requests and write an empty response (because it did as it was told to, to only handle requests to /frontend* and nothing else).

[philippos86]

This is what network tab shows, using both versions of Caddyfile:

and to be honest, I am not sure what exactly is making the difference in these cases

[francislavoie]

Yep, it’s clear that the JS assets are being requested at the root of your site, not inside of /frontend.

Make sure to configure your upstream app to add /frontend as a prefix to the HTML it emits.

The requests should look like /frontend/react.min.js, not /react.min.js.

[philippos86]

Here is the file structure of my project.
As you can see, the assets are requested from the index.html which is in the public folder inside frontend
Also, I am not sure about this point

@francislavoie

Make sure to configure your upstream app to add /frontend as a prefix to the HTML it emits.

Since all the HTML here are fixed I guess …

[francislavoie]

Okay, those files are from CDN, so that’s fine. That’s not affected by this.

But if you do have any files that are loaded in the HTML as URLs like /example.css, they will be loaded from the root of your site instead of from /frontend/example.css for example.

But I’m not really clear on what’s not working. What server are you running upstream? Check if there’s any configuration for it where you need to set a “base path” or whatever.