静态文件不能与Django，Heroku和Django Sass处理器一起使用

Question

在部署到Heroku时，我似乎无法获取静态文件。我得到所有css和js文件的404s。

我正在使用的东西：

• Django 2.1.5
• whitenoise 4.1.2
• django-sass-processor 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

当我去部署时，我按照以下步骤操作：

1. 运行yarn run build构建js（我正在使用React，所以有babel等）并将它放入'static / dist /' - 它将被提交给git
2. 部署到Heroku 我在heroku上禁用了collectstatic，因此在部署时不会自动调用它
3. 在Heroku上运行：heroku run python manage.py compilescss 我认为应该将scss编译成css并将css文件放在'static /'的scss文件旁边
4. 在Heroku上运行：heroku run python manage.py collectstatic --ignore=*.scss 我认为应该将所有内容（除了.scss）从'static /'复制到'staticfiles /'。这应该是所有已编译的css文件和已编译的js。

我玩了很多设置，但似乎没什么用，css和js得到404。

有任何想法吗？

Answer 1

我之前没有使用过这套精确的工具，但是如果你这样做的话，我认为你会有更好的运气：

1. 确保您的应用程序配置为run two buildpacks。 heroku/nodejs应该先跑，heroku/python应该跑第二。 既然你现在手动运行yarn，我怀疑这已经完成了。 yarn不包含在Python buildpack中。
2. 将heroku-postbuild script添加到运行package.json的yarn build中。这应该会导致在安装Node.js依赖项之后在部署期间构建React代码。
3. 由Re-enable组成的automatic collectstatic Heroku的running heroku config:unset DISABLE_COLLECTSTATIC。我认为你实际上不需要忽略.scss文件。

您可能还想看看来自Heroku的Django库django-heroku，它有助于在他们的平台上设置部署。这是officially recommended，可能有助于解决您的HTTP 404问题。