我如何让Django在Ubuntu 18.04上使用Apache2服务React? [英] How can I have Django serve React using Apache2 on Ubuntu 18.04?

问题描述

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

I am trying to deploy a Django application with a React frontend using Apache2 on Ubuntu 18.04. The React application is being served by Django through the staticfiles app. For context, let's start off with how Django is serving 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

With this configuration Django will serve the React application when the user hits the root endpoint. This works in development, but when I try to replicate this in production I run into some problems. Namely... Here is the site I am using in 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.

The DocumentRoot directive was deleted and the Django application works fine as there are other endpoints to test like the API endpoints using DRF. But when a request to https://nerdrich.net/ is made, there is only a blank page. If you navigate to https://nerdrich.net/jakuta you will get the browsable API.

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

For additional context, here are some of the settings in 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页面时，该页面为空白.请让我知道是否需要我错过的其他信息.

Again, requests made to native Django endpoints work fine, but when the html page from the build version of React is requested the page is blank. Please let me know if there is any additional information needed I missed.

推荐答案

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

Here is what I left out of the Apache config, namely, since I already have SSL configured through LetsEncrypt, here is what I needed to add to /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将无法正常工作.

Apache must be configured to serve React's static files in the build/static folder. Otherwise, React will not work.

这篇关于我如何让Django在Ubuntu 18.04上使用Apache2服务React?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！