开发环境配置：让Django 8000端口托管React静态文件

你已经完成了静态文件的基础配置，但还需要补充模板、视图和路由的关键配置，才能让Django正确返回React页面，以下是完整解决步骤：

1. 配置Django模板路径 #

在settings.py中修改TEMPLATES配置，让Django能找到React构建后的index.html：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # 添加React build目录到模板搜索路径
        'DIRS': [os.path.join(BASE_DIR, '../frontend/build')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2. 添加视图渲染React入口页 #

在项目根目录（如backend/backend）的views.py中新增视图函数，用于返回React的index.html：

from django.shortcuts import render

def react_app(request):
    # 直接渲染React构建后的index.html
    return render(request, 'index.html')

3. 配置URL路由指向视图 #

修改项目根目录的urls.py，将根路径/映射到刚才创建的视图：

from django.contrib import admin
from django.urls import path
from .views import react_app  # 导入新增的视图

urlpatterns = [
    path('admin/', admin.site.urls),
    # 根路径指向React应用视图
    path('', react_app),
]

4. 验证静态文件配置并重新收集资源 #

确认你当前的静态文件配置无误：

BASE_DIR = os.path.dirname(os.path.abspath(__file__))
STATICFILES_DIRS = [os.path.join(BASE_DIR, '../frontend/build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

重新执行静态文件收集命令：

python manage.py collectstatic

5. 启动Django服务 #

运行python manage.py runserver，此时访问http://localhost:8000即可看到React页面。

额外注意事项 #

• 必须确保已执行过npm run build生成frontend/build目录，否则Django找不到静态资源和入口文件。
• 开发环境下如果不想每次修改React代码都重新build，可以配置Django代理转发到React的3000端口，但要实现单端口访问，build后托管是最直接的方式。
• 若DEBUG = False，需在settings.py中设置ALLOWED_HOSTS = ['localhost', '127.0.0.1']，避免访问被拦截。

内容的提问来源于stack exchange，提问作者Axil