Django+React项目部署到Azure App Service后静态文件404错误求助

问题根因 #

你遇到的404错误核心是React打包后的静态资源没有被Django正确收集和托管，共有3处需要修正：

具体修复步骤 #

1. 调整Django配置 #

修改settings.py

import os

# 静态文件配置修正为绝对路径，避免相对路径识别异常
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static"),
    os.path.join(BASE_DIR, "frontend", "build", "static"), # 新增：指向React打包后的静态资源目录
)

# 如果你用Django渲染React的入口index.html，同步修改模板搜索路径
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'frontend', 'build')], # 新增build目录到模板搜索路径
        # 其余原有配置保持不变
        'APP_DIRS': True,
        'OPTIONS': {
            ...
        },
    },
]

# 新增whitenoise中间件到MIDDLEWARE列表的最顶部，用于生产环境托管静态文件
MIDDLEWARE = [
    'whitenoise.middleware.WhiteNoiseMiddleware',
    # 其余原有中间件保持不变
    ...
]

依赖配置

把whitenoise添加到你的requirements.txt文件中，Azure部署时会自动安装该依赖。

2. 修正CI工作流配置 #

你的现有工作流存在两处隐性问题：

1. 虚拟环境激活不生效：每个run步骤是独立shell会话，单独执行source venv/bin/activate不会对后续步骤生效，合并到依赖安装步骤即可。
2. 可新增打包路径校验，确认React静态资源被正确收集。

修改后的build阶段对应步骤如下：

- name: Install dependencies
  run: |
       python -m venv venv
       source venv/bin/activate
       pip install -r requirements.txt
       python manage.py collectstatic --noinput
       # 可选：打印收集到的静态文件列表，构建日志中可校验是否包含React的js、css文件
       ls staticfiles

# 删除原独立的「创建和启动虚拟环境」步骤

3. 对齐React静态资源路径 #

如果修改完上述配置后仍然404，检查React打包后index.html中引用的静态资源路径是否和Django的STATIC_URL对齐，可通过两种方式配置：

• 在React项目的package.json中新增配置项："homepage": "/static"
• 或者修改CI中的React打包命令为：PUBLIC_URL=/static npm run build --if-present

可选校验方案 #

部署完成后可进入Azure Web App的SSH控制台，查看site/wwwroot/staticfiles目录下是否存在对应的main.js、index.css文件：

• 如果文件存在仍404，在项目根urls.py的urlpatterns末尾添加静态文件路由：

  from django.conf import settings
  from django.conf.urls.static import static
  
  urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
  

• 如果文件不存在，回到GitHub Actions的构建日志，检查collectstatic步骤的输出，确认React打包后的文件被正确扫描。

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