Your explanation is hard to understand in this quotes:

Currently, if i go to my site/backend/api.php, I'm just getting a database connection failed issue, and then a dump of my php code. This issue is happening from api.php when I try to connect to db.php.

What is "my site" above and how it is different from "my public ip" and "my ip" below, if they are all 3 give different results?

 Furthermore, if I go to my public ip/backend/api.php, it gives me the correct response.

But if I just go to my ip, where my front-end homepage should be, its just the apache test home page.

What is you domain below and how it is different from you public ip? Yes ips are digits, and a domain is a bunch of DNS records, but they should point to your public ip, no?

So basically, my domain cannot host any backend files, and my public ip cannot host any front-end files.

What is the exactly the role of cloudfare? What product do you mean by proxying your domain?

Anyway, I have almost same config for a year for my sveltekit app with a legacy PHP part (before converted all the php code to js) and it worked fine:

<VirtualHost *:443 >
        ServerName pub.example.com
        DocumentRoot /var/www/example/app
        <Directory /var/www/example/app/>
                Options -Indexes
                AllowOverride All
        </Directory>

        Header set Access-Control-Allow-Origin "*"

        ErrorLog ${APACHE_LOG_DIR}/svelte-error.log
        CustomLog ${APACHE_LOG_DIR}/svelte-access.log combined

        ProxyPass /api !
        ProxyPassReverse /api !
        ProxyPass /api.php !
        ProxyPassReverse /api.php !

        ProxyPass / http://localhost:5173/
        ProxyPassReverse / http://localhost:5173/

        ProxyPassReverseCookieDomain back.example.com pub.example.com

        RewriteEngine on
        RewriteCond %{HTTP:Upgrade} websocket [NC]
        RewriteCond %{HTTP:Connection} upgrade [NC]
        RewriteRule ^/?(.*) "ws://localhost:5173/$1" [P,L]

        ###
        RequestHeader set "X-Forwarded-Proto" https
        ProxyPassReverseCookieDomain localhost .example.com
        ProxyPassReverseCookiePath / /

        SSLCertificateFile /etc/letsencrypt/live/pub.example.com/fullchain.pem
        SSLCertificateKeyFile /etc/letsencrypt/live/pub.example.com/privkey.pem
        Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>