Как обслуживать статические файлы (например, изображения) в комбинированном приложении django-react

Это первое веб-приложение, которое я разрабатываю, сочетая django и react, на самом деле react - новинка для меня. Пожалуйста, если мой подход неверен, я открыт для исправлений. При разработке исключительно на django, я не нахожу трудностей со статическими и медиа файлами. Как я понимаю, речь идет о таких элементах, как media root и static root, соответственно. В таком случае мне достаточно указать корень static/media в файле settings.py в приложении django, как показано ниже:

settings.py

STATIC_ROOT =  os.path.join(BASE_DIR, 'staticfiles')  
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL =  '/media/images/'

urls.py

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Однако, когда я объединяю django и react, конфигурация меняется, поскольку django настроен на просмотр файла index.html в react, и в этом случае дополнительный элемент под названием STATICFILES DIRS добавляется в файл seetings.py для указания пути к файлу react index.html. На самом деле, моя конфигурация django app выглядит следующим образом, когда я объединяю django и react:

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/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL =  '/media/images/'

urls.py

urlpatterns = [
    ...
    re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
        + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

TEMPLATES = [
    {
        ...
        'DIRS': [os.path.join(BASE_DIR, 'build')],
    ...
]

Все работает хорошо, как при разработке чисто на django, за исключением того, что когда я комбинирую django и react в разработке изображения, которые я загружаю, отказываются отображаться в браузере, т.к. любой путь, который совпадает с указанными путями, перенаправляется в браузер. в браузере, так как любой путь, который не совпадает с указанными путями в urlpattern, перенаправляется на react. re_path(r'^.*', TemplateView.as_view(template_name='index.html')) Итак, путь к изображению перенаправляется. Когда я нажимаю на ссылку изображения в файле администратора, вместо того, чтобы изображение отображается, я также перенаправляюсь на react. Я провел исследование в Интернете, но не смог найти ни одного ресурса. которые бы объясняли, как правильно настроить статический корень django и корень media, чтобы иметь возможность обслуживать файлы ( например, изображения, загруженные в базу данных) контент. Что мне нужно сделать для отображения изображений и медиа в браузере? В продакшене я хотел бы обслуживать статические файлы из приложения django-react app с aws s3 bucket, и мои static и media root будут заменены на следующие:

AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
AWS_STORAGE_BUCKET_NAME = os.getenv('AWS_STORAGE_BUCKET_NAME')
AWS_DEFAULT_ACL = None  #'public-read'
AWS_S3_CUSTOM_DOMAIN = f'{AWS_STORAGE_BUCKET_NAME}.s3.amazonaws.com'
AWS_S3_OBJECT_PARAMETERS = {'CacheControl': 'max-age=31536000'}
AWS_LOCATION = 'static'
STATIC_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{AWS_LOCATION}/'
STATICFILES_STORAGE = 'core.storage_backends.StaticStorage'
PUBLIC_MEDIA_LOCATION = 'media'
MEDIA_URL = f'https://{AWS_S3_CUSTOM_DOMAIN}/{PUBLIC_MEDIA_LOCATION}/'
DEFAULT_FILE_STORAGE = 'core.storage_backends.MediaStorage'

Причина, по которой я добавил этот аспект aws s3, заключается в том, что я хочу получить решение, которое будет применимо как на уровне разработки, так и на уровне производства.

Вернуться на верх