如何通过Apache正确配置SvelteKit前端与PHP后端协同部署？

核心症状 #

• 访问 domain/backend/api.php 时，页面显示数据库连接失败提示且直接输出PHP代码（文件被识别为文本），代码片段：

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

• 公网IP访问 /backend/api.php 能得到正确响应，但访问公网IP根路径仅显示Apache测试页
• 域名无法正常托管后端文件，公网IP无法托管前端文件

已排查/调整项 #

• 数据库可正常访问：已创建对应用户，凭证配置正确，服务器IP和域名测试3306端口均连通
• 关闭Cloudflare代理，无改善
• 调整防火墙及Oracle安全组，允许SQL连接
• Svelte配置从 adapter-static 改为 adapter-node
• 尝试创建两个backend目录（其中一个含+server.ts），试图让Apache单独识别/backend路径，效果不佳

文件结构 #

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)

Apache VirtualHost配置 #

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

    # 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.com
    ServerAlias www.mydomain.com

    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>

部署脚本 #

#!/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

1. 修复Apache配置的路径优先级与Alias问题 #

当前配置中Alias /backend/的末尾斜杠会导致匹配问题，且PHP文件实际位于backend/database子目录，需调整规则确保Apache优先处理后端路径：

# 先排除/backend路径不被代理
ProxyPass /backend !
# 指向实际PHP文件所在目录
Alias /backend /var/www/html/backend/database
<Directory "/var/www/html/backend/database">
    Options -Indexes +FollowSymLinks
    AllowOverride All
    Require all granted
    # 强制PHP模块处理该目录下的所有PHP文件
    SetHandler application/x-httpd-php
</Directory>
# 最后代理所有其他请求到SvelteKit
ProxyPass / http://127.0.0.1:5173/
ProxyPassReverse / http://127.0.0.1:5173/

2. 确认PHP模块已正确启用 #

执行命令检查Apache是否加载PHP模块：

httpd -M | grep php

若无输出，以CentOS为例安装并启用：

sudo dnf install php php-mysqlnd
sudo systemctl restart httpd

3. 替换SvelteKit部署方式（弃用npm run preview） #

npm run preview仅用于开发预览，生产环境使用adapter-node构建后的Node服务：

• 修改部署脚本：

#!/bin/bash
cd /var/www/html
sudo pm2 stop all
sudo pm2 delete all
sudo npm run build
# 启动构建后的生产服务
sudo pm2 start node --name "sveltekit-app" -- build/index.js --port 5173
sudo pm2 save

• 确保svelte.config.js中adapter-node配置正确：

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter({
            out: 'build'
        })
    }
};

4. 清理冲突的SvelteKit路由目录 #

src/routes/backend会被SvelteKit接管，导致Apache规则失效，直接删除：

rm -rf /var/www/html/src/routes/backend

5. 验证服务 #

重启Apache和PM2后测试：

sudo systemctl restart httpd
sudo pm2 restart all

• 访问domain/backend/api.php，确认PHP代码被解析、数据库连接正常
• 访问domain/，确认SvelteKit前端正常加载

内容的提问来源于stack exchange，提问作者Dylan Todd