Как начать использовать Firebase Hosting

1656681249 kak nachat ispolzovat firebase hosting

Содержание статьи

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Firebase – это платформа для разработки мобильных и веб-приложений, разработанная компанией Firebase, Inc. в 2011 году. В 2014 году Google приобрела ее и объединила в службу Google Cloud. Теперь это флагманский продукт Google Cloud.

Firebase – это сложный и комплексный продукт, ориентированный преимущественно на мобильные приложения.

Одной из его менее известных функций, которую мы обсудим в этой статье, является расширенная служба веб-хостинга Firebase.

Функции хостинга Firebase

Firebase Hosting предоставляет хостинг для статических веб-сайтов, таких как

сайтов, которые можно создать с помощью генераторов статических сайтов
сайты, созданные с помощью серверных платформ CMS, с которых вы создаете статическую копию веб-сайта

Вы можете размещать что угодно, если это не динамично. К примеру, блог WordPress почти всегда является хорошим кандидатом стать статическим сайтом, если вы используете комментарии Disqus или Facebook.

Firebase Hosting доставляет файлы через Fastly CDN, используя HTTPS и предоставляет автоматический сертификат SSL с поддержкой своего домена.

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

Почему следует использовать Firebase Hosting?

Firebase может быть хорошим выбором для развертывания статических веб-сайтов и одностраничных программ.

Мне нравится использовать Firebase Hosting главным образом потому, что я протестировал много разных провайдеров, и Firebase предлагает потрясающая скорость в нескольких географических местах без необходимости отдельного CDN сверху, поскольку CDN является встроенным бесплатно.

Хотя собственный VPS является очень хорошим вариантом, накладные расходы на управление собственным сервером для простого сайта просто не стоит. Я предпочел бы сосредоточиться на содержимом, а не на операциях, так же, как я бы развернул приложение на Heroku.

Firebase даже легче настроить, чем Heroku.

Установите инструмент Firebase CLI

Установите Firebase CLI с помощью

npm install -g firebase-tools

или

yarn global add firebase-tools

Пройдите аутентификацию с помощью аккаунта Google (я предполагаю, что у вас уже есть аккаунт Google), запустив

firebase login

Создайте проект в Firebase

Выделите и создайте новый проект.

Теперь в консоли запустите следующее из корневой папки сайта, на котором вы работаете:

firebase init

l8Egdd07uOmSD9DABh0yGz2afrukibewdZWa — инициализация Firebase

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

Теперь вам нужно выбрать проект, в котором вы хотите развернуть сайт.

Выберите «Новый проект».

Теперь вы выбираете, какая папка содержит статическую версию вашего сайта. Например, public.

Вам будут предложены два вопроса по конфигурации программы. Ответить «Нет” им обоим:

Настроить как одностраничную программу (переписать все URL-адреса на /index.html)?
Файл public/index.html уже существует. Перезаписать?

Это не позволит Firebase добавить свой файл index.html по умолчанию.

Теперь все готово:

Настроить сайт

Программа Firebase CLI создала firebase.json файл в корневой папке сайта.

В этой статье я рассказываю, как настроить простую функцию Firebase Hosting, добавив небольшой фрагмент конфигурации в firebase.json файл.

Я хочу установить директиву заголовка Cache-Control для всех ресурсов сайта – изображений, CSS и JS.

Чистый firebase.json файл содержит следующее:

{   "hosting": {    "public": "public",     "ignore": [       "firebase.json", "**/.*",       "**/node_modules/**"     ]   } }

Он сообщает Firebase, где находится содержимое сайта и какие файлы он должен игнорировать. Не стесняйтесь добавить все папки, которые у вас есть, кроме public.

Мы собираемся добавить туда новое свойство под названием headers:

{   "hosting": {     "public": "public",     "ignore": [       "firebase.json",      "**/.*",       "**/node_modules/**"    ],     "headers": [       {         "source" : "**/*.@(jpg|jpeg|gif|png|css|js)",         "headers" : [ {           "key" : "Cache-Control",           "value" : "max-age=1000000" //1 week+         } ]       }     ]   } }

Как видите, мы сообщаем это всем файлам, которые заканчиваются на jpg|jpeg|gif|png|css|js Firebase должно применить Cache-Control:max-age=1000000 директива, которая означает, что все ресурсы кэшируются более чем на 1 неделю.