Рубрики
Без рубрики

Как я чуть не выпустил свой 10 ГБ ежемесячный лимит загрузки из моей базы данных за 2 дня

TL; DR: Слишком много загрузок делалось из моей базы данных (из -за невежества и многих плохих де … с меткой React, Firebase, JavaScript, WebDev.

TL; DR: Слишком много загрузок было сделано из моей базы данных (из -за невежества и многих плохих решений), которые почти достигли моего свободного ежемесячного лимита 10 ГБ всего за 2 дня.

Привет, мир! Это мой первый пост, так что я немного нервничаю, но вот забавная история, которую я думал, с которой все начну. Я только что углубился в использование Firebase, поэтому я очень не знал во многих вещах.

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

Поскольку я уже использовал базу данных Firebase в реальном времени для хранения некоторых данных, я решил просто временно сохранить изображения. Это была моя первая ошибка. Моя вторая ошибка заключалась в том, чтобы поделиться ссылкой на приложение с моей семьей, думая, что это поможет мне посмотреть, будет ли сайт удобен для пользователя. Будьте осторожны с тем, что вы хотите 🤷🏻

Небольшой фон о том, как настроено мое приложение.

  • Домашняя страница, которая отображает все сообщения.
    • Каждый пост состоит из названия и тела, и показывает аватар автора.
  • Страница, которая позволяет создавать новый пост.
  • Страница профиля, которая отображает сообщения пользователя вместе с большим изображением их аватара. При входе в систему ваш профиль имеет ссылку, которая позволяет вам редактировать ваше имя пользователя и аватар.
  • Навигационная панель, которая отображает текущий аватар пользователей.

Поэтому я получил предупреждение от Firebase 10 сентября, в котором говорилось, что моя база данных в реальном времени была в 8,8 ГБ , и что у меня было только 1,2 ГБ Стоимость загрузки осталась до конца месяца.

Вот два основных фактора, которые вызвали это:

  • Я хранил пользовательские аватары в Base64, что приводит к большему размеру файла. Это означало, что его загрузка из базы данных заняло больше времени и съесть больше моих выделенных загрузок.
  • Каждый раз, когда был отображался аватар, я делал новую прибыль в базу данных и нигде не хранил его. Таким образом, каждый раз, когда пользователь посещает домашнюю страницу, в базе данных производится новый вызов, чтобы загрузить все аватары, которые отображаются в каждом посте.

Допустим, каждый аватар изначально составляет 170 КБ, который загружается в базу данных в качестве BASE64, поэтому размер изображения теперь составляет 225 КБ. Это не кажется слишком плохой. Но если на домашней странице есть 30 сообщений, 30 аватаров загружаются из базы данных, так что 30 *. Все еще не кажется слишком плохой, но Lemme приведет вам пример, чтобы узнать, как я замутил базу данных в реальном времени.

Давайте следим за типичным пользователем, когда он зарегистрируется и ориентируется на мое приложение.

Пользователь впервые посещает мой сайт. Они отправляются на домашнюю страницу, где в каждом посте загружаются 30 постов и 30 аватаров. Это загрузки на 6750 КБ. Этот пользователь решает создать учетную запись, которая впоследствии перенаправляет их обратно на домашнюю страницу. 6750 +, 500 КБ. Они перейдут на страницу своего профиля, чтобы изменить свой профиль, а затем снова решить проверить ленту домашней страницы, и все 30 аватаров снова загружаются. 13 500 +, 250 КБ. Они решают написать пост, а затем перенаправлены на домашнюю страницу. Опять +6750. Наша общая сумма в настоящее время составляет 27 000 кб, что составляет 0,027 ГБ. Это все еще не кажется слишком плохой, но не забывайте это Это только один пользователь.

Если в моем приложении зарегистрировано 20 человек, и все они ориентируются на мое приложение, как в моем примере, это 20 *, 000 кб. Не говоря уже о том, что это только одна сессия! Так что, если все 20 человек посещают мое приложение 4 раза в день (это желаемое мышление 🥺), это 2160 000 000 КБ, или 2,16 ГБ В течение одного дня!! Не забывайте, что весь этот пример предполагает, что изображения все 225 КБ каждый. 😱 К счастью, моя дорогая семья решила сделать несколько учетных записей и загрузить огромные изображения в штаб -квартире, ха -ха.

Но самое главное, так как я работаю над этим приложением каждый день каждый день, я использую его больше всего. 😭 На данный момент у меня нет отдельных баз данных для разработки/производства. Кроме того, я использую WebPack-Dev-Server, поэтому приложение было освежающим каждый раз, когда я сохранял файл. Все это время делая реальные вызовы в базу данных, чтобы сделать загрузки.

В любом случае, вот как я решил эту проблему 😊

  • Самое главное, что я сейчас использую хранилище Firebase для изображений, а база данных в реальном времени предназначена исключительно для хранения имен пользователей и публикации информации.
  • Я больше не храню изображение в Base64, вместо этого используя исходный формат файлов.
  • После того, как аватар загружен, я храню его URL -файл хранения Firebase в Redux, поэтому изображение загружается из Redux Store в следующий раз, когда его нужно отобразить.

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

  • Позвольте пользователям обрезать свое изображение, а затем шаг дальше будет каким -то образом сжатие изображения. Только тогда он будет загружен в хранилище.
  • Сохраняет штат Рукса в местное хранилище. Если вы посетите домашнюю страницу, все URL -адреса аватаров загружаются и сохраняются в магазине Redux. Это работает только во время одного сеанса. Если вы обновите страницу или снова посетите мое приложение в другой раз, магазин будет сброшен, и все URL -адреса необходимо снова загрузить из базы данных. Сохранение состояния в местном хранении браузера исправляет это. В следующий раз, когда вы посетите мое приложение в блоге, браузер вспоминает, какие данные уже загружены.

В любом случае, это завершает мою первую большую производственную ошибку. Дрожаясь, чтобы нанести контроль повреждения, чтобы моя база данных не была закрыта до конца месяца. 😅 К счастью, с тех пор, как я перешел на хранилище Firebase и хранение URL -адресов изображения в Redux/Local Storage, моя база данных в реальном времени по -прежнему показывает, что у меня осталось 1,2 ГБ. Надеемся, что это означает, что мое приложение все еще будет запущено до конца сентября!

Оригинал: “https://dev.to/shaerins/how-i-almost-maxed-out-my-10gb-monthly-limit-of-downloads-from-my-database-in-2-days-efc”