@dufrein2013

Как правильно работать с изображениями на фронте react JS и на беке express js?

Делаю подобие фотоблога (для себя, учусь) фронт на react js и бэк на express, вопрос в том, как правильно и быстро обрабатывать (например обрезать), сохранять на бэк и обратно получать фото, чтобы не было тормозов.
Сам фотоблог это подобие стены ВКонтакте, т.е. юзер жмет кнопку, выходит окно загрузки фото, а дальше предпросмотр фото и возможность фото обрезать, по типу как окно ВКонтакте

Сейчас я реализовал примитивный функционал: окошко где по нажатию выбираем фотку, а оттуда загружаю её в хранилище amazon s3 и обратно от амазона получаю ссылку, при этом фото по ссылку сразу же не доступно, если пробую его загрузить сразу же, от сервера будет ошибка, если сделаю задержку около пол секунды то фото с амазона придёт нормально, возможно я что-то делаю неправильно. Сам проект хостится на хероку.

Вопросы такие:
1.Правильно ли использовать amazon s3 как хранилище фото и почему может возникать задержка описанная выше?
2. Как вообще правильно загружать большое число фото на стену блога и как их рендерить на react чтобы не было тормозов, т.е. чтобы работало как стена ВК
3. Как правильно сделать окошко предзагрузки и обрезки фото, как это сделано в ВК при смене аватарки, т.е. как и куда грузить сперва фото до его редактирования и сохранения. И есть ли хорошая библиотека для такой задачи?
5e6e187b9995a396791863.png
  • Вопрос задан
  • 758 просмотров
Решения вопроса 1
inoise
@inoise
Solution Architect, AWS Certified, Serverless
Отвечу по части AWS:
1. Использовать S3 это хорошая идея, как и любое другое хранилище
2. Проблема с недоступностью изображения может быть только в одном из двух случаев:
- перезапись объекта при версионировании (тут работает eventual consistency model)
- попытка запросить адрес до загрузки (может закэшироваться)

В нормальный условиях работает strong consistency и все должно работать адекватно
3. Мои рекомендации:
- включить S3 Transfer acceleration для более быстрой загрузки или же AWS CloudFront (местный CDN)
- делать одноразовые ссылки для загрузки изображений из соображений безопасности (S3 signed url)
- наверняка захочется делать ресайз и обработку картинок "на лету", поэтому посмотреть сюда
- вам наверняка захочется это где-то сохранять, пускать туда пользователей, поэтому для аутентификации взять Auth0 или Cognito, а для "бэка" взять AWS API Gateway + lambda. Хранить все можно в DynamoDB.
- ExpressJS может не понадобиться, само приложение можно постить статикой на том же S3
- Иногда AWS становится сложно для новичков и можно взять Firebase
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы