如何让 Django 在 Ubuntu 18.04 上使用 Apache2 服务 React？答案

【问题标题】：How can I have Django serve React using Apache2 on Ubuntu 18.04?如何让 Django 在 Ubuntu 18.04 上使用 Apache2 服务 React？
【发布时间】：2020-10-05 19:47:45
【问题描述】：

我正在尝试在 Ubuntu 18.04 上使用 Apache2 部署一个带有 React 前端的 Django 应用程序。 React 应用程序由 Django 通过staticfiles 应用程序提供服务。对于上下文，让我们从 Django 如何为 React 提供服务开始。

以下代码来自nerd-rich-django-back-end/nerdrich/urls.py。

from homepage.views import index
url_patterns = [
    path('', index, name=index),
]

接下来是nerd-rich-django-back-end/homepage/views.py

from django.views.generic import TemplateView
from django.views.decorators.cache import never_cache
index = never_cache(TemplateView.as_view(template_name='build/index.html'))

有了这个配置，当用户点击根端点时，Django 将为 React 应用程序提供服务。这在开发中有效，但是当我尝试在生产中复制它时遇到了一些问题。即... 这是我在 Apache2 中使用的网站 - /etc/apache2/sites-available/000-default-le-ssl.conf

<Directory /home/jakuta/.venv/bin/djangoprojects/nerd-rich-django-back-end/nerdrich>
    <Files wsgi.py>
        Require all granted
    </Files>
</Directory>
<Directory /home/jakuta/.venv/bin/djangoprojects/nerd-rich-django-back-end/nerd-rich-front-end/build>
    Require all granted
</Directory>

DocumentRoot 指令已删除，Django 应用程序工作正常因为还有其他端点需要测试，例如使用 DRF 的 API 端点。但是当向https://nerdrich.net/ 发出请求时，只有一个空白页。如果您导航到https://nerdrich.net/jakuta，您将获得可浏览的 API。

有关其他上下文，这里是 Django 中的一些设置 nerd-rich-django-back-end/nerdrich/settings.py

CORS_ORIGIN_WHITELIST = [
    'http://localhost:3000'
    'http://localhost:5000'
] # used in development -- not sure how to use in production since Django now serves React

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'nerd-rich-front-end')],
        'APP_DIRS': True,
        'OPTIONS': # the default Options are set here
    }
]
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'nerd-rich-front-end', 'build', 'static'),
)

再次，向原生 Django 端点发出的请求可以正常工作，但是当请求来自 React 构建版本的 html 页面时，该页面是空白的。如果我遗漏了任何其他信息，请告诉我。

【问题讨论】：

标签： reactjs django apache ubuntu-18.04

【解决方案1】：

这是我在 Apache 配置中遗漏的内容，即，由于我已经通过 LetsEncrypt 配置了 SSL，因此我需要添加到 /etc/apache2/sites-available/000-default-le-ssl.conf

Alias /static /home/jakuta/.venv/bin/djangoprojects/nerd-rich-django-back-end/nerd-rich-front-end/build/static
<Directory /home/jakuta/.venv/bin/djangoprojects/nerd-rich-django-back-end/nerd-rich-front-end/build/static>
    Require all granted
</Directory>

Apache 必须配置为在 build/static 文件夹中提供 React 的静态文件。否则，React 将无法工作。

【讨论】：