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

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

0 голосов
/ 06 декабря 2018

Я пытаюсь развернуть веб-приложение, созданное с помощью Django / Redux / React / Webpack, на капле Digital Ocean.Я использую Phusion Passenger и Nginx на сервере развертывания.

Я использовал create-Reaction-app для создания приложения Django с внешним интерфейсом, использующим React / Redux, и API-интерфейсом сервера, использующим django-rest.-фреймворк.Я построил веб-интерфейс, используя npm run build.

Приложение Django настроено на поиск файлов в папке frontend / build, и все работает, как ожидалось, включая аутентификацию.Он основан на этом руководстве: http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/

In 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, а приложениеотображается на локальном хосте: 3000.

На сервере развертывания я клонировал файлы в папку в var / www / и создал внешний интерфейс.

Я настроил Passenger согласнов документы с файлом passenger_wsgi.py:

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()

Документы Passenger охватывают только одну частьapp:

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.Однако Пассажир по-прежнему не отображает нужные файлы.

Я изменил 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()

Страница, обслуживаемая Пассажиром в корневом каталоге URL, теперь, кажется, имеет правоссылки на файлы js, такие как "text / javascript" src = "/ static / bundles / js / main.a416835a.js, но ссылки не работают: ожидаемый js отсутствует. Пассажир не может обслуживать jsфайлы из static / bundles / js, хотя сервер Django может их найти.

Очень благодарен за любую помощь или идеи.

Ответы [ 2 ]

0 голосов
/ 10 декабря 2018

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

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

Итак, чтобы развернуть приложение Django, созданное с помощью Webpack, в производство, вам необходимо сообщить об этих файлах Nginx.Если вы используете Passenger, эти настройки, вероятно, находятся в отдельном конфигурационном файле Passenger.'псевдоним' - это команда, используемая в этом случае, когда папка имеет имя, отличное от «статического» (на которое указывает ссылка на веб-страницу).

Если вы используете виртуальную среду для своего приложения, вынеобходимо указать, где 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;
}

Пассажир использует файл wsgi.py в качестве точки входав ваше приложение.Вам нужен файл passenger_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()
0 голосов
/ 06 декабря 2018

Create-реакции-приложение имеет довольно самоуверенную настройку для локальной и производственной сред.

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

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

По умолчанию в create-реагировать-приложение (икак отмечено в учебном пособии, о котором вы упоминали, в процессе работы вы будете запускать npm run build, который будет обрабатывать ваши файлы create-реагировать на приложения в статические файлы JS и CSS, которые затем будут доступны в 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

В имена файлов добавляется случайный хеш, чтобы обеспечить очистку кэша .Именно здесь приходят webpack-bundle-tracker и django-webpack-loader . При создании файлов сборки также создается сопроводительный файл с именем manifest.json, в котором перечислены созданные файлы.для сборки.Это генерируется в Webpack и принимается django-webpack-loader, чтобы Django мог знать, какие файлы импортировать.

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

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

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

...