尽管 Cloudinary 从 IDE 收集数据，但 Cloudinary 在显示到 heroku 时不显示静态文件。 Cloudinary 和 Heroku 之间的问题？

Question

Cloudinary 在显示到 heroku 时不显示静态文件。 Cloudinary 和 Heroku 之间的问题？

查看部署的 URL https://coach-matrix-d2cd1e717f81.herokuapp.com/ask_question/

这以前是一个问题记录在这里，但现在很多调试步骤似乎无关紧要，我已经得出了 Cloudinary 在我的 Django IDE 上正确安装的工作理论，而问题实际上在于 Cloudinary 和 Heroku 设置之间。

要点一览。

• 在 Heroku 上，我希望看到 django-quill WYSIWYG 编辑器像在本地主机中一样显示，但是我没有看到任何框，而是在控制台中看到这些错误消息。
• 这特别具有挑战性的是本地主机上没有明显的错误。
  • 已安装许多编辑器 - Summernote、CKEditor，在本地主机上完美运行，但存在部署问题。
  • Cloudinary 似乎在 settings.py 和 env.py 中成功实现 - 被许多同行确认可以正常工作。 [为了便于阅读，此处省略]
  • python3管理.pycollectstatic命令似乎工作没有问题，返回一个语句

查看错误消息，它提到 MIME 生产版本的问题似乎是在本地（在 Heroku 上）而不是在 Cloudinary 上查找文件。

Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
django_quill.js:1 
        Failed to load resource: the server responded with a status of 404 (Not Found)
ask_question/:1  Refused to execute script from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
ask_question/:108  Uncaught ReferenceError: QuillWrapper is not defined
    at ask_question/:108:27
    at ask_question/:110:11
ask_question/:1  Refused to apply style from 'https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

单击其中一个链接会导致此错误消息

Page not found (404)
Request Method: GET
Request URL:    https://coach-matrix-d2cd1e717f81.herokuapp.com/static/django_quill/django_quill.js
Using the URLconf defined in coachmatrix.urls, Django tried these URL patterns, in this order:

admin/
index/ [name='index']
questions/ [name='questions']
ask_question/ [name='ask_question']
<slug:slug>/ [name='question_detail']
upvote/<slug:slug> [name='question_upvote']
downvote/<slug:slug> [name='question_downvote']
questions/<slug:slug>/upvote/ [name='question_upvote_from_list']
questions/<slug:slug>/downvote/ [name='question_downvote_from_list']
question/<int:pk>/delete/ [name='question_delete']
question/<slug:slug>/update/ [name='question_update']
answer/<slug:slug>/update/ [name='answer_update']
answer/<slug:slug>/delete/ [name='answer_delete']
answer/<int:pk>/upvote/ [name='answer_upvote']
answer/<int:pk>/downvote/ [name='answer_downvote']
accounts/
[name='home']
questions/ [name='questions']
accounts/
logout
The current path, static/django_quill/django_quill.js, didn’t match any of these.

静态语法在生产中似乎根本不加载

我关于静态文件普遍问题的第一个线索是 CSS 在生产中也不起作用（同样在本地主机上也起作用）。它的标题是

<link rel="stylesheet" href="{% static 'css/style.css' %}"> <!--limited to localhost, not displaying in production-->

，必须更改为这个才能显示 CSS

<link rel="stylesheet" href="https://res.cloudinary.com/dh1xovduy/raw/upload/v1703781479/static/css/style.674a1e0f7f03.css"> <!--linking directly to the file now works successfully-->

调试步骤

如前所述，django settings.py STATIC_ROOT 等都工作正常，已经被几个同行审查过。它还使用collectstatic正确上传。问题肯定是在 Cloudinary 和 Heroku 之间。

检查heroku中的部署日志

确认来自cloudinary的静态文件，

0 static files copied, 1386 post-processed.

检查 Cloudinary 库原始文件

所有文件似乎已成功上传 Django-Quill CSS 和 JS 文件位于名为

django_quill

的文件夹中

Cloudinary 上传设置 > 唯一文件名： false

版本控制末尾添加的语法可能会使 Heroku 无法读取文件。例如cloudinary 上的文件被称为

https://console.cloudinary.com/settings/

因此在库的设置中我使用

Unique filename: false

创建了一个新的上传方法

令人困惑的是，在manage.pycollectstatic之后，这似乎并没有改变文件类型，它甚至注册了一组未提交的文件，但在末尾添加了一个标签。

django_quill.557645779788.js

cloudinary上传设置>默认公共ID：资产的Etag值

从末尾的随机字符串切换为资产的Etag值。

gitpod /workspace/Classroom-Matrix (main) $ python3 manage.py collectstatic

You have requested to collect static files at the destination
location as specified in your settings.

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel: yes
[...]

0 static files copied, 1491 post-processed.

查看库，似乎根本没有覆盖现有文件

无论如何尝试部署但没有这样的运气。

在heroku配置变量中使用DISABLE_COLLECTSTATIC=0

似乎没有改变任何东西，无论是设置为1还是0

CLOUDINARY_URL=cloudinary：[已编辑]

DATABASE_URL=postgres: // [已编辑]

DISABLE_COLLECTSTATIC=0

端口=8000

SECRET_KEY= [已编辑]

在 cloudinary 上自定义重命名文件以删除随机字符串

我终于尝试在 Cloudinary 上手动删除名称字符串

django_quill.557645779788.js

被替换为

django_quill.js

这似乎也没有改变错误消息。

尝试使用 {% static %} 语法来实现 django_quill （已恢复）

    <link rel="stylesheet" href="{% static 'django_quill/django_quill.css' %}">
    <script src="{% static 'django_quill/django_quill.js' %}"></script> 

由于 CORS 问题，这甚至不会显示在本地主机中。步骤已恢复。

删除整个Cloudinary库并允许createstatic上传

完全相同的错误消息。 DISABLE_COLLECTSTATIC 设置为 0。

Answer 1

发现该问题与缺少 Whitenoise 中间件有关，这是一个 Python 包，特别适合简化静态文件并让它们在部署的 Web 应用程序中提供服务。

尽管最初存在一些担忧，但 Cloudinary 或 Heroku 一直运行良好，并且可以通过一个非常简单的解决方案在代码存储库内部进行修复。

这是修复方法。

• pip install whitenoise

  在终端
• 将

  whitenoise==6.6.0

  添加到

  requirements.txt

• 在

  settings.py

  更新中间件

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'whitenoise.middleware.WhiteNoiseMiddleware', # added whitenoise middleware here.
    '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',
    'allauth.account.middleware.AccountMiddleware',
]

感谢代码学院校友社区的 Sean Mead 找到了拼图中的最后一块。