Apache 2 - 从同一个 Apache 服务器部署 Angular-SPA 和 WSGI (Django) 应用程序

Question

我根据Corey Schafer's youtube playlist about Django 在 Ubuntu Linux 服务器上设置了一个 Apache2 HTTP 服务器，以通过 WSGI 为 django 应用程序（学习 Django 的爱好项目）提供服务。服务器设置为使用 HTTPS 而不是 HTTP。

我想也使用这个 HTTP 服务器来部署一个使用 Angular 10 开发的单页应用程序 (SPA)。我试图让这个配置满足 3 个条件：

1. 服务我的 django 应用程序
2. 为我的 Angular SPA 服务
3. 服务 Angular SPA无需我更改 Angular SPA 的 index.html 文件（例如，通过修改 js-script-tags 中使用的 src-url）

第 3 点大部分都在那里，所以我可以快速轻松地部署更新到我的 SPA，只要有一个更新包就从 git-repo 中拉出。

到目前为止，我在下面配置的内容（并成功地为我的 Django 应用程序提供服务）在 url 命名空间 <DOMAIN>/wiki 中正确地为我的 django-app 服务。 Angular SPA 在 url 命名空间 <DOMAIN>/wiki2 中提供服务。

#Apache2 config file aldrunewiki-le-ssl.conf
<IfModule mod_ssl.c>
<VirtualHost *:443>
    ...
    # Configuration for the Angular SPA
    AliasMatch ^/wiki2/(.*)$ /home/isofruit/AldruneWikiFrontend/dist/frontend/index.html
    <Directory /home/isofruit/AldruneWikiFrontend/dist/frontend>
        Require all granted
        DirectoryIndex index.html
    </Directory>

    # Configuration for the Django Application
    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>

就我获得 index.html 而言，这确实有效，但它尝试加载的 JS 文件失败并出现 404：

这是因为我的 index.html 中 <script>-tags 的 src-URL 具有 <DOMAIN>/filename.js 模式，而我在 aldrunewiki-le-ssl.conf 中没有正确的别名。

#Example of script tags in index.html
...
<script src="runtime.c6a2assa9aec81ed0sc9.js" defer></script>
<script src="polyfills.5c8ss3dfb7c3b4aass01.js" defer></script>

我不知道如何很好地解决这个问题。

如果我不想更改我的 Angular-SPA index.html，我需要在 aldrunewiki-le-ssl.conf 中使用别名，将 <DOMAIN>/filename.js 映射到我的 AldruneWikiFrontEnd 目录（Angular-SPA 所在的位置）。但这不会破坏我的 Django 应用程序的 url 命名空间，因为它看起来像这样：Alias / /home/isofruit/AldruneWikiFrontEnd/dist/frontend？

我放弃第 3 点并设置一个 gitook 来更改我的 Angular-SPA index.html 中的脚本标签会更好吗？

Answer 1

我决定放弃参数 3，而是编写一个 pre-commit git-hook 来根据需要修改我的 index.html。

警告：这只对我有用，因为在我提交任何更改之前，我已经运行 ng build --prod 以获得我当前版本的 dist 文件夹，并且因为我还在我的存储库中提交了我的 dist 文件夹。

如果您没有这种工作流程，我强烈建议您不要使用预提交，而是使用更准确地表示您何时进行构建的不同挂钩。下面是提交的代码，因为为什么不呢。

### pre-commit file

#!/usr/bin/env python3

index_filepath: str = "/home/isofruit/Dev/AldruneWiki/frontend/dist/frontend/index.html"
prefix: str = "wiki2"

def main():
    modify_index_html()

def modify_index_html():
    index_file: str = read_file(index_filepath)

    index_file = index_file.replace('src="', f'src="{prefix}/') #Updates URL of JS script tags 
    index_file = index_file.replace('href="favicon.ico"', f'href="{prefix}/favicon.ico"') #Update URL of icon
    index_file = index_file.replace('href="styles', f'href="{prefix}/styles') #Updates URL of style-spreadsheet

    write_file(index_filepath, index_file)

def read_file(filepath):
    file_content: str
    with open(filepath) as f:
        file_content = f.read()
    return file_content

def write_file(filepath, content):
    with open(filepath, 'w') as f:
        f.write(content)

if __name__ == "__main__":
    main()