使用 Heroku 为静态文件配置 Django 设置

Question

我正在尝试使用 Heroku 部署我的 Django 网站。到目前为止，站点已成功部署，但唯一的问题是收集静态文件。我坚持我应该如何配置我的 settings.py 文件，以便网站知道在哪里可以找到这些静态文件。

文件夹结构

-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"

错误消息

whitenoise.storage.MissingFileError：找不到文件 'App/static/app/styling-images/search_button.png' .

CSS 文件“App\styles.css”引用了一个无法找到的文件： 应用程序/static/app/styling-images/search_button.png

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

Answer 1

我怀疑实际上是在找到静态文件，这里的问题是其中一个文件，一个 CSS 文件，使用硬编码的 url，如：

.search-button {
    background-image: url('App/static/app/styling-images/search_button.png');
    ....
}

如果 DEBUG=True，这可能工作正常，但在生产环境中不行。您应该能够更改 CSS url() 以使用您的 STATIC_URL 设置作为其顶级，例如，

.search-button {
    background-image: url('/static/app/styling-images/search_button.png');
    ....
}

（您可以通过在浏览器中完整输入您的域名并查看它是否返回图像来判断您是否获得了正确的 URL。使用 STATIC_URL 的顶级也应该在您的开发环境中工作）