Question

部署到Heroku时，似乎无法使静态文件正常工作。我得到所有CSS和JS文件的404。

我正在使用的东西：

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

当我进行部署时，请遵循以下步骤：

运行yarn run build 哪个构建了js（我正在使用React，所以有babel之类的东西）并将其放入“ static / dist /”中-它将提交给git
部署到Heroku
- 我在heroku上禁用了Collectstatic，因此部署时不会自动调用它
在Heroku上运行：heroku run python manage.py compilescss
- 我认为应该将scss编译为css，然后将css文件放在“ static /”中的scss文件旁边。
在Heroku上运行：heroku run python manage.py collectstatic --ignore=*.scss
- 我相信应该将所有内容（.scss除外）从“ static /”复制到“ staticfiles /”。这应该是所有已编译的css文件和已编译的js。

我已经进行了很多设置，但似乎无济于事，css和js得到了404。

有什么想法吗？

Answer 1

我以前没有使用过这套确切的工具，但是如果您采用这种方法，我认为您会更好：

确保将您的应用程序配置为run two buildpacks。 heroku/nodejs应该首先运行，heroku/python应该首先运行。

由于您现在手动运行yarn，所以我怀疑这已经完成。 yarn未包含在Python构建包中。
向运行package.json的{{1}}添加heroku-postbuild script。这将导致在安装Node.js依赖项后，在部署过程中构建React代码。
Re-enable由automatic collectstatic创建的Heroku的running heroku config:unset DISABLE_COLLECTSTATIC。我认为您实际上不需要忽略yarn build文件。

您可能还想看看django-heroku，它是Heroku的Django库，可帮助在其平台上进行部署。它是officially recommended，很可能有助于解决您的HTTP 404问题。

静态文件不适用于Django，Heroku和Django Sass Processor

1 个答案: