Рубрики
Без рубрики

Развернуть ваше приложение Django + React.js в Heroku

В настоящее время в большинстве случаев мы видим, что есть бэкэнд, который обеспечивает API и различные передние технологии … Tagged с Django, React, JavaScript, Python.

В настоящее время в большинстве случаев мы видим, что есть бэкэнд, который предоставляет API и различные передние технологии, такие как Реагировать В Vue , Мобильные приложения используют эти конечные точки API, чтобы предоставить пользователь пользователь. Этот метод разработки становится все более популярным с ростом популярности великих фреймворков JavaScript, таких как Реагировать В Vue , Угловой и т. д.

Есть в основном два способа развертывания этого вида веб -приложений:

  • Разделение бэкэнд и фронта: В этом методе вы получаете серверные и передние приложения отдельно, и они подключаются друг к другу со своими соответствующими URI. Одна из основных переоборудований этого подхода – вы должны настроить Корр самим собой. Если вы не знаете о Корр Вы можете узнать больше Здесь Анкет
  • Служит от того же хоста: В этом методе вы будете служить приложению из того же URI, поэтому оно удаляет Cors наверху. Кроме того, это облегчает поддержание приложений размером с меньшего размера. Вы не хотите создавать два отдельных репозиторию для некоторых простых сайтов, таких как блог, дел и т. Д.

Я покажу вам, как я интегрировал свой Django приложение с моим React.js внешний интерфейс. Мы будем следовать следующим шагам:

  • Создать приложение React с Создать-реакт-приложение
  • Создайте VirtualENV и установите необходимые зависимости
  • Создайте проект Django в нашем приложении React
  • Обновить оба настройки приложения
  • Развернуть в Хероку

Пример кода, показанный в этом уроке, доступен Здесь Анкет

Я перечисляю технологический стек, который использую ниже, на всякий случай:

  • Узел 11.15.0
  • Python 3.7.3
  • пряжа 1.17.3 (диспетчер пакетов узлов)
  • Поэзия 0,12,16 (Диспетчер пакетов Python)

П.с. Поэзия довольно новичок в сообществе Python. Это делает управление зависимостью проектов Python намного более удобным. Также похожа на Pipenv Это обрабатывает для вас VirtualEnv. Вы можете использовать это или просто использовать Pip , Pipenv или любое другое решение, которое вам нравится.

Во-первых, мы должны генерировать наше приложение React, которое будет работать в качестве нашего интерфейса. Для этого урока я назову проект django-react-boilerplate Анкет Измените это по своему вкусу. Давайте создадим наше приложение React. Здесь я генерирую приложение React, которое использует TypeScript Анкет Вы можете проигнорировать это, просто подчиняясь -typescript часть из вышеупомянутой команды. Запустите приведенную ниже команду, чтобы сгенерировать ваше приложение React:

$ yarn create react-app django-react-boilerplate --typescript

Приведенная выше команда создаст каталог с именем django-react-boilerplate и это должно иметь ниже структуру.

django-react-boilerplate
├── node_modules
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── package.json
├── tsconfig.json
└── yarn.lock

Я буду использовать Поэзия сделать это. Итак, если вы следуете точно пошагово, вы должны установить поэзию. Вы можете получить инструкции от Здесь Анкет Вы можете выбрать любое другое решение для виртуальной среды, которое вам нравится в вашем случае. Прежде всего, давайте изменить каталог на приложение сгенерированного React. А затем инициализируйте поэзию. Это задаст вам несколько общих вопросов, связанных с проектом. Вы можете ответить на них, в противном случае будут использоваться значения по умолчанию из поэзии. Вы также можете установить свои зависимости при установке приложения, но я не буду этого делать в своем случае. После выполнения приведенных выше инструкций ваша оболочка может выглядеть примерно так.

$ cd django-react-boilerplate
$ poetry init

This command will guide you through creating your pyproject.toml config.

Package name [django-react-boilerplate]:
Version [0.1.0]:
Description []:
Author [Shakib Hossain , n to skip]:
License []:
Compatible Python versions [^3.7]:

Would you like to define your dependencies (require) interactively? (yes/no) [yes] no



Would you like to define your dev dependencies (require-dev) interactively (yes/no) [yes] no

Generated file

[tool.poetry]
...
...

Do you confirm generation? (yes/no) [yes] yes

После окончания создания вашего pyproject.toml файл. Теперь вы можете перейти к установке зависимостей, которые нам понадобятся для нашего проекта. Давайте установим их:

$ poetry add django djangorestframework whitenoise gunicorn django-heroku

Приведенная выше команда будет генерировать для вас VirtualENV и установить все зависимости в нее.

П.с. Вы можете столкнуться с проблемами при установке Джанго-Героку Если у тебя нет Postgresql установлены.

Теперь пришло время генерировать наш Django приложение. Мы должны сначала включить наш VirtualEnv. Если вы используете Поэзия Затем следуйте, иначе используйте свой метод решения для активации VirtualEnv. Поэзия Пользователи могут активировать свою VirtualEnv, используя приведенную ниже команду:

$ poetry shell

После активации оболочки теперь у нас есть доступ к нашему Django Пакет Python и сценарии, которые поставляются с этим пакетом, например Джанго-Админ Анкет Давайте генерируем наш проект внутри django-react-boilerplate каталог. Я называю свое бэкэнд -название проекта Бэкэнд . Вы можете выбрать свой собственный. Запустите ниже команду, чтобы генерировать проект внутри текущего каталога:

# Make sure you're inside the django-react-boilerplate directory
$ django-admin startproject backend .

После создания проекта Django наша структура проекта будет выглядеть чем -то похожее на это.

├── backend
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── package.json
├── Procfile
├── public
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── pyproject.toml
├── README.md
├── src
│   ├── App.css
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── index.css
│   ├── index.tsx
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   └── serviceWorker.ts
├── tsconfig.json
└── yarn.lock

Первое изменение, которое мы сделаем, это добавить Прокси Ключ к нашему package.json . Это доверсится все наши запросы API в разработке. Вы можете узнать больше об этом Здесь Анкет Добавьте следующую строку в свой Package.json файл.

{
  ...
  "proxy": "http://localhost:8000"
}

После этого мы должны создать каталог с именем Статический Внутри public каталог. Мы переместим содержимое public каталог в этот новый Статический каталог, кроме index.html файл. После перемещения public каталог должен выглядеть так.

public
├── index.html
└── static
    ├── favicon.ico
    └── manifest.json

Мы должны переместить эти файлы, чтобы, когда мы создаем наше приложение React, выполняя Строительство пряжи Мы получим эти файлы внутри Строитель/статический каталог, который мы будем использовать в качестве наших проектов Django Static_root .

Теперь, согласно нашей структуре каталогов, мы должны рефакторировать public/index.html файл. Open public/index.html файл и обновите favicon.ico и manifest.json URL -адреса /Статический/favicon.ico и /static/manifest.json Анкет

Вся конфигурация нашего приложения React выполнена. Теперь мы должны настроить наш проект Django.

В основном у нас есть один HTML -файл для обслуживания (сгенерированный HTML -файл React). Давайте создадим представление в нашем приложении Django для обслуживания этого HTML -файла. Я использую Generic Templateview для создания представления. Создать views.py Файл внутри Бэкэнд каталог и добавьте приведенный ниже код Python в файл:

from django.views.generic import TemplateView
from django.views.decorators.cache import never_cache

# Serve Single Page Application
index = never_cache(TemplateView.as_view(template_name='index.html'))

Здесь заметить, что я использую Never_cache Декоратор, инициализация Индекс Посмотреть. Этот декоратор довольно прямой. Это добавляет заголовки к ответу, чтобы он никогда не был кэширован. Мы будем генерировать наш index.html Файл из нашего приложения React, который может измениться в любое время. Вот почему мы не хотим, чтобы какой -либо браузер устарел index.html файл.

Мы написали Индекс Посмотреть. Теперь добавим его в urls.py . Мы будем служить index.html от нашего корневого URL. Теперь откройте свой urls.py и обновить его в соответствии с кодом ниже:

from django.contrib import admin
from django.urls import path

from .views import index

urlpatterns = [
    path('', index, name='index'),
    path('admin/', admin.site.urls),
]

Большая часть нашей работы сделана. Все теперь мы должны сделать Обновление нашего Backend/settings.py файл. Здесь мы сначала сделаем все, как указано в Джанго-Героку Документация Анкет После применения этих изменений наше приложение не будет работать сразу. Мы должны обновить наш настройки.py Файл дальше, чтобы заставить его работать. Во -первых, добавить отбелить и REST_FRAMEWORD к вашему Insted_apps Как ниже. Вы должны перечислить белый шум прямо перед django.contrib.staticfiles . И мы также должны добавить отбелить промежуточное программное обеспечение сразу после Джангоса SecurityMiddleware Анкет

INSTALLED_APPS= [
    ...
    'whitenoise.runserver_nostatic',  # < As per whitenoise documentation
    'django.contrib.staticfiles',

    # 3rd party apps
    'rest_framework',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware',  # Whitenoise Middleware
    ...
]

Теперь мы должны обновить наш Шаблоны Настройки, так что наше приложение Django может найти index.html Мы упомянули в нашем Backend/views.py файл. Вы можете добавить дополнительные каталоги, которые вы хотите включить здесь.

TEMPLATES = [
    {
        'BACKEND':
        'django.template.backends.django.DjangoTemplates',
        'DIRS':
        [os.path.join(BASE_DIR, 'build')]
        ...
    }
]

Почти готов! Мы должны обновить наш Статический Настройки, связанные с файлами и переместите их в нижнюю часть Backend/settings.py файл. Обновите свой настройки.py файл, как ниже:

# Import django_heroku module at the top of your settings.py file
import django_heroku

...
...


# Configure app for Heroku deployment
django_heroku.settings(locals())

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/2.1/howto/static-files/
STATIC_URL = '/static/'
# Place static in the same location as webpack build files
STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')
STATICFILES_DIRS = []

# If you want to serve user uploaded files add these settings
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'build', 'media')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

Теперь мы готовы проверить наше приложение. Несколько вещей, которые мы должны помнить в этой настройке:

  • Всегда беги Строительница пряжи После того, как вы обновили свой интерфейс
  • Во время развития вы должны запустить реагировать сервер и Django Сервер отдельно, чтобы использовать встроенную горячую нагрузку этих серверов.

Теперь запустите приведенные ниже команды, чтобы проверить, правильно ли наше приложение обслуживает файлы.

$ yarn build
$ poetry shell
$ python manage.py runserver

Откройте предпочтительный браузер и перейдите к Localhost: 8000 Анкет Вы должны увидеть приложение React по умолчанию.

.

Во -первых, давайте создадим наше Хероку Приложение с командой ниже (убедитесь, что у вас есть heroku-cli 

$ heroku create drt-boilerplate

Добавить Nodejs и Python BuildPacks и Postgresql аддон в наше приложение.

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/python
$ heroku addons:create heroku-postgresql:hobby-dev

Создать Procfile :

release: python manage.py migrate
web: gunicorn backend.wsgi --log-file -

Здесь Выпуск Опция гарантирует, что после каждого развертывания запускают ваши миграции Django. И Интернет Вариант обслуживает ваше приложение Django, используя Онломщик HTTP -сервер.

Вы должны генерировать Требования.txt Файл для Хероку развертывание. Итак, не забудьте это сделать.

$ poetry export -f requirements.txt --output requirements.txt

Мы готовы протолкнуть первую версию нашего приложения. Создайте репозиторий GIT и сделайте коммит. После этого нажмите файлы в Heroku, выполнив приведенную ниже команду:

$ git push heroku master

Это запустит развертывание и покажет вам ваш прогресс развертывания. После успешного развертывания он покажет вам URL вашего приложения. В моем случае URL https://drt-boilerplate.herokuapp.com/ Анкет Теперь похлопайте себя по спине, чтобы сделать это. 😀

Эта статья была впервые опубликована Здесь Анкет

Оригинал: “https://dev.to/shakib609/deploy-your-django-react-js-app-to-heroku-2bck”

Читайте ещё по теме: