Apache2同服务器部署Angular SPA与Django(WSGI)应用的配置问题

我来帮你搞定这个问题——不用修改Angular的index.html，也不会破坏Django的路由空间，同时满足两个应用正常运行。

核心问题分析 #

你当前的配置只处理了/wiki2路径的index.html请求，但Angular打包后的静态资源（JS/CSS等）被浏览器以根路径（比如/main.js）请求，而Apache不知道这些文件属于SPA，所以返回404。我们需要让Apache识别这些根路径的静态资源属于SPA，同时不干扰Django的路径。

修改后的完整Apache配置 #

替换你当前的aldrunewiki-le-ssl.conf内容为以下配置：

<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerName aldrune.com
    ServerAlias www.aldrune.com

    # 处理根路径下的Angular静态资源重写
    RewriteEngine On
    # 排除Django核心路径，避免干扰
    RewriteCond %{REQUEST_URI} !^/wiki
    RewriteCond %{REQUEST_URI} !^/static
    RewriteCond %{REQUEST_URI} !^/media
    # 检查请求的文件是否存在于Angular的dist目录中
    RewriteCond /home/isofruit/AldruneWikiFrontend/dist/frontend%{REQUEST_URI} -f
    # 将根路径的静态资源请求内部转发到/wiki2路径下
    RewriteRule ^(.*)$ /wiki2$1 [L]

    # Angular SPA 配置
    Alias /wiki2 /home/isofruit/AldruneWikiFrontend/dist/frontend
    <Directory /home/isofruit/AldruneWikiFrontend/dist/frontend>
        Require all granted
        DirectoryIndex index.html
        # 处理Angular客户端路由：非文件/目录的请求都转到index.html
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ /wiki2/index.html [L]
    </Directory>

    # Django 应用配置（保持原内容不变）
    Alias /static /home/isofruit/AldruneWiki/static
    <Directory /home/isofruit/AldruneWiki/static>
        Require all granted
        RewriteEngine on
        RewriteCond %{HTTP_REFERER} !^https://aldrune.com/.*$ [NC]
        RewriteCond %{HTTP_REFERER} !^https://www.aldrune.com/.*$ [NC]
        RewriteRule .(mp3|jpg|png)$ - [F]
    </Directory>

    Alias /media /home/isofruit/AldruneWiki/media
    <Directory /home/isofruit/AldruneWiki/media>
        Require all granted
        RewriteEngine on
        RewriteCond %{HTTP_REFERER} !^https://aldrune.com/.*$ [NC]
        RewriteCond %{HTTP_REFERER} !^https://www.aldrune.com/.*$ [NC]
        RewriteRule .(mp3|jpg|png)$ - [F]
    </Directory>

    <Directory /home/isofruit/AldruneWiki/aldrunewiki>
        <Files wsgi.py>
            Require all granted
        </Files>
    </Directory>

    WSGIScriptAlias /wiki /home/isofruit/AldruneWiki/aldrunewiki/wsgi.py
    WSGIDaemonProcess aldrunewiki_app python-path=/home/isofruit/AldruneWiki python-home=/home/isofruit/AldruneWiki/venv
    WSGIProcessGroup aldrunewiki_app

    SSLCertificateFile <REMOVED>
    SSLCertificateKeyFile <REMOVED>
    Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
</IfModule>

配置说明 #

1. 根路径静态资源重写：

   • 先用RewriteCond排除Django的/wiki、/static、/media路径，确保这些请求不会被转发到SPA。
   • 检查请求的文件是否存在于Angular的dist目录中，如果存在，就把根路径请求（比如/main.js）内部转发到/wiki2/main.js，而这个路径已经通过Alias映射到SPA的dist文件。

2. SPA路由处理：

   • 用Alias把/wiki2指向SPA的dist目录，确保静态资源能被正常访问。
   • 在SPA的Directory块中添加Rewrite规则，将所有非文件、非目录的请求（比如/wiki2/about）转发到/wiki2/index.html，保证Angular的客户端路由正常工作。

3. Django配置保留：

   • 原有的Django配置完全不变，所以/wiki路径的应用、/static和/media资源都能正常访问，不会受到任何影响。

后续操作 #

1. 确保mod_rewrite模块已启用：

   sudo a2enmod rewrite
   

2. 修复SPA目录的权限，让Apache能读取：

   sudo chown -R www-data:www-data /home/isofruit/AldruneWikiFrontend/dist/frontend
   

3. 重启Apache服务：

   sudo systemctl restart apache2
   

这样配置后，你既不用修改Angular的index.html，拉取Git更新后直接覆盖dist目录即可部署，同时Django应用也能正常运行，完全满足你的三个条件。

内容的提问来源于stack exchange，提问作者Philipp Doerner