Как развернуть приложение Django / React / Webpack в Digital Ocean через Passenger / Nginx

Приложение Create-react-app имеет довольно оптимистичную настройку для локальных и производственных сред.

Локально при запуске npm start будет запущен webpack-dev-сервер, к которому вы обычно обращаетесь через порт 3000. Он запускает локальный веб-сервер nodejs для обслуживания файлов. Вы можете направлять запросы на локальный сервер Django с помощью параметра доверенное лицо.

Стоит отметить, что на данный момент связь между вашим приложением React и Django практически отсутствует. Если вы используете настройку прокси, единственное, что связывает два приложения, - это маршрутизация любых запросов, не обрабатываемых вашим приложением React, в ваше приложение Django через порт.

По умолчанию в приложении create-response-app (и, как указано в руководстве, которое вы упомянули, вы следуете), в производстве вы должны запустить npm run build, который преобразует ваши файлы приложения create-response-app в статические файлы JS и CSS, которые затем доступны в Django. как статические файлы любое другое приложение Django.

Одна вещь, которую Django не хватает для доступа к статическим файлам, - это способ узнать, какие файлы создаются при запуске npm run build. Запуск сборки обычно приводит к выходным файлам, подобным этому:

- css
   |- main.e0c3cfcb.css
   |- main.e0c3cfcb.css.map
- js
   |- 0.eb5a2873.chunk.js
   |- 0.eb5a2873.chunk.js.map
   |- 1.951bae33.chunk.js
   |- 1.951bae33.chunk.js.map

К именам файлов добавляется случайный хэш, чтобы гарантировать очистка кеша. Здесь на помощь приходят веб-пакет-трекер и django-webpack-загрузчик. При создании файлов сборки также создается сопутствующий файл с именем manifest.json, в котором перечислены файлы, созданные для сборки. Он генерируется в Webpack и подбирается django-webpack-loader, чтобы Django мог знать, какие файлы импортировать.

Можно запустить сервер nodejs в производстве или использовать рендеринг на стороне сервера, но если вы следуете упомянутому вами руководству и используете настройки по умолчанию для create-response-app, то запуск npm run build и развертывание статических файлов - самый простой и безопасный вариант. .

Ничто в упомянутых вами ссылках развертывания Passenger не касается чего-либо, кроме развертывания приложения Python / Django - вам нужно будет управлять двумя приложениями и развертываниями, чтобы и Django, и React работали как серверы в производственной среде.

Обратите внимание, что в указанном вами руководстве рассказывается, как загрузить файлы сборки в Django в производственной среде, но вам необходимо убедиться, что у вас есть веб-пакет-трекер, django-webpack-загрузчик и конфигурация статических файлов Django, настроенная для совместной работы.

Ключевым отсутствующим параметром был параметр «местоположение» в конфигурационном файле Passenger.

Хотя сервер Django обслуживает статические файлы, включая файлы сборки для вашего приложения React, Nginx не видит никаких статических файлов, кроме тех, что находятся в «общедоступном» каталоге.

Итак, чтобы развернуть приложение Django, созданное с помощью Webpack, в рабочей среде, вам необходимо сообщить 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 на один уровень выше файла wsgi.py. Это сообщает Пассажиру, где найти файл 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()