Как начать использовать 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

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

0hzGqiYVSrZev8ogQPbGuw7yIa6K4VZWCgSq

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

firebase init
l8Egdd07uOmSD9DABh0yGz2afrukibewdZWa
инициализация Firebase

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

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

6J2TVueoEKaBSPIjJz6UvpZkLNNobMfBNmU9

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

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

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

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

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

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

5NL3xuH0FsPqFq2whtP0QI6GL4tZIeyZLKa-

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

Программа 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 неделю.

Опубликовать сайт

Когда вы будете готовы опубликовать сайт, просто запустите следующую команду, и Firebase позаботится обо всем.

firebase deploy

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

Специальный домен

Следующим логическим шагом является создание для вашего сайта специального домена.

Выделите project/_/hosting/main и нажмите кнопку «Подключить домен»:

OktJ0asSC0uVphJs2HCoqYIrz3FvRD7yKKRA

Мастер запросит у вас имя домена, а затем предоставит запись TXT, которую нужно добавить в панель DNS хостинга, чтобы проверить домен.

Если домен совершенно новый, может потребоваться некоторое время, прежде чем вы можете пройти этот шаг.

Как только это будет сделано, интерфейс даст вам два А записи также добавить в панель DNS хостинга.

Если вы настроили yourdomain.comне забудьте также настроить www.yourdomain.com сделав это перенаправлением.

GCq9sjxSfJ1Jvw1JsZAVLjlF2EnJS213a4IH

Теперь вам просто нужно дождаться, пока ваш хостинг обновит записи DNS и очистит кэш DNS.

Кроме того, имейте в виду, что сертификат SSL предоставляется автоматически, но для его действия требуется некоторое время.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *