Heroku部署Django+React项目静态文件返回404，本地运行正常如何解决？

1. 修正WhiteNoise中间件顺序 #

你当前的中间件顺序配置错误，WhiteNoise必须紧接在SecurityMiddleware之后，放在所有其他中间件之前，修正后的MIDDLEWARE配置如下：

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware', # 移到当前位置
    'corsheaders.middleware.CorsMiddleware',
    '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',
]

2. 禁用django_heroku的自动静态配置覆盖 #

django_heroku.settings(locals())默认会覆盖你自定义的静态文件相关配置，需要添加参数禁用该逻辑，修改调用语句为：

django_heroku.settings(locals(), staticfiles=False)

3. 显式配置WhiteNoise静态文件存储 #

在settings.py的静态配置部分添加以下配置，启用WhiteNoise的压缩和缓存功能：

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

4. 核对项目部署配置 #

• 确认你的Procfile文件内容正确，指向匹配的WSGI应用，示例如下，替换为你自己的项目名称：

  web: gunicorn 你的项目名.wsgi --log-file -
  

• 确认Heroku构建流程中自动运行了python manage.py collectstatic，若未自动触发可以在构建命令中手动添加该步骤。

5. 核对URL路由配置 #

确认你的根urls.py中已经配置了静态文件的服务逻辑，覆盖开发和生产环境：

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    # 你原有配置的其他路由
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

以上配置修改完成后重新推送到Heroku部署即可解决静态文件404的问题。

内容的提问来源于stack exchange，提问作者Adeyemo Toluwanimi