Heroku: Развертывание Django Rest Framework + Vue

Question

У меня есть проект, созданный с помощью Django (только DRF API) и Vue js.У меня есть такая структура проекта:

root_directory/
├── project_name/
│   ├── settings.py
│   ├── ...
├── front_end/
│   ├── ... vue files generated with CLI 3 ...
└── api/
    └── ... api app files ...

Я хочу развернуть этот проект с использованием heroku, и моя самая большая проблема: я не знаю, как обслуживать статические файлы (файлы приложения vue).

В heroku docs указано, что я должен использовать статические файлы django, обслуживающие с пакетом whitenoise (кроме размещения их в S3).

Но тут возникает другая проблема: vue-cli предоставил мне *Файл 1010 *, в который все вводится, когда я запускаю npm run build, поэтому я не могу получить доступ к {% static 'example.js' %} в index.html напрямую, потому что это не index.html, который я должен использовать, а тот, который в dist/папка, конечно.Но там все становится минимизированным и слишком сложным для меня.Я думаю, что npm run build выдаст ошибку, если увидит что-то вроде {% %} в public/index.html.

Я не могу понять, как мне удастся развернуть этот проект с помощью heroku.Что было бы лучше всего использовать в этой ситуации?

Заранее спасибо.

Answer 1

Вы проверяли - Приложение Timestrap (https://github.com/overshard/timestrap). У них есть демонстрационный экземпляр на основе Heroku: https://timestrap.herokuapp.com/

Это приложение основано на Vuejs и Django - оно даст хорошее представление о том, какдавай об этом.

Наслаждайся

Answer 2

Вы должны быть в состоянии справиться с этим, используя WhiteNoise 4.0 и выше и несколько настроек.Например:

# Enable this so that WhiteNoise will serve `index.html` files at the directory root
WHITENOISE_INDEX_FILE = True

# Set this to wherever npm puts your final files
WHITENOISE_ROOT = os.path.join(BASE_DIR, 'dist')

Answer 3

Помимо смешивания обоих приложений, вы можете разместить свое приложение Django и приложение Vue отдельно друг от друга.

Используйте Django для подключения к базе данных и предоставления данных (например, JSON) через REST API (бэкэнд).

Потребление данных от конечных точек REST с вашим приложением Vue (внешний интерфейс).

Вот некоторые отправные точки (как вы упомянули Heroku):

Развертывание Django:

https://devcenter.heroku.com/articles/deploying-python

Развертывание Vue:

https://medium.com/netscape/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489

Некоторая хорошая библиотека для использования данных из REST API с помощью Vue:

https://github.com/axios/axios

Answer 4

добавьте это в ваше Middleware в settings.py

'whitenoise.middleware.WhiteNoiseMiddleware',

, убедитесь, что вы добавили STATICFILES_DIRS и STATICFILES_STORAGE в settings.py после STATIC_URL

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static')
]
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

Примечание: убедитесь, что вы установили это: pip install django-heroku