[Docker] Reverse-proxy in path for a React containerized app

[francislavoie]

@ferreteleco

      - type: bind
        source: ./config/Caddyfile
        target: /etc/caddy/Caddyfile
        read_only: true

FYI, you can simplify this:

     - "./config/Caddyfile:/etc/caddy/Caddyfile:ro"

@ferreteleco

		reverse_proxy http://client:8888 {
			header_up X-Forwarded-Host {host}
			header_up Host {upstream_hostport}

This will set the Host header to client. Are you sure that’s what you want to do? That doesn’t make too much sense. You can probably remove both these header_up lines.

@ferreteleco

header_up X-Real-IP {remote_host}

You can remove this too, Caddy passes through X-Forwarded-For already.

@ferreteleco

The error/problem I’m facing is that backend works nice and well but client only returns empty responses as only fetches “/” (as seen in docker-compose logs) insted of retrieving static files too (like /static/css/main.b612e82a.css). The client is working well (or so I suppose).

Your backend needs to be aware of the subpaths you’re trying to route with. See this article which explains in more detail:

The "subfolder problem", OR, "why can't I reverse proxy my app into a subfolder?"

Have you ever tried to reverse proxy an app into its own little subfolder of your domain name? Makes things neat, doesn’t it? Using example.com/foo/ for one app, example.com/bar/ for another. If you’re coming here from one of the selfhosted communities, you might be thinking along the lines of example.com/sonarr/, example.com/radarr/ etc. Chances are, you’ve tried some configuration along these lines: example.com { redir /sonarr /sonarr/ handle_path /sonarr/* { reverse_proxy localhost…

You can probably only put the backend/API in a subpath, and let the frontend stuff sit at the root (i.e. all other requests). It would look like this:

localhost {
	handle_path /backend* {
		reverse_proxy server:8000
	}

	handle {
		reverse_proxy http://client:8888
	}
}

Using a handle with no matcher will make it act as a fallback, when no other handle block matched.