Как отправлять большие файлы с веб-формы на сайте в облачное хранилище S3, используя асинхронный способ?

Как можно ускорить процесс загрузки больших видео файлов размером примерно 2G на бакет yandex.cloud без длительного ожидания отправки формы/запроса? Наше приложение использует vue + laravel, и мы уже пробовали использовать axios для отправки POST запросов на laravel backend, а затем на aws/s3, что занимает около 15 минут. Мы также пробовали отправлять форму напрямую на облако без сервера, но это также занимает примерно 15 минут. Как можно реализовать механизм быстрой фоновой загрузки, чтобы пользователи могли продолжать взаимодействие со страницей и загружать следующее видео, не переживая за длительные задержки? Мы хотели бы избежать значительной нагрузки на backend. Если у вас есть идеи или рекомендации по изменению подхода, мы будем благодарны за советы.
  • 18 января 2024 г. 18:32
Ответы на вопрос 2
Отправка больших файлов может быть непростой задачей, особенно если вы хотите ускорить процесс и минимизировать нагрузку на сервер. Вот несколько подходов, которые вы можете использовать для оптимизации загрузки больших файлов в облако:

1. Использование Pre-Signed URL:
   Вы можете сгенерировать предварительно подписанный URL на стороне backend (например, с помощью Laravel), который предоставляет ограниченный доступ для загрузки файла напрямую в ваш S3-совместимый сервис (Yandex Cloud в вашем случае) без промежуточной загрузки на ваш сервер. Этот URL можно использовать с клиента для осуществления загрузки.

2. Многопоточная и частичная загрузка:
   Рассмотрите возможность разделения файла на части и параллельной загрузки этих частей в бакет. Как только все части будут загружены, вы можете объединить их в облачном хранилище. Многие SDK облачных провайдеров поддерживают такую функциональность "из коробки".

3. Асинхронная загрузка ресурсоёмких задач:
   Асинхронное выполнение поставленной задачи на стороне сервера возможно с использованием очередей задач, таких как Laravel Queues, Redis, Amazon SQS и другие. Пользователь может продолжать работу, пока сервер обрабатывает загрузку в фоновом режиме.

4. Оптимизация подключения:
   Обеспечьте, чтобы ваш сервер располагался в одном регионе с облачным хранилищем для минимизации задержек при загрузке. Также используйте протоколы сжатия данных при передаче, если это возможно.

5. Client-side JavaScript Libraries:
   Используйте на стороне клиента JavaScript-библиотеки, которые специально предназначены для загрузки файлов, например, FineUploader или Uppy. Эти библиотеки предлагают богатый набор функций для загрузки, включая дробление файлов, ретраи (повторные попытки загрузки), ограничения скорости и т.д.

6. Интеграция с frontend:
   На стороне вашего приложения Vue.js реализуйте отображение прогресса загрузки и возможность для пользователя продолжать использовать приложение во время этой загрузки. Чтобы не перегружать основной поток, загрузку можно делать, например, в Web Worker.

7. Специализированные сервисы:
   Воспользуйтесь сторонними решениями как Cloudflare Stream или AWS Elemental MediaConvert, которые могут ускорить загрузку и обработку больших видеофайлов.

8. Рост загрузки:
   Стимулируйте пользователей загружать данные в период низкой нагрузки на сеть, предоставляя бонусы или меньшие стоимости услуг в эти периоды.

Заметьте, что скорость загрузки больших файлов всё же будет зависеть от многих факторов, включая скорость интернет-соединения пользователя, загруженность серверов, аппаратных и сетевых ограничений. Следует также учитывать безопасность при передаче и хранении файлов
Чтобы пользоваться сайтом и не прерывать загрузку, вы должны реализовать интерфейс с применением Ajax. Как только с этим разберетесь, все встанет на свои места. Примерно тоже самое, что разного рода онлайн-плееры.
Похожие вопросы