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

IT技术 python django reactjs
2021-05-14 16:01:52

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

该网站只为根 url 'http:localhost:8000/' 提供服务。但是,如果我想转到子 URL ' 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/”前缀?

2个回答

这一直是我很头疼以及..我设法加入我的网站的域名来修复它homepagepackage.json

{
  "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",
...

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

差异非常微妙。运行buildwith 后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",
...

.在每个文件的开头带来的变化,我的计划是能够最终找到静。

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

而不是试图改变你提供静态文件的方式以避免与react静态冲突,你可以将 Django 的静态文件路由命名为其他东西而不是static, 命名它staticfiles例如,即STATIC_URL = '/staticfiles/'.

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