Django与React结合项目中如何服务图片等静态及媒体文件

问题根源 #

路由匹配顺序错误导致媒体/静态资源请求被React万能路由拦截，同时settings.py存在重复的MEDIA_URL配置项冲突。

开发环境修复方案 #

1. 调整urls.py路由顺序 #

Django路由按照从上到下的优先级匹配，需将React万能匹配路由放在所有路由的最后，开发环境的静态/媒体路由要放在万能路由之前：

urls.py
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, re_path
from django.views.generic import TemplateView

urlpatterns = [
    # 优先放Django原生路由：后台、API接口、认证相关路由等
    path('admin/', admin.site.urls),
    path('api/', include('你的api应用.urls')),
]

# 开发环境的静态、媒体资源路由放在中间位置
if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

# React万能匹配路由放在最后，仅当前面所有路由都匹配失败时才触发
urlpatterns += [
    re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]

2. 修正settings.py重复配置 #

删除重复定义的MEDIA_URL，保留一个即可：

settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
# 保留你需要的MEDIA_URL即可，二选一删除
MEDIA_URL =  '/media/images/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

TEMPLATES = [
    {
        # 其他原有配置
        'DIRS': [os.path.join(BASE_DIR, 'build')],
    }
]

生产环境AWS S3配置指导 #

1. 安装依赖 #

pip install django-storages boto3

2. 新增settings.py配置 #

# 加入storages应用
INSTALLED_APPS = [
    # 其他原有应用
    'storages',
]

# AWS S3基础配置
AWS_ACCESS_KEY_ID = '你的AWS访问密钥ID'
AWS_SECRET_ACCESS_KEY = '你的AWS访问密钥'
AWS_STORAGE_BUCKET_NAME = '你的S3桶名称'
AWS_S3_REGION_NAME = '桶所属区域，例如ap-northeast-1'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.{AWS_S3_REGION_NAME}.amazonaws.com'
AWS_S3_FILE_OVERWRITE = False
AWS_DEFAULT_ACL = None

# 静态文件S3配置
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/static/'
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

# 媒体文件S3配置
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/media/'
DEFAULT_FILE_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'

生产环境无需保留DEBUG模式下的静态/媒体路由配置，所有静态、媒体资源会直接从S3加载，Django仅负责处理API、后台路由，剩余未匹配请求返回React的index.html即可。

内容的提问来源于stack exchange，提问作者C-Bizz