在 Railway 上部署 Django 时 CSS 不会加载，因为 MIME 类型（'text/html'）不是受支持的样式表 MIME 类型

Question

我已经完成了 CS50W 项目 1 wiki 项目。虽然不是作业的一部分，但我想将其托管在网上，以便我可以将其展示给我的朋友。 部署到 Railway 成功，但当我查看页面时，CSS 未加载。您可以在这里查看我的网站：https://web-product-40b27.up.railway.app/

我收到的错误消息是这样的：

我认为这与静态文件路径有关。有人可以帮助我吗？

DEBUG = False

ALLOWED_HOSTS = ['*']


STATIC_URL = '/static/'

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
    
STATIC_ROOT =os.path.join(BASE_DIR, 'staticfiles')

这是我的目录树的细分：

   wiki
└── wiki
    ├── db.sqlite3
    ├── encyclopedia
    │   ├── admin.py
    │   ├── apps.py
    │   ├── migrations
    │   │   ├── __init__.py
    │   │   └── __pycache__
    │   │       └── __init__.cpython-312.pyc
    │   ├── models.py
    │   ├── static
    │   │   └── encyclopedia
    │   │       └── styles.css
    │   ├── templates
    │   │   └── encyclopedia
    │   │       ├── create.html
    │   │       ├── edit.html
    │   │       ├── entry_page.html
    │   │       ├── error.html
    │   │       ├── index.html
    │   │       ├── layout.html
    │   │       └── search.html
    │   ├── tests.py
    │   ├── urls.py
    │   ├── util.py
    │   ├── views.py
    │   ├── __init__.py
    │   └── __pycache__
    │       ├── admin.cpython-312.pyc
    │       ├── apps.cpython-312.pyc
    │       ├── models.cpython-312.pyc
    │       ├── urls.cpython-312.pyc
    │       ├── util.cpython-312.pyc
    │       ├── views.cpython-312.pyc
    │       └── __init__.cpython-312.pyc
    ├── entries
    │   ├── CSS.md
    │   ├── Django.md
    │   ├── Git.md
    │   ├── HTML.md
    │   └── Python.md
    ├── manage.py
    ├── Procfile
    ├── README.md
    ├── requirements.txt
    ├── runtime.txt
    ├── staticfiles
    │   ├── admin
    │   │   ├── css
    │   │   │   ├── autocomplete.css
    │   │   │   ├── base.css
    │   │   │   ├── changelists.css
    │   │   │   ├── dark_mode.css
    │   │   │   ├── dashboard.css
    │   │   │   ├── forms.css
    │   │   │   ├── login.css
    │   │   │   ├── nav_sidebar.css
    │   │   │   ├── responsive.css
    │   │   │   ├── responsive_rtl.css
    │   │   │   ├── rtl.css
    │   │   │   ├── vendor
    │   │   │   │   └── select2
    │   │   │   │       ├── LICENSE-SELECT2.md
    │   │   │   │       ├── select2.css
    │   │   │   │       └── select2.min.css
    │   │   │   └── widgets.css
    │   │   ├── img
    │   │   │   ├── calendar-icons.svg
    │   │   │   ├── gis
    │   │   │   │   ├── move_vertex_off.svg
    │   │   │   │   └── move_vertex_on.svg
    │   │   │   ├── icon-addlink.svg
    │   │   │   ├── icon-alert.svg
    │   │   │   ├── icon-calendar.svg
    │   │   │   ├── icon-changelink.svg
    │   │   │   ├── icon-clock.svg
    │   │   │   ├── icon-deletelink.svg
    │   │   │   ├── icon-hidelink.svg
    │   │   │   ├── icon-no.svg
    │   │   │   ├── icon-unknown-alt.svg
    │   │   │   ├── icon-unknown.svg
    │   │   │   ├── icon-viewlink.svg
    │   │   │   ├── icon-yes.svg
    │   │   │   ├── inline-delete.svg
    │   │   │   ├── LICENSE
    │   │   │   ├── README.txt
    │   │   │   ├── search.svg
    │   │   │   ├── selector-icons.svg
    │   │   │   ├── sorting-icons.svg
    │   │   │   ├── tooltag-add.svg
    │   │   │   └── tooltag-arrowright.svg
    │   │   └── js
    │   │       ├── actions.js
    │   │       ├── admin
    │   │       │   ├── DateTimeShortcuts.js
    │   │       │   └── RelatedObjectLookups.js
    │   │       ├── autocomplete.js
    │   │       ├── calendar.js
    │   │       ├── cancel.js
    │   │       ├── change_form.js
    │   │       ├── collapse.js
    │   │       ├── core.js
    │   │       ├── filters.js
    │   │       ├── inlines.js
    │   │       ├── jquery.init.js
    │   │       ├── nav_sidebar.js
    │   │       ├── popup_response.js
    │   │       ├── prepopulate.js
    │   │       ├── prepopulate_init.js
    │   │       ├── SelectBox.js
    │   │       ├── SelectFilter2.js
    │   │       ├── theme.js
    │   │       ├── urlify.js
    │   │       └── vendor
    │   │           ├── jquery
    │   │           │   ├── jquery.js
    │   │           │   ├── jquery.min.js
    │   │           │   └── LICENSE.txt
    │   │           ├── select2
    │   │           │   ├── i18n
    │   │           │   │   ├── af.js
    │   │           │   │   ├── ar.js
    │   │           │   │   ├── az.js
    │   │           │   │   ├── bg.js
    │   │           │   │   ├── bn.js
    │   │           │   │   ├── bs.js
    │   │           │   │   ├── ca.js
    │   │           │   │   ├── cs.js
    │   │           │   │   ├── da.js
    │   │           │   │   ├── de.js
    │   │           │   │   ├── dsb.js
    │   │           │   │   ├── el.js
    │   │           │   │   ├── en.js
    │   │           │   │   ├── es.js
    │   │           │   │   ├── et.js
    │   │           │   │   ├── eu.js
    │   │           │   │   ├── fa.js
    │   │           │   │   ├── fi.js
    │   │           │   │   ├── fr.js
    │   │           │   │   ├── gl.js
    │   │           │   │   ├── he.js
    │   │           │   │   ├── hi.js
    │   │           │   │   ├── hr.js
    │   │           │   │   ├── hsb.js
    │   │           │   │   ├── hu.js
    │   │           │   │   ├── hy.js
    │   │           │   │   ├── id.js
    │   │           │   │   ├── is.js
    │   │           │   │   ├── it.js
    │   │           │   │   ├── ja.js
    │   │           │   │   ├── ka.js
    │   │           │   │   ├── km.js
    │   │           │   │   ├── ko.js
    │   │           │   │   ├── lt.js
    │   │           │   │   ├── lv.js
    │   │           │   │   ├── mk.js
    │   │           │   │   ├── ms.js
    │   │           │   │   ├── nb.js
    │   │           │   │   ├── ne.js
    │   │           │   │   ├── nl.js
    │   │           │   │   ├── pl.js
    │   │           │   │   ├── ps.js
    │   │           │   │   ├── pt-BR.js
    │   │           │   │   ├── pt.js
    │   │           │   │   ├── ro.js
    │   │           │   │   ├── ru.js
    │   │           │   │   ├── sk.js
    │   │           │   │   ├── sl.js
    │   │           │   │   ├── sq.js
    │   │           │   │   ├── sr-Cyrl.js
    │   │           │   │   ├── sr.js
    │   │           │   │   ├── sv.js
    │   │           │   │   ├── th.js
    │   │           │   │   ├── tk.js
    │   │           │   │   ├── tr.js
    │   │           │   │   ├── uk.js
    │   │           │   │   ├── vi.js
    │   │           │   │   ├── zh-CN.js
    │   │           │   │   └── zh-TW.js
    │   │           │   ├── LICENSE.md
    │   │           │   ├── select2.full.js
    │   │           │   └── select2.full.min.js
    │   │           └── xregexp
    │   │               ├── LICENSE.txt
    │   │               ├── xregexp.js
    │   │               └── xregexp.min.js
    │   └── encyclopedia
    │       └── styles.css
    └── wiki
        ├── asgi.py
        ├── settings.py
        ├── urls.py
        ├── wsgi.py
        ├── __init__.py
        └── __pycache__
            ├── settings.cpython-312.pyc
            ├── urls.cpython-312.pyc
            ├── wsgi.cpython-312.pyc
            └── __init__.cpython-312.pyc

Answer 1

如果您在网络检查器中查看网络选项卡：

获取样式表会导致状态代码 404。这意味着该资源不存在于路径中。

解决这个问题并不像修复资源路径那么简单。这是因为在生产环境中（即

DEBUG = False

），Django 本身不提供静态文件。 Django 确实列出了在生产中部署静态文件的方法here，但是，我发现这些方法相当难以理解。您可能需要安装这里找到的whitenoise，其中有关于如何设置的详细说明。