部署Django REST Framework+React应用到AWS遇问题求助

问题概述 #

本地正常运行的Django REST Framework（后端）+ React（前端）应用，部署到AWS Beanstalk后出现以下异常：

1. 根URL可加载HTML模板，但静态资源/static/frontend/main.js返回404
2. 访问api/auth/login时抛出TemplateDoesNotExist: rest_framework/api.html错误
3. 初始访问应用URL时曾出现404（当前根URL已可加载模板）

具体错误信息 #

静态文件404详情 #

根URL加载的HTML模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fort</title>
    <link rel="stylesheet" href="https://bootswatch.com/5/cosmo/bootstrap.min.css">
</head>
<body>
    <div id="app"></div>
    {% load static %}
    <script src="{% static "frontend/main.js" %}"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>

请求http://django-env.eba-3.us-west-2.elasticbeanstalk.com/static/frontend/main.js返回404。

API页面模板缺失错误 #

Request Method:     GET
Request URL:    http://django-env.eba-3.us-west-2.elasticbeanstalk.com/api/auth/login
Django Version:     4.0.6
Exception Type:     TemplateDoesNotExist
Exception Value:    

rest_framework/api.html

Exception Location:     /var/app/venv/staging-LQM1lest/lib/python3.8/site-packages/django/template/loader.py, line 19, in get_template
Python Executable:  /var/app/venv/staging-LQM1lest/bin/python
Python Version:     3.8.5
Python Path:    

['/var/app/current',
 '/var/app/venv/staging-LQM1lest/bin',
 '/var/app/venv/staging-LQM1lest/bin',
 '/usr/lib64/python38.zip',
 '/usr/lib64/python3.8',
 '/usr/lib64/python3.8/lib-dynload',
 '/var/app/venv/staging-LQM1lest/lib64/python3.8/site-packages',
 '/var/app/venv/staging-LQM1lest/lib/python3.8/site-packages',
 '/var/app/current/dca']

初始URL路由匹配错误 #

Using the URLconf defined in dca.dca.urls, Django tried these URL patterns, in this order:

    ^api/dcasetting/$ [name='dcasetting-list']
    ^api/dcasetting\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-list']
    ^api/dcasetting/(?P<pk>[^/.]+)/$ [name='dcasetting-detail']
    ^api/dcasetting/(?P<pk>[^/.]+)\.(?P<format>[a-z0-9]+)/?$ [name='dcasetting-detail']
    ^$ [name='api-root']
    ^\.(?P<format>[a-z0-9]+)/?$ [name='api-root']
    api/auth
    api/auth/register
    api/auth/login
    api/auth/user
    api/auth/logout [name='knox_logout']

The current path, index.html, didn’t match any of these.

项目文件夹结构 #

my_app
|-.ebextensions
|-.elasticbeanstalk
|-MyApp
   |-accounts
   |-MyApp
   |-MyAppsett
   |-frontend
   | manage.py
   | db.sqlite3
|-node_modules
| .babelrc
| package-lock.json
| package.json
| pipfile
| pipfile.lock
| requirements.txt
| webpack.config.js

解决方案 #

1. 修复静态文件404问题 #

• 检查Django静态配置：确保settings.py中配置正确：

  STATIC_URL = '/static/'
  STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'frontend/static'),  # 指向React打包后的静态资源目录
  ]
  

• 强制执行collectstatic：在.ebextensions/django.config中添加容器命令，确保部署时收集静态文件：

  container_commands:
    01_collectstatic:
      command: "python manage.py collectstatic --noinput"
      leader_only: true
  

• 验证静态文件存在性：通过SSH登录Beanstalk实例，检查/var/app/current/staticfiles/frontend/main.js是否存在，若不存在，确认本地webpack打包后是否将文件输出到frontend/static/frontend/目录。

2. 修复rest_framework/api.html缺失问题 #

• 确认依赖安装：检查requirements.txt中包含djangorestframework，版本与本地一致；登录实例执行pip list验证包已安装。
• 添加到INSTALLED_APPS：确保settings.py的INSTALLED_APPS列表包含'rest_framework'：

  INSTALLED_APPS = [
      # 其他应用
      'rest_framework',
      'knox',  # 若使用knox做认证，也需添加
      'accounts',
  ]
  

• 清除模板缓存：在实例上执行python manage.py clearcache，然后重启应用。

3. 确保SPA路由正常 #

• 配置Django兜底路由：在项目根urls.py中添加路由，让所有非API请求返回React模板：

  from django.views.generic import TemplateView
  
  urlpatterns = [
      # 所有API路由
      path('api/', include('...')),
      # 兜底路由，返回React入口模板
      path('', TemplateView.as_view(template_name='index.html')),
  ]
  

• 禁用Django的APPEND_SLASH（可选）：若React路由使用无斜杠路径，可在settings.py中设置APPEND_SLASH = False，避免Django重定向导致的路由问题。

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