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

1. Caddy version (caddy version):


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.


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!

enter image description here

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


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*.

1 Like

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?

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).

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 :confused:

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.

1 Like

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

Since all the HTML here are fixed I guess …

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.

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.