Как заставить развернутое приложение react (в s3) использовать данные JSON, которые отбрасываются в корзину s3?

#reactjs #json #amazon-s3 #next.js

#reactjs #json #amazon-s3 #next.js

Вопрос:

Я пытаюсь создать статическое приложение React, которое отображает документацию api. Для серверной части я использую swagger (размещенный отдельно в lambda), который генерирует модель данных JSON. После создания новых конечных точек у меня есть лямбда-выражение, которое предоставит мне подробную информацию о конечной точке, такую как заголовки, запросы и ответ. Данные поступают в формате JSON, который отбрасывается в корзину s3. Может ли мое приложение react, развернутое в том же ведре, использовать этот json и отображать недавно добавленные детали документации api? Мне нужна помощь по тому же вопросу без серверной части узла?

Вот пример того, что я пытаюсь создать

  1. Приложение react с кулинарными рецептами развертывается статически, размещенное в s3.
  2. Квитанции для этого приложения находятся в модели JSON, которая является общей для любых поступающих квитанций
  3. Это приложение находится в корзине AWS s3.
  4. Новый администратор должен быть добавлен в мое приложение. Но мое приложение уже создано и размещено.
  5. Могу ли я создать свое приложение таким образом, чтобы, если я удалю какие-либо новые файлы JSON, оно использовало бы этот файл и отображало / обновляло его интерфейс без сервера в S3?

Ответ №1:

Учитывая, что ваше приложение статически размещено в S3, вам придется написать JS-код на стороне клиента, чтобы проверить наличие новых рецептов.

Вы можете вызвать свой лямбда-код со стороны клиента, чтобы получить конечную точку и отправить запрос на получение всех рецептов. Если путь к папке в S3 известен, вы можете выполнить эту проверку без использования лямбда.

Таким образом, ваше приложение обновит интерфейс без сервера при добавлении нового файла JSON.

Комментарии:

1. Итак, лучшим способом было бы создать api-шлюз с лямбдой, где файлы будут обслуживаться через конечную точку, из которой приложение react будет использовать вызов useEffect (fetch) для этого api?

2. Да, это лучший способ сделать это на основе требований, которые вы описали.

Ответ №2:

После некоторых исследований я обнаружил, что вы можете удалить все свои файлы JSON в общедоступной папке в приложении React. Файлы в этой папке не будут изменены. Таким образом, вы можете получить к ним доступ в своем компоненте react с помощью крючка react useEffect. Вот справочная статья, из которой я взял эту реализацию.

Как добавить статические файлы JSON в приложение React после развертывания