Heroku部署Django+React应用遭遇404页面找不到问题求助

一、检查Django URL路由配置 #

• 确保urls.py里同时包含API路由和用于托管React的兜底路由，把所有非API请求交给React处理：

  from django.contrib import admin
  from django.urls import path, include, re_path
  from django.views.generic import TemplateView
  
  urlpatterns = [
      path('admin/', admin.site.urls),
      path('api/', include('your_api_app.urls')),  # 替换成你的实际API路由
      # 兜底路由，匹配所有非API路径，转发给React的index.html
      re_path(r'^.*$', TemplateView.as_view(template_name='index.html')),
  ]
  

• 注意兜底路由必须放在所有路由的最后，否则会覆盖前面的API路由。如果你的login/是前端路由，必须通过这个兜底路由让React处理，而不是让Django去匹配URL规则。

二、修正静态文件配置（settings.py） #

• 生产环境下的静态文件配置要符合Heroku要求：

  import os
  from pathlib import Path
  
  BASE_DIR = Path(__file__).resolve().parent.parent
  
  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')  # Heroku收集静态文件的目标目录
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'frontend/build/static'),  # 指向React编译后的静态文件目录
  ]
  
  # 生产环境必须关闭DEBUG
  DEBUG = os.environ.get('DEBUG', 'False') == 'True'
  
  ALLOWED_HOSTS = ['true-friends-404.herokuapp.com', 'localhost']
  

• 部署时确保执行了collectstatic命令，Heroku默认会自动运行，但可以在Procfile中明确指定：

  web: python manage.py collectstatic --noinput && gunicorn your_project_name.wsgi
  

三、协调React路由与Django的冲突 #

• React路由必须使用BrowserRouter，不能用HashRouter，否则前端路由会被Django拦截。
• 编译React项目后，把build文件夹里的内容放到Django的templates目录下，或者在settings.py的TEMPLATES配置中添加build目录：

  TEMPLATES = [
      {
          'BACKEND': 'django.template.backends.django.DjangoTemplates',
          'DIRS': [os.path.join(BASE_DIR, 'frontend/build')],
          'APP_DIRS': True,
          ...
      },
  ]
  

四、从错误日志定位问题 #

• 查看日志中404请求的具体路径，如果是Django返回的login/未匹配路由，说明兜底路由没生效，检查路由顺序和正则表达式是否正确。
• 如果日志中有静态文件（比如css、js）的404记录，说明collectstatic执行失败或路径配置错误，重新运行该命令并确认STATIC_ROOT和STATICFILES_DIRS的路径正确。

五、Heroku环境额外检查 #

• 确认Heroku的环境变量配置正确，包括SECRET_KEY、DATABASE_URL、DEBUG等。
• 用heroku logs --tail实时查看部署日志，排查dyno启动或请求处理中的错误。

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