Heroku部署Django网站：静态文件配置及文件缺失问题求助

问题描述 #

已成功将Django网站部署到Heroku，但静态文件无法正常加载，报错信息如下：

whitenoise.storage.MissingFileError: 文件 'App/static/app/styling-images/search_button.png' 无法通过 <whitenoise.storage.CompressedManifestStaticFilesStorage object at 0x0000016932C5D190> 找到。

CSS文件 'App\styles.css' 引用了一个不存在的文件：App/static/app/styling-images/search_button.png

请检查此CSS文件中的URL引用，尤其是可能指向错误位置的相对路径。

当前文件夹结构：

-website
---App
------Static
---------App
---Website
---staticfiles
---manage.py
---Procfile
---requirements.txt
---runtime.txt

当前settings.py配置：

DEBUG = False

BASE_DIR = Path(__file__).resolve().parent.parent

MIDDLEWARE = [
   ...
   "whitenoise.middleware.WhiteNoiseMiddleware",
   ...
]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, "App/static")
]
django_heroku.settings(locals())

STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

问题分析 #

1. 路径大小写不匹配：本地Windows环境不区分路径大小写，但Heroku基于Linux系统，对路径大小写严格区分。实际文件夹是App/Static，但settings配置中写的是App/static，导致collectstatic无法正确识别目录。
2. CSS引用路径错误：CSS中硬写的绝对路径不符合collectstatic后的文件结构，Django执行collectstatic后，会将App/Static/App下的文件统一收集到staticfiles/app/目录下，不会保留原层级。
3. 配置顺序问题：django_heroku.settings(locals())可能覆盖后续的静态文件存储配置。

解决步骤 #

1. 修正STATICFILES_DIRS的路径大小写 #

将settings.py中的STATICFILES_DIRS改为与实际文件夹一致的大小写：

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, "App/Static")
]

2. 修正CSS中的资源引用路径 #

如果CSS文件位于App/Static/App/styles.css，图片位于同目录下的styling-images/search_button.png，将CSS中的引用改为相对路径：

/* 原错误路径 */
/* background: url("App/static/app/styling-images/search_button.png"); */

/* 修改为相对路径 */
background: url("./styling-images/search_button.png");

更规范的做法是使用Django模板标签生成静态文件URL：

• 在模板文件开头加载static标签：{% load static %}
• 引入CSS时使用：<link rel="stylesheet" href="{% static 'app/styles.css' %}">
• 若在CSS中引用资源，也可直接使用绝对路径：/static/app/styling-images/search_button.png

3. 调整配置顺序 #

将django_heroku.settings(locals())移到静态文件配置之后，避免覆盖存储设置：

DEBUG = False

BASE_DIR = Path(__file__).resolve().parent.parent

MIDDLEWARE = [
   ...
   "whitenoise.middleware.WhiteNoiseMiddleware",
   ...
]

STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, "App/Static")
]
STATICFILES_STORAGE = "whitenoise.storage.CompressedManifestStaticFilesStorage"

django_heroku.settings(locals())

4. 本地验证collectstatic结果 #

在本地运行以下命令，检查staticfiles目录下是否生成了正确的文件结构：

python manage.py collectstatic

确认staticfiles/app/styling-images/search_button.png存在后，再重新部署到Heroku。

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