Multi Domain Application for NextJS and Caddy Server

[Cardona_Salvador]

Hello everyone

1. The problem I’m having:

I have a multi-application application that I’ve called “multi workspace.”

Technologies used:

• NextJS for server-side rendering (SSR)
• Symfony/Api platform for the API
• Caddy for the HTTP server

My application can create multiple apps within itself. For those familiar with WordPress, it’s called “multi-site,” and for PrestaShop, it’s “multi-boutique.”

I end up with these URLs:

• mon-application…com/workspace/{id-application]
• mon-application…com/workspace/marketplace
• mon-application…com/workspace/blog

And I’d like to have subdomains or external domains that map to:

• blog.mon-application…com = mon-application…com/workspace/blog
• Or an externally purchased URL from another site pointing to my multi workspace, e.g., marketplace.com = mon-application.com/workspace/marketplace

I’m wondering what technology is used to achieve this. Can it be resolved with a Reverse Proxy using Caddy Server or Nginx?

Can I use another technology like Traefik?

I feel like this might involve Reverse Proxy Streaming, but I’m just a simple FullStack developer and have gaps in DevOps.

Does anyone have an idea of how to do this?

2. Error messages and/or full log output:

This is my current configuration. This configuration no run

http://portfolio.workspace.local
{
	 reverse_proxy http://{$PWA_UPSTREAM} {
		header_up Host {http.reverse_proxy.upstream.hostport}
		#header_up X-Forwarded-Host {host}
		header_up X-Real-IP {remote_host}
		#header_up X-Forwarded-For {remote_host}
		header_up X-Forwarded-Port {server_port}
		# header_up X-Forwarded-Proto {scheme}
	}
	handle_path /workspace/portfolio* {
		#uri strip_prefix /workspace/portfolio
		reverse_proxy {$PWA_UPSTREAM}
	}

	handle {
		uri strip_prefix /workspace/portfolio
    	reverse_proxy {$PWA_UPSTREAM}/workspace/portfolio
    }
}

3. Caddy version:

I use CADDY 2.7 version

[francislavoie]

@Cardona_Salvador

		header_up Host {http.reverse_proxy.upstream.hostport}
		#header_up X-Forwarded-Host {host}
		header_up X-Real-IP {remote_host}
		#header_up X-Forwarded-For {remote_host}
		header_up X-Forwarded-Port {server_port}
		# header_up X-Forwarded-Proto {scheme}

Remove all this, it’s not useful. Caddy already sets the appropriate headers by default reverse_proxy (Caddyfile directive) — Caddy Documentation

@Cardona_Salvador

	handle_path /workspace/portfolio* {
		#uri strip_prefix /workspace/portfolio

handle_path does path stripping logic, so you don’t need uri strip_prefix.

@Cardona_Salvador

reverse_proxy {$PWA_UPSTREAM}/workspace/portfolio

The proxy only takes an upstream address, it doesn’t take a request path.

If you need to rewrite the path, then use the rewrite directive.

You can do this to add a path prefix:

rewrite * /workspace/portfolio{uri}

Keep in mind that proxied applications will often misbehave when the path is rewritten, because then the paths in the HTML won’t match what the user sees in their browser. Explained here:

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…

Are you sure WordPress doesn’t allow you to route your multi-site stuff by host matching instead? That’s a simpler approach than trying to do path rewrites.