静态文件不适用于 Django、Heroku 和 Django Sass 处理器

Question

部署到 Heroku 时，我似乎无法让静态文件工作。我得到所有 css 和 js 文件的 404。

我正在使用的东西：

Django 2.1.5
白噪声 4.1.2
django-sass-处理器 0.7.2
django-webpack-loader 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

部署时，我遵循以下步骤：

运行 yarn run build 它构建了 js（我使用的是 React，所以有 babel 之类的）并将其放入 'static/dist/' - 它致力于 git
部署到 Heroku
- 我在 heroku 上禁用了 collectstatic，所以它不会在部署时自动调用
运行在 Heroku 上：heroku run python manage.py compilescss
- 我认为应该将 scss 编译成 css 并将 css 文件放在 'static/'[= 中的 scss 文件旁边59=]
运行在 Heroku 上：heroku run python manage.py collectstatic --ignore=*.scss
- 我认为应该将 'static/' 中的所有内容（.scss 除外）复制到 'staticfiles/'。这应该是编译后的所有css文件和编译后的js。

我玩过很多设置，但似乎没有任何效果，css 和 js 得到 404。

有什么想法吗？

Answer 1

我以前没有使用过这一套确切的工具，但我认为如果您以这种方式处理事情，您的运气会更好：

确保您的应用程序配置为 run two buildpacks。 heroku/nodejs 应该运行第一，heroku/python 应该运行第二。

由于您是手动运行ning yarn 现在我怀疑这已经完成了。 yarn 未包含在 Python buildpack 中。
将 heroku-postbuild script 添加到运行的 package.json yarn build。这应该会导致在安装 Node.js 依赖项后部署期间构建 React 代码。
Re-enable Heroku's automatic collectstatic by running heroku config:unset DISABLE_COLLECTSTATIC。我认为您实际上不需要忽略 .scss 文件。

您可能还想看看 django-heroku, a Django library from Heroku that helps set up deployment on their platform. It's officially recommended，这可能有助于解决您的 HTTP 404 问题。

静态文件不适用于 Django、Heroku 和 Django Sass 处理器

Static files not working with Django, Heroku, and Django Sass Processor

django

heroku

sass

production

static-files