Динамическое подключение статических файлов react в приложении django к ведру AWS S3

Я долгое время работал с приложением django, и теперь мне нужно интегрировать приложение React в этот проект. Я успешно настроил его, но у меня возникают трудности с правильным подключением статических файлов.

Основная проблема заключается в том, что при сборке проекта react он создает путь к CSS и JS файлу, который является абсолютным (<link href="/static/css/main.849502n.css" rel="stylesheet">).

Чтобы изменить этот путь, я попробовал просто добавить опцию homepage в файл package.json "homepage": "../../../myproject/static/reactapp". Затем я скопировал статические файлы из приложения react в папку django-static, добавив в команду сборки: react-scripts build && cp -R build/static/ ../../djangoapp/static/reactapp

Это работает локально, поскольку в разработке я использую статические файлы, хранящиеся в моем приложении. Но в продакшене я сохраняю свои статические активы в AWS bucket. Конфигурация для моего продакшена выглядит следующим образом:

STATIC_URL = "https://%s/%s/" % (AWS_S3_CUSTOM_DOMAIN, AWS_LOCATION)
STATICFILES_DIRS = [os.path.join(BASE_DIR, "djangoapp/static"), os.path.join(BASE_DIR, "frontend/reactapp/build/static")]
STATICFILES_STORAGE = "storages.backends.s3boto3.S3Boto3Storage"
COLLECTFAST_STRATEGY = "collectfast.strategies.boto3.Boto3Strategy"
AWS_STATIC_LOCATION = "static"

Для разработки:

STATIC_URL = "/static/"
STATICFILES_DIRS = [os.path.join(BASE_DIR, "djangoapp/static"), os.path.join(BASE_DIR, "frontend/reactapp/build/static")]
STATICFILES_FINDERS = (
    "django.contrib.staticfiles.finders.FileSystemFinder",
    "django.contrib.staticfiles.finders.AppDirectoriesFinder",
)

Структура моего проекта:

- djangoapp
  - frontend
    - reactapp
  - djangoapp
    - static
      - reactapp 
        - css
        - js
        - media

Я не могу понять, как правильно это настроить. За помощь буду очень признателен. Заранее спасибо

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