如何通过Passenger/Nginx在Digital Ocean上部署Django/React/Webpack app

Question

我正在尝试在 Digital Ocean 液滴上部署使用 Django/Redux/React/Webpack 构建的 Web 应用程序。我在部署服务器上使用 Phusion Passenger 和 Nginx。

我使用 create-react-app 来构建一个 Django 应用程序，它有一个使用 React/Redux 的前端和一个使用 django-rest-framework 的后端 api。我使用npm run build.

Django 应用程序配置为在 frontend/build 文件夹中查找其文件，一切都按预期工作，包括身份验证。它基于本教程：http : //v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

在 settings.py 中：

ALLOWED_HOSTS = ['*']

TEMPLATES = [
... 
       'DIRS': [
            os.path.join(BASE_DIR, 'frontend/build'),
        ],
...
]

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/build/static'),
]

在我的开发机器上，我激活了一个 Python 3.6 虚拟环境并运行./manage.py runserver，应用程序显示在 localhost:3000。

在部署服务器上，我将文件克隆到 var/www/ 中的文件夹中并构建了前端。

我已经根据带有文件passenger_wsgi.py的文档设置了Passenger：

import myapp.wsgi
application = myapp.wsgi.application

wsgi.py 文件位于下面的 djangoapp 文件夹中：

import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myapp.settings')
application = get_wsgi_application()

乘客文档仅涵盖单部分应用程序：

https://www.phusionpassenger.com/library/walkthroughs/start/python.html https://www.phusionpassenger.com/library/walkthroughs/deploy/python/digital_ocean/nginx/oss/xenial/deploy_app.html https： //www.phusionpassenger.com/library/deploy/wsgi_spec.html

我已经尝试将教程第 1 部分的代码直接克隆到我的服务器上并按照说明运行它。我通过添加"proxy": "http://localhost:8000"到 frontend/package.json 让它在服务器上工作。如果我运行 Django 服务器，./manage.py runserver --settings=ponynote.production_settings xxx.x.x.x:8000 那么应用程序将在 myserver:8000 上正确提供。然而，Passenger 仍然没有提供正确的文件。

我已将 wsgi.py 更改为这样说：

import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myapp.production_settings")
application = get_wsgi_application()

现在，Passenger 在 URL 根处提供的页面似乎具有指向 js 文件的正确链接，例如“text/javascript”src="/static/bundles/js/main.a416835a.js，但这些链接不起作用：预期的 js 不存在。Passenger 无法从 static/bundles/js 提供 js 文件，即使 Django 服务器可以找到它们。

非常感谢任何帮助或想法。

Answer 1

缺少的关键设置是乘客配置文件中的“位置”设置。

尽管 Django 服务器提供静态文件，包括 React 应用程序的构建文件，但 Nginx 除了“公共”目录中的静态文件外看不到任何静态文件。

因此，要将使用 Webpack 构建的 Django 应用程序部署到生产环境，您需要告诉 Nginx 这些文件。如果您使用的是 Passenger，这些设置可能位于单独的 Passenger 配置文件中。“alias”是在文件夹名称与“static”（网页链接指向的位置）不同的情况下使用的命令。

如果您的应用程序使用虚拟环境，则需要指定 Passenger 可以在哪里找到正确的 Python 可执行文件。

/etc/nginx/sites-enabled/myapp.conf

server {
    listen 80;
    server_name xx.xx.xx.xx;

    # Tell Passenger where the Python executable is
    passenger_python /var/www/myapp/venv36/bin/python3.6;

    # Tell Nginx and Passenger where your app's 'public' directory is
    # And where to find wsgi.py file
    root /var/www/myapp/myapp/myapp;

    # Tell Nginx where Webpack puts the bundle folder 
    location /static/ {
       autoindex on;
       alias /var/www/myapp/myapp/assets/;
    }

    # Turn on Passenger
    passenger_enabled on;
}

Passenger 使用 wsgi.py 文件作为应用程序的入口点。您需要一个比 wsgi.py 文件高一级的 Passenger_wsgi.py 文件。这告诉 Passenger 在哪里可以找到 wsgi.py 文件。

/var/www/myapp/myapp/passenger_wsgi.py

import myapp.wsgi
application = myapp.wsgi.application

/var/www/myapp/myapp/myapp/wsgi.py

如果您使用单独的 production_settings.py 文件，请确保在此处指定该文件。

import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "myapp.production_settings")
application = get_wsgi_application()