How do I properly connect my sveltekit front end and PHP backend with Apache? - Stack Overflow

admin管理员组

文章数量:1400762

I managed to create a front-end using svelte, and I have a backend which includes an api.php file, a db.php file (accesses the database) and my create.sql. that's it.

I cannot for the life of me get apache to serve both of these things simultaneously.

Currently, if i go to my domain/backend/api.php, I'm just getting a database connection failed issue, and then a dump of my php code. this file is being interpreted as html/text

Database connection failed2', 'details' => $e->getMessage() ]); exit; } // Determine the path $request_uri = $_SERVER['REQUEST_URI']; $script_name = $_SERVER['SCRIPT_NAME']; // Remove query string $request_uri = strtok($request_uri, '?'); // Remove the script name from the URI $path_info = substr($request_uri, strlen($script_name)); // etc etc it goes for a while

Before you say anything, yes my db is accessible. I created the right user, my credentials are in order, I've tested accessing it (3306) from my sites ip and domain and it does work. 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.

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

Yes I'm using cloud flare, it was proxying my domain name, I have since turned it off and no change has occurred.

I've tweaked with my vhost configuration 1000 times with no success, I have no idea if this is the culprit or not.

I've allowed sql connections both in my firewall and in my oracle security lists, and like I said everything works perfectly fine when I use my public ip, so it must be the difference in how I'm serving files or something? I really don't know. I've been trying to fix this for 3 days

furthermore originally in my svelte config file i was using adapter static but I have since changed to the node one.

My relevant file structure is below:

HTML [SSH: my public ip]
├── svelte-kit
├── backend
│   └── database
│       ├── create.sql
│       ├── api.php (M)
│       └── db.php
├── src
│   ├── lib
│   └── routes
│       ├── backend
│       ├  └─ api.php
│       ├    └──  +server.ts (U)
│       ├── about
│       ├── login
│          ├── +page.svelte (U)
│       ├── navigation
│       ├── projects
│       ├── +layout.js
│       ├── +layout.svelte
│       └── +page.svelte (M)
│   ├── app.css
│   ├── app.html
├── svelte.config.js (M)
└── vite.config.ts (M)

Im aware I have two backend directories, one contains a server.ts which is supposed to create some sort of alias or something for /backend to help apache recognize it and serve it separately? I don't really know the specifics im just trying everything that's recommended to me.

Below is my vhost configuration:

<VirtualHost *:80>
    ServerName mydomain
    ServerAlias www.mydomain

    # Redirect all HTTP traffic to HTTPS
    RewriteEngine On
    RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [R=301,L]

    ErrorLog /var/log/httpd/http_error_log
    CustomLog /var/log/httpd/http_access_log combined
</VirtualHost>

<VirtualHost *:443>
    ServerName mydomain
    ServerAlias www.mydomain

    SSLEngine on
    SSLCertificateFile /etc/httpd/ssl/server.crt
    SSLCertificateKeyFile /etc/httpd/ssl/server.key

    SSLProtocol -all +TLSv1.2 +TLSv1.3
    SSLCipherSuite "IDK IF THIS IS SENSITIVE INFORMATION"
    SSLHonorCipherOrder off

    DocumentRoot /var/www/html

    <Directory "/var/www/html">
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # Lock down /backend before the catch-all
    <Location /backend>
        ProxyPass !
    </Location>

    # Alias /backend/ to the actual backend folder so Apache can serve PHP files
    Alias /backend/ /var/www/html/backend/
    <Directory "/var/www/html/backend">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        <FilesMatch "\.php$">
            SetHandler application/x-httpd-php
        </FilesMatch>
    </Directory>

    # Proxy remaining requests (i.e., the frontend) to the SvelteKit server
    ProxyPreserveHost On
    ProxyRequests Off
    ProxyPass / http://127.0.0.1:5173/
    ProxyPassReverse / http://127.0.0.1:5173/

    # WebSocket configuration for SvelteKit (if needed)
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule ^/?(.*) "ws://127.0.0.1:5173/$1" [P,L]

    ErrorLog /var/log/httpd/ssl_error_log
    CustomLog /var/log/httpd/ssl_access_log combined
</VirtualHost>

Someone said the issue was cause svelte is trying to take care of the files instead of apache which makes it break cause svelte can't handle php, so I tried making it so svelte apache handles the php, but it's not working.

Below is the way I deploy my script:

[opc@portfolio-web-server html]$ sudo cat ../../../deploy.sh
#!/bin/bash
cd /var/www/html
sudo pm2 stop all
sudo pm2 delete all
sudo npm run build
sudo pm2 start npm -- run preview -- --host 0.0.0.0 --port 5173
sudo pm2 save
[opc@portfolio-web-server html]$ 

It may also be cause I'm deploying with npm run preview? But I was told this is fine for super small projects and stuff.

Please help me fix this.

I managed to create a front-end using svelte, and I have a backend which includes an api.php file, a db.php file (accesses the database) and my create.sql. that's it.

I cannot for the life of me get apache to serve both of these things simultaneously.

Currently, if i go to my domain/backend/api.php, I'm just getting a database connection failed issue, and then a dump of my php code. this file is being interpreted as html/text

Database connection failed2', 'details' => $e->getMessage() ]); exit; } // Determine the path $request_uri = $_SERVER['REQUEST_URI']; $script_name = $_SERVER['SCRIPT_NAME']; // Remove query string $request_uri = strtok($request_uri, '?'); // Remove the script name from the URI $path_info = substr($request_uri, strlen($script_name)); // etc etc it goes for a while

Before you say anything, yes my db is accessible. I created the right user, my credentials are in order, I've tested accessing it (3306) from my sites ip and domain and it does work. 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.

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

Yes I'm using cloud flare, it was proxying my domain name, I have since turned it off and no change has occurred.

I've tweaked with my vhost configuration 1000 times with no success, I have no idea if this is the culprit or not.

I've allowed sql connections both in my firewall and in my oracle security lists, and like I said everything works perfectly fine when I use my public ip, so it must be the difference in how I'm serving files or something? I really don't know. I've been trying to fix this for 3 days

furthermore originally in my svelte config file i was using adapter static but I have since changed to the node one.

My relevant file structure is below:

HTML [SSH: my public ip]
├── svelte-kit
├── backend
│   └── database
│       ├── create.sql
│       ├── api.php (M)
│       └── db.php
├── src
│   ├── lib
│   └── routes
│       ├── backend
│       ├  └─ api.php
│       ├    └──  +server.ts (U)
│       ├── about
│       ├── login
│          ├── +page.svelte (U)
│       ├── navigation
│       ├── projects
│       ├── +layout.js
│       ├── +layout.svelte
│       └── +page.svelte (M)
│   ├── app.css
│   ├── app.html
├── svelte.config.js (M)
└── vite.config.ts (M)

Im aware I have two backend directories, one contains a server.ts which is supposed to create some sort of alias or something for /backend to help apache recognize it and serve it separately? I don't really know the specifics im just trying everything that's recommended to me.

Below is my vhost configuration:

<VirtualHost *:80>
    ServerName mydomain
    ServerAlias www.mydomain

    # Redirect all HTTP traffic to HTTPS
    RewriteEngine On
    RewriteRule ^(.*)$ https://%{HTTP_HOST}$1 [R=301,L]

    ErrorLog /var/log/httpd/http_error_log
    CustomLog /var/log/httpd/http_access_log combined
</VirtualHost>

<VirtualHost *:443>
    ServerName mydomain
    ServerAlias www.mydomain

    SSLEngine on
    SSLCertificateFile /etc/httpd/ssl/server.crt
    SSLCertificateKeyFile /etc/httpd/ssl/server.key

    SSLProtocol -all +TLSv1.2 +TLSv1.3
    SSLCipherSuite "IDK IF THIS IS SENSITIVE INFORMATION"
    SSLHonorCipherOrder off

    DocumentRoot /var/www/html

    <Directory "/var/www/html">
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>

    # Lock down /backend before the catch-all
    <Location /backend>
        ProxyPass !
    </Location>

    # Alias /backend/ to the actual backend folder so Apache can serve PHP files
    Alias /backend/ /var/www/html/backend/
    <Directory "/var/www/html/backend">
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
        <FilesMatch "\.php$">
            SetHandler application/x-httpd-php
        </FilesMatch>
    </Directory>

    # Proxy remaining requests (i.e., the frontend) to the SvelteKit server
    ProxyPreserveHost On
    ProxyRequests Off
    ProxyPass / http://127.0.0.1:5173/
    ProxyPassReverse / http://127.0.0.1:5173/

    # WebSocket configuration for SvelteKit (if needed)
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} websocket [NC]
    RewriteCond %{HTTP:Connection} upgrade [NC]
    RewriteRule ^/?(.*) "ws://127.0.0.1:5173/$1" [P,L]

    ErrorLog /var/log/httpd/ssl_error_log
    CustomLog /var/log/httpd/ssl_access_log combined
</VirtualHost>

Someone said the issue was cause svelte is trying to take care of the files instead of apache which makes it break cause svelte can't handle php, so I tried making it so svelte apache handles the php, but it's not working.

Below is the way I deploy my script:

[opc@portfolio-web-server html]$ sudo cat ../../../deploy.sh
#!/bin/bash
cd /var/www/html
sudo pm2 stop all
sudo pm2 delete all
sudo npm run build
sudo pm2 start npm -- run preview -- --host 0.0.0.0 --port 5173
sudo pm2 save
[opc@portfolio-web-server html]$ 

It may also be cause I'm deploying with npm run preview? But I was told this is fine for super small projects and stuff.

Please help me fix this.

• php
• apache
• frontend
• backend
• sveltekit

Share Improve this question Follow edited Mar 24 at 14:18 Dylan Todd asked Mar 24 at 13:39 Dylan ToddDylan Todd 111 silver badge44 bronze badges 5

• 1 "I'm just getting a database connection failed issue, and then a dump of my php code." - sounds to me as if this wasn't interpreted as PHP at all. The fact that you are getting Database connection failed2', 'details' => $e->getMessage() ]); exit; } // Determine ... shown, probably means that the code was returned as-is, and then got interpreted as HTML by your browser. – C3roe Commented Mar 24 at 13:50
• @C3roe this may be the case honestly. the one thing that makes me say otherwise is the 'Database Connection Failed2' is an error message is put in my api.php that happens when it doesn't find db.php, and that's the first thing that pops up in the dump despite it not being the first thing in the file so honestly I don't think so but maybe. – Dylan Todd Commented Mar 24 at 13:54
• Full PHP scripts interpreted as HTML often give such "illogical" results, because the browser basically thinks everything between <?php ... ?> was a tag (or rather processing instruction), and only displays what is outside of those as text content then. But if you directly check the response in the network panel of your browser dev tools, you should quickly see if that appears to be the full script or not. – C3roe Commented Mar 24 at 14:04
• you're absolutely right it's being interpreted as html/text. I see that now. – Dylan Todd Commented Mar 24 at 14:11
• Since you can correctly access it via public ip/backend/api.php, I would say that suggests your Alias and Directory directive are doing their job correctly, when it comes to configuring the PHP integration on the Apache side. Looks to me, like your proxy setup was passing this request on to svelte though, when you access it via the frontend domain. – C3roe Commented Mar 24 at 14:24

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I think you might want to take a look at this post. Seems to cover what you are trying to accomplish.

Apache and Node.js on the Same Server

本文标签： How do I properly connect my sveltekit front end and PHP backend with ApacheStack Overflow