来自 npm-运行-build 前端的 Django 中的静态文件抛出错误 404

Question

我想将我用 npm run build 创建的 Gatsby JS public 文件夹添加到 Django as_view。当我尝试从 STATICFILES_DIRS 加载静态文件和 index.html 时，Django 一直向我抛出 404 错误。

我不明白 Django 为何无法找到 JSON 文件，例如 /app-data.json，即使我提供了绝对路径。

注意：我试过 python3 manage.py runserver --insecure（也没有不安全）- 没用。

目录结构：

./frontend
- ./public
 - ./codeblock
 - ./codeblock/1-index
 - ./staticfiles
 - ./staticfiles/d
 - ./page-data
  - /app-data.json
 - ./index.html
 - ...

./backend
- ./backend
  -  settings.py

package.json

    "scripts": {
        "start": "gatsby develop",
        "build": "gatsby build --prefix-paths",
        "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
        "lint": "eslint --fix \"src/**/*.{js,jsx}\""
    },

settings.py

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
DEBUG = False

INSTALLED_APPS = [
    ...
    'django.contrib.staticfiles',

BACKEND_DIR = BASE_DIR

FRONTEND_DIR = os.path.abspath(
    os.path.join(BACKEND_DIR, '..', 'frontend'))

# STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    os.path.join(FRONTEND_DIR, 'public'),
    os.path.join(FRONTEND_DIR, 'public', 'page-data'),
    ]

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

urls.py

...imports 

urlpatterns = [
    url('test/', views.FrontendAppView.as_view()),
]+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

index.html

在HTML文件中如果我用/static/定义路径，比如href="/static/webpack-runtime-4145e7520a88c179d990.js"，那么Django可以拉入JS静态文件，否则404错误。

<!DOCTYPE html>
<html lang="en">

<head>
    <link as="script" rel="preload" href="webpack-runtime-4145e7520a88c179d990.js" />
    <link as="script" rel="preload" href="commons-926e13980b7ff3c9526c.js" />
    <link as="script" rel="preload" href="app-425daa4026ff9a50d14f.js" />
    <link as="fetch" rel="preload" href="page-data/index/page-data.json" />
</head>
...

Answer 1

要提供静态文件，您需要区分开发 (Debug = True) 和生产 (debug = False) 模式：

如果您处于开发模式：(debug = True):

https://docs.djangoproject.com/en/3.0/howto/static-files/#managing-static-files-e-g-images-javascript-css

如果您处于生产模式：(debug = False):

https://docs.djangoproject.com/en/3.0/howto/static-files/deployment/#serving-static-files-in-production

Answer 2

您可以使用 Django Whitenoise 在生产中提供静态文件

Answer 3

如果有人感兴趣，下面是为我解决这个问题的方法。

问题 1：我没有添加 {% static %} 和 {% load static %}
问题 2：每次 npm 运行构建后，我都必须在 HTML 文件

解决方案： 如果您使用的是 Gatsby JS，请按如下所示编辑 congif.js。它会在路径前添加 /static/ 并且 Django 将能够正确呈现您的页面。这样你就不必添加 {% static %} 和 {% load static %}:

const config = {
    gatsby: {
        pathPrefix: '/static/'
}

来自 npm-运行-build 前端的 Django 中的静态文件抛出错误 404

Staticfiles in Django coming from npm-run-build frontend throw Error 404

django

gatsby

django-staticfiles