静态文件与Django，Heroku和Django Sass处理器无法使用

Question

我似乎在部署到Heroku时似乎无法工作。我获得了所有CS和JS文件的404。

我正在使用的东西：

• Django 2.1.5
• Whitenoise 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

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

1. 运行yarn run build哪个构建JS（我正在使用React，所以有Babel等）将其置于"静态/dist/'"中 - 致力于

2. 部署到Heroku

   • 我在Heroku上已禁用了collectstatic，因此它不会在部署上自动调用

3. 在Heroku上运行：heroku run python manage.py compilescss

   • 我认为应该将SCSS编译到CSS中，并将CSS文件放在SCSS文件旁边

4. 在Heroku上运行：heroku run python manage.py collectstatic --ignore=*.scss

   • 我认为应该将所有内容（.scss除外）从'static/''复制到'staticfiles/'。这应该是所有编译的CSS文件和已编译的JS。

我玩过很多设置，但似乎没有任何作用，CSS和JS获得了404。

有什么想法？

Answer 1

我以前从未使用过这套确切的工具，但是我认为如果您以这种方式接近事情，您会有更好的运气：

1. 确保您的应用程序配置为运行两个buildpacks。heroku/nodejs应首先运行，heroku/python应将其第二。

   由于您正在手动运行yarn，因此我怀疑已经完成了。python buildpack中不包括 yarn。

2. 在运行yarn build的CC_11中添加heroku-postbuild脚本。这应该导致您的React代码在安装node.js依赖项后部署期间构建。

3. 通过运行heroku config:unset DISABLE_COLLECTSTATIC重新启用Heroku的自动collectstatic。我认为您实际上不需要忽略.scss文件。

您可能还想看看Heroku的Django库django-heroku，该库有助于在其平台上设置部署。它是正式建议的，很可能有助于解决您的HTTP 404问题。