Apache2 Reverse Proxy only showing default page

Question

I'm completely new to Apache. I have a Django backend that serves as an API and a SvelteKit frontend. Django runs on 0.0.0.0:8000 and SvelteKit on 0.0.0.0:3000.

I'm trying to setup Apache so it uses SvelteKit on port 3000 when users access the Website via port 80.

I followed some guide online but by now I worked through way too many, so I can't find it anymore... I'm using Debian and I created a directory called "example" in /var/www/ next to the default "html" directory. I also created a example.conf in /etc/apache2/sites-available/. My config looks like this:

<Proxy *>
    Require all granted
    Options None
</Proxy>

<VirtualHost example.com:80>
    ProxyPreserveHost On
    ProxyPass "/" "http://0.0.0.0:3000"
    ProxyPassReverse "/" "http://0.0.0.0:3000"

    ServerAdmin my@email.example
    ServerName example.com
    ServerAlias www.example.com
    DocumentRoot /var/www/example
</VirtualHost>

<VirtualHost api.example.com:80>
    ProxyPass "/api" "http://0.0.0.0:8000"
    ProxyPassReverse "/api" "http://0.0.0.0:8000"

    ServerName api.example.com
    ServerAlias www.api.example.com
</VirtualHost>

The problem I'm having is that both, the frontend and the API backend, are not showing up in the browser when I type in my domain. www.api.example.com/api doesn't find anything and www.example.com only returns the default Apache page. It works when adding ":3000" at the end of www.example.com but I want it to be on the standard HTTP port.

Another strange occurrence is that when I enter "apache2ctl -S" it returns an IP address as a VirtualHost that leads to a website saying that I've "successfully started the Nginx proxy manager". Not sure if I'm getting things right here but I haven't even installed Nginx on my server as far as I know.

Answer 1

Try:

<Proxy *>
    Require all granted
    Options None
</Proxy>

<VirtualHost *:80>
    ProxyPreserveHost On
    ProxyPass "/" "http://127.0.0.1:3000"
    ProxyPassReverse "/" "http://127.0.0.1:3000"

    ServerAdmin my@email.example
    ServerName example.com
    ServerAlias www.example.com
</VirtualHost>

<VirtualHost *:80>
    ProxyPass "/api" "http://127.0.0.1:8000"
    ProxyPassReverse "/api" "http://127.0.0.1:8000"

    ServerName api.example.com
    ServerAlias www.api.example.com
</VirtualHost>

The VirtualHost tag specifies which network interfaces it listens on. "example.com" is a domain name not a network interface, so configuration for it doesn't belong there. Aparche uses the ServerName and ServerAlias configuration to determine if the virtual host is relevant for any given request.

You should also use 127.0.0.1 rather than 0.0.0.0 to refer to another services running on the same server on a different port. 0.0.0.0 won't route and shouldn't work.

I also removed the DocumentRoot. Since the entire virtual host is reverse proxied, you shouldn't need to map it to a directory on disk.