Статические файлы не работают с Django, Heroku и Django Sass Processor

Я не могу заставить статические файлы работать при развертывании на Heroku. Я получаю 404 для всех файлов css и js.

Вещи, которые я использую:

  • Django 2.1.5
  • белый шум 4.1.2
  • django-sass-processor 0.7.2
  • django-webpack-загрузчик 0.6.0

Вот мои настройки:

Whitenoise находится в промежуточном программном обеспечении

MIDDLEWARE = [
'django.middleware.gzip.GZipMiddleware',
'django.middleware.security.SecurityMiddleware',
'whitenoise.middleware.WhiteNoiseMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware'
]

Все настройки статического файла:

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles/')
STATIC_SOURCE_ROOT = os.path.join(BASE_DIR, 'static/')

STATICFILES_DIRS = [
    STATIC_SOURCE_ROOT
]

STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder'
]

# Ensure STATIC_ROOT exists.
os.makedirs(STATIC_ROOT, exist_ok=True)

"""
Django Sass Processor
https://github.com/jrief/django-sass-processor

Template Usage:
{% load sass_tags %}

<link href="{% sass_src 'myapp/css/mystyle.scss' %}" rel="stylesheet" type="text/css" />
"""

SASS_PROCESSOR_INCLUDE_DIRS = [
    os.path.join(STATIC_SOURCE_ROOT, 'scss/')
]

SASS_PROCESSOR_ROOT = STATIC_ROOT
SASS_PROCESSOR_ENABLED = False

# Django Webpack Loader
# https://github.com/owais/django-webpack-loader

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json')
    }
}

DEBUG = False

Когда я перехожу к развертыванию, я выполняю следующие действия:

  1. Запустите yarn run build, который собирает js (я использую React, поэтому есть babel и тому подобное) и помещает его в 'static / dist /', который передается в git

  2. Развернуть на Heroku

    • I have collectstatic disabled on heroku so it doesn't get called automatically on deploy
  3. Запускаем на Heroku: heroku run python manage.py compilescss

    • Which I believe should compile the scss into css and places the css files next to the scss files in 'static/'
  4. Запускаем на Heroku: heroku run python manage.py collectstatic --ignore=*.scss

    • Which I believe should copy everything (except .scss) from 'static/' to 'staticfiles/'. This should be all of the compiled css files and the compiled js.

Я играл с множеством настроек, но ничего не работает, css и js получают 404.

Любые идеи?


person Ben    schedule 24.02.2019    source источник
comment
Пожалуйста, добавьте: 1) сгенерированный статический URL-адрес файла (в визуализированном html), 2) полный путь к файлу на удаленном диске 3) значение STATIC_ROOT   -  person Ivan Starostin    schedule 24.02.2019
comment
Фиксация static/dist/ - это антипаттерн. Получите Heroku, чтобы создать для вас ваш JavaScript. Есть очень несколько веских причин для фиксации скомпилированного кода.   -  person Chris    schedule 24.02.2019
comment
Запуск manage.py compilecss и manage.py collectstatic в интерактивном режиме с целью создания файлов, которые живут в файловой системе Heroku, не будет работать должным образом. Эфемерная файловая система потеряет эти изменения при перезапуске вашего динамометрического стенда (по крайней мере, ежедневно). Вам нужно будет разместить эти файлы на стороннем сервисе, таком как Amazon S3, или создать их как часть процесса развертывания, чтобы они были включены в слаг приложения. Посмотрите, помогает ли это .   -  person Chris    schedule 24.02.2019
comment
@Chris Как мне заставить compilescss и collectstatic (с --ignore = *. Scss) запускаться во время развертывания? Также как мне заставить heroku связать js? Это сделано в Procfile?   -  person Ben    schedule 24.02.2019


Ответы (1)


Я раньше не использовал этот точный набор инструментов, но думаю, вам повезет больше, если вы подойдете к этому следующим образом:

  1. Убедитесь, что ваше приложение настроено на запуск двух пакетов сборки . heroku/nodejs должен работать первым, а heroku/python - вторым.

    Поскольку вы сейчас запускаете yarn вручную, я подозреваю, что это уже сделано. yarn не входит в пакет сборки Python.

  2. Добавьте heroku-postbuild скрипт в свой package.json, который запускает yarn build . Это должно привести к тому, что ваш код React будет построен во время развертывания после установки ваших зависимостей Node.js.

  3. Повторно включить Heroku's автоматически collectstatic от работает heroku config:unset DISABLE_COLLECTSTATIC. Я не думаю, что вам действительно нужно игнорировать .scss файлы.

Вы также можете взглянуть на django-heroku, библиотеку Django от Heroku, которая помогает настроить развертывание на своей платформе. Он официально рекомендуется и может помочь решить ваши проблемы с HTTP 404. .

person Chris    schedule 25.02.2019
comment
Спасибо чувак! Это действительно помогло, у меня все заработало. manage.py compilescss все еще нужно запустить. Я нашел heroku-buildpack-django-sass, который я добавил как сборочный пакет после героку / питон. Я, вероятно, все еще мог бы оставить collectstatic diabled, поскольку пакет сборки django-sass снова запускает collectstatic, но я полагаю, что запуск его дважды не повредит. - person Ben; 26.02.2019