Django 静态文件服务与 React Router 冲突答案

【问题标题】：Django static file serving in conflict with React RouterDjango 静态文件服务与 React Router 冲突
【发布时间】：2020-05-06 21:21:10
【问题描述】：

我的网站使用 Django 作为后端，使用 React.js 作为前端。前端使用 react-scripts build 编译，以便 Django 后端可以将其作为静态文件提供。使用“python manage.py runserver”运行 Web 应用程序时，我遇到了以下问题：

网站服务只查找根 url 'http:localhost:8000/'。但是，如果我想转到子网址“http://localhost:8000/team/”。 后端无法加载所有静态文件。来自后端的日志如下所示：

[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%82%96%E8%8A%B7%E7%8E%A5.93cb5dfd.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E6%9D%8E%E4%B8%80%E5%87%A1.e74fa446.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E9%83%87%E5%AE%87%E6%AC%A3.af12f28b.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E9%AB%98%E8%AF%97%E5%85%83.ff52ce19.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%83%A1%E6%B7%87%E5%AA%9B.88f0c659.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E7%8E%8B%E9%80%B8%E5%87%A1.4fe694ba.jpg HTTP/1.1" 200 3137
[20/Jan/2020 20:23:43] "GET /team/static/media/%E8%B4%BA%E9%80%B8%E6%83%9F.e77dedac.jpg HTTP/1.1" 200 3137

Django 会自动在 '/static/' 前面附加 '/team/'，因此无法找到和渲染所有原本位于 '/static/' 中的文件。这很棘手，我在网上找不到任何解决方案。

这是我的 urls.py：

from django.contrib import admin
from django.urls import path, include, re_path
from django.conf import settings
from django.conf.urls.static import static
from django.views.static import serve

from .views import index

urlpatterns = [
    path('', index, name='index'),
    re_path(r'^.*$', index),
]

在哪里

index = never_cache(TemplateView.as_view(template_name='index.html'))

我的 settings.py 如下所示：

STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'build/static')
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'build', 'media')

STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'STATIC_ROOT = os.path.join(BASE_DIR, 'build', 'static')

有谁知道是否有办法摆脱 Django 自动附加的“/team/”前缀？

【问题讨论】：

您是如何获取静态文件的，您是否确保在之前添加“/”以便从基本 url localhost:8000 获取静态文件。如果你愿意，我还有一个预配置的完全运行的 Django 项目，它使用 Webpack 服务 React，它干净且易于使用。
如果我直接输入'localhost:8000'，静态文件是从'/static/js/main.6e43aa73.chunk.js'加载的。如果我输入'localhost:8000/team/'。静态文件将从“/team/static/xxx”加载，这是不需要的。这就是你要问的吗？如果您能向我展示您的预配置项目的链接，那就太好了。谢谢！
github.com/Occy88/django_project 嘿，我添加了一个很棒的教程，里面有你可能需要的一切，请告诉我你的想法，如果它解决了你的问题，它是一个完整的安装包，你可以按照指南和它将为您提供 django、react、webpack、deployment 等的一个很好的起点......该指南是一个快速阅读，将在未来为您节省大量时间。如果您发现任何不足，也请随时提供帮助

标签： python django reactjs

【解决方案1】：

这对我来说也很头疼。我设法通过在package.json 中将我的网站域添加到homepage 来解决它

{
  "name": "frontend",
  "homepage": "https://example.com/",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/styled": "^11.1.5",
    "@sindresorhus/slugify": "^1.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
...

我认为这并不理想，尤其是如果您有多个域，但这是使其工作的最简单方法。 . 或 ./. 对我不起作用。

差异非常微妙。在运行 build 和 homepage: "." 之后，我的 asset-manifest 看起来像这样：

{
  "files": {
    "main.css": "/static/css/main.f45be922.chunk.css",
    "main.js": "/static/js/main.a84f15c1.chunk.js",
    "main.js.map": "/static/js/main.a84f15c1.chunk.js.map",
    "runtime-main.js": "/static/js/runtime-main.f8f17c43.js",
...

使用"homepage": "https://example.com" 运行后，它看起来像这样：

{
  "files": {
    "main.css": "./static/css/main.f45be922.chunk.css",
    "main.js": "./static/js/main.a84f15c1.chunk.js",
    "main.js.map": "./static/js/main.a84f15c1.chunk.js.map",
    "runtime-main.js": "./static/js/runtime-main.f8f17c43.js",
...

每个文件开头的. 产生了影响，我的程序终于能够找到静态数据。

如果有人知道解决此问题的更清洁方法，请分享！

【讨论】：

相信我，如果我可以为你的答案投票两次，我会这样做，谢谢，这对我有帮助

【解决方案2】：

您可以将 Django 的静态文件路由命名为 static 以外的其他名称，例如将其命名为 staticfiles，例如 STATIC_URL = '/staticfiles/'，而不是尝试更改提供静态文件的方式以避免与反应静态冲突。 .

您也不需要更改文件夹名称，因此 STATIC_ROOT = os.path.join(BASE_DIR, 'static') 将按预期工作，稍后尝试使用 nginx 将 /staticfiles 路由重定向到您的静态文件文件夹。

【讨论】：