Как бесплатно разместить статический веб-сайт на хостинг Firebase от Google

Если у вас есть простой статический веб-сайт, и вы хотите разместить его на бесплатном хостинге, эта статья будет вам полезна. В ней мы рассказали, как бесплатно разместить статический веб-сайт в Google Firebase, и рассмотрели все возможности и преимущества этого инструмента.

Как понять, что мой сайт статический 

Статический сайт — сайт, который состоит только из статичных (неизменяемых) страниц. Это означает, что внешний вид сайта и его наполнение всегда одинаковы для всех посетителей. И это вовсе не значит, что такой ресурс похож на сайты из 90-х — с голой структурой без дизайна и без вёрстки. Как и любой сайт, он может содержать изображения, текст, видео, аудио и другие элементы. Главное отличие лишь в том, что для отображения этих файлов и тегов достаточно HTML-разметки. 

Если пользователь хочет перейти на статический сайт, сервер сразу передает браузеру готовый HTML-файл ровно в том виде, в котором тот был создан разработчиком. Для динамических сайтов процесс устроен несколько иначе: когда сервер находит нужный файл, он сначала отправляет его интерпретатору, который применяет языки программирования (Java, PHP, ASP). Только после этого сайт отображается в браузере в том виде, в котором был задуман.

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

Преимущество статического сайта в том, что для него не нужно устанавливать и настраивать веб-сервер (например, Apache или NGINX). К тому же существуют провайдеры, которые предлагают бесплатный хостинг статических страниц для размещения проектов из облачных хранилищ. Один из таких ресурсов — Google Firebase.

Что такое Firebase от Google

Прежде чем говорить о хостинге, узнаем, что такое Firebase и откуда появилась эта платформа. 

Компания была основана в 2011 году Джеймсом Тэмплином и Эндрю Ли. Firebase начинали с поставки облачных технологий, в том числе, СУБД (систем управления базами данных) класса NoSQL. Такие базы позволяли не только хранить, но и синхронизировать данные между несколькими клиентами. 

Первым продуктом, который запустили Firebase, стала база данных Realtime. Её API (алгоритм по которому одна компьютерная программа взаимодействует с другой) позволяло интегрировать онлайн-чаты на сайты, а также синхронизировать данные приложений на Android, iOS и Web. В 2014 году Firebase выпустила новый продукт — хостинг. В том же году компанию поглотила корпорация Google. А уже в 2015-м интернет-гигант присоединил к проекту ещё и Divshot — платформу веб-хостинга для размещения статических веб-сайтов (HTML5). 

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

Преимущества программы:

• скорость: быстрый деплой (развертывание программного обеспечения);
• гибкость: работа на Python и JavaScript;
• синхронизация: вход в систему с помощью учетной записи Google;
• работа без настройки и подключения сервера: не придется создавать базы данных, прописывать API приема и получения данных — за серверную часть отвечает платформа. 

Благодаря этому не нужно отвлекаться на настройку и установку — можно сосредоточиться на качестве продукта. 

Недостатки платформы:

• неполный функционал в бесплатной версии: Firebase — это не полностью бесплатный продукт. Если вы хотите использовать дополнительный функционал и мощные инструменты, придется выбрать платный тариф. Полный список возможностей на официальном сайте.

Сейчас Firebase входит в список лучших платформ для разработки приложений, которым доверяют разработчики по всему миру. С Firebase работают: The New York Times, Alibaba, Todoist, eBay Motors и другие компании. Если вы тоже хотите стать клиентом Firebase, переходите к размещению своего проекта.

Как бесплатно разместить сайт на Firebase-хостинге

Чтобы разместить статический сайт на хостинге Firebase, выполните три шага:

1. Создайте новый проект в консоли Firebase.
2. Разверните сайт через командную строку CLI Firebase.
3. Привяжите домен к хостингу в консоли.

Шаг 1. Создайте новый проект в Firebase

1. Авторизуйтесь в аккаунте Google или создайте новый аккаунт.
2. Создайте новый проект. Для этого перейдите в консоль и нажмите Create a project: 

3. Введите название проекта, поставьте галочку напротив «I accept the Firebase terms» и кликните Continue:

4. Затем нажмите Continue:

5. Выберите нужную страну из списка, поставьте галочку напротив «I accept the Google Analytics terms» и нажмите Create project:

6. После загрузки кликните Continue:

Готово, вы создали новый проект:

Шаг 2. Разверните сайт на хостинге Firebase

1. Установите на ПК интерфейс командной строки CLI Firebase. Для этого скачайте бинарный файл интерфейса из официальной инструкции: 

2. После того, как файл скачается, перенесите его в папку с файлами вашего сайта на ПК.
3. Запустите командную строку CLI Firebase из папки.
4. В пункте «Allow Firebase to collect CLI usage and error reporting information?» введите Yes:

В интерфейсе появится следующее сообщение:

Затем вас автоматически перекинет на страницу входа в Google-аккаунт в браузере. Для перехода в приложение «Firebase CLI» выберите нужный аккаунт:

5. Разрешите приложению «Firebase CLI» доступ к вашему Google-аккаунту:

После этого в браузере появится сообщение «Firebase CLI Login Successful» (Вход в Firebase CLI выполнен успешно), а в командной строке вы увидите следующий результат:

6. Введите команду firebase init:

7. Затем в строке «Are you ready to proceed?» введите Yes:

8. Стрелкой вниз пролистайте до строки «Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys», нажмите на пробел, а затем кликните Enter: 

9. Затем стрелкой вниз пролистайте до пункта «Use an existing project» и кликните Enter:

10. После того как подгрузится информация о проекте, который вы создали на первом шаге, поэтапно введите команды:

• для «What do you want to use as your public directory?» — public;
• для «Сonfigure as a single-page app (rewrite all urls to /)» — No;
• для «Set up automatic builds and deploys with GitHub?» — No;

Если всё пройдёт успешно, вы увидите сообщение «Firebase initialization complete!»:

11. Введите команду firebase deploy и дождитесь результата. Если развертывание проекта пройдет успешно, в строке «Hosting URL» вы увидите адрес, который заканчивается на .web.app:

Готово, вы создали проект и развернули его. 

Также вы можете создать ещё один проект сразу через командную строку. Для этого введите в интерфейсе команду firebase logout и удалите бинарный файл из папки с проектом. Затем вновь скачайте файл и поместите в папку с новым проектом. Запустите CLI и выполните с 3 по 8 шаг второго этапа инструкции. На шаге 9 выберите вариант «Create a new project», задайте уникальный id, как показано в примере, и укажите название проекта. После этого выполните шаги 10 и 11.

Теперь посмотрим, как запустить сайт в интернете — без хостинга, к которому привязан домен, он не будет работать.

Шаг 3. Добавьте домен на хостинг Firebase 

Если у вас ещё нет домена, его можно купить в REG.RU. Наши инструкции помогут выбрать и зарегистрировать доменное имя.

1. Перейдите в консоль Firebase и кликните Get started. Затем авторизуйтесь в своём аккаунте:

2. Выберите проект, который вы создали на первом этапе:

3. В разделе «Build» выберите Hosting:

4. Нажмите Add custom domain:

5. Введите домен, который хотите привязать к хостингу и кликните Continue:

6. Скопируйте TXT-запись и добавьте её в ресурсные записи своего домена. Если ваш домен зарегистрирован в REG.RU, используйте инструкцию Настройка ресурсных записей в Личном кабинете. 

Обратите внимание: Дождитесь добавления TXT-записи в зону домена. В зависимости от вашего регистратора, это может занять от 15 минут до 24 часов. Проверить, добавилась ли запись, поможет утилита dig: укажите домен, выберите нужный тип записи и кликните Проверить.

После того, как TXT-запись добавится в зону, нажмите Verify, чтобы подтвердить домен:

7. Скопируйте предложенный IP-адрес и добавьте А-запись в ресурсные записи вашего домена. Если ваш домен зарегистрирован в REG.RU, используйте инструкцию Настройка ресурсных записей в Личном кабинете. 

Обратите внимание: 

• Перед добавлением новой записи удалите все старые А-записи.
• Дождитесь добавления А-записи в зону домена. В зависимости от вашего регистратора, это может занять от 15 минут до 24 часов. Проверить, добавилась ли запись, поможет утилита dig: укажите домен, выберите нужный тип записи и кликните Проверить.

После того, как А-запись добавится в зону, нажмите Finish:

Готово, вы настроили бесплатный хостинг для домена. Дождитесь обновления DNS-серверов в течение 24 часов — после этого ваш сайт будет доступен в интернете.

Если вы захотите модифицировать проект, перейдите в папку с файлами на ПК и внесите изменения прямо в код. Затем запустите СLI и введите команду firebase deploy — изменения появятся на сайте в течение минуты.

⌘⌘⌘

Теперь вы понимаете, в чём преимущество Firebase-платформы, знаете, как разместить свой сайт на Google hosting, и в любой момент сможете приступить к разработке проекта. И не забывайте, что зарегистрировать красивый и лаконичный домен для проекта всегда можно в REG.RU.