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

Question

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

我正在使用的东西：

• Django 2.1.5
• 白噪声 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 添加到运行yarn build 的package.json。这应该会导致在安装 Node.js 依赖项后在部署期间构建您的 React 代码。

3. Re-enable Heroku 的 automatic collectstatic 来自 running heroku config:unset DISABLE_COLLECTSTATIC。我认为您实际上不需要忽略 .scss 文件。

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