Хостинг с помощью платформы Firebase

[EdKen]

​

---

​

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

В этой теме мы обсудим следующие вопросы:

• Создание проекта на платформе;
• Установка сопутствующих инструментов;
• Отправка сайта на хостинг.

Для начала создадим наш проект, перейдя на страницу

Please, Log in or Register to view URLs content!

, зарегистрировавшись через аккаунт Google, или авторизовавшись через него.

Главная страница Firebase
​

Нажимаем на кнопку "Get started" и переходим на следующую страницу:

Страница проектов
​

Создадим новый проект, нажав "Create a project":

Настройка проекта "Название"​

Вводим название проекта (от него зависит внешний вид ссылки, имейте это в виду), после этого настраиваем аналитику нашего проекта, это всё опционально, но обычно я использую следующие настройки:

Настройка проекта "Аналитика"
​

Ждём создание проекта и теперь перед нами главная страница проекта, на ней в боковом меню выбираем "Hosting", он находиться в вкладке "Build" (На момент создания темы):

Главная страница проекта​

Здесь нам нужно добавить хостинг в наш проект, нажатием на "Get started":

Страница хостинга
​

Здесь нас просят поставить Firebase CLI, для этого нам нужен

Please, Log in or Register to view URLs content!

(скачиваем и устанавливаем в зависимости от совей платформы):

Страница скачивания node.js
​

После скачивания и установки node.js нам нужно запустить PowerShell или Cmd (что вам удобней). Для проверки установки node.js используется команда node -v:

Проверка установки, путём получения версии
​

Теперь мы можем провести процесс установки Firebase CLI, введя команду npm install -g firebase-tools:

Процесс установки
​

После этого нам нужно войти в свой аккаунт, попробовав ввести команду firebase login:

Ошибка вовремя входа
​

Если у вас вылезла эта ошибка, не пугаемся, а вводим команду Get-ExecutionPolicy unrestricted , после чего вводим "Y"и нажимаем "Enter":

Исправление политики выполнения скриптов​

Теперь пробуем ещё раз войти в Firebase:

Запрещаем сбор информации о использовании CLI (Опционально)​

После этого нас перебрасывает в браузер, где входим свой аккаунт и разрешаем его использовать:

Вход в аккаунт​

После этого браузер можно закрыть и снова вернуться в командную строку (в моём случае PowerShell), где нас поздравляют с удачным входом:

Сообщение о удачном входе
​

Теперь мы можем снова воспользоваться командной строкой или перейти в редактор кода (если он поддерживает терминал). Я буду использовать

Please, Log in or Register to view URLs content!

. Нам нужно перейти в каталог с нашим сайтом и подняться из него вверх прописав cd..:

• Firebase\Hosting\index​
• Firebase\Hosting​

Затем вводим команду firebase init, нас спросят о своей готовности, само собой пишем "Y" и идём дальше:

Подготовка к инициализации
​

Теперь нам нужно выбрать инструмент, который мы хотим использовать, в данном случае нам нужен хостинг, поэтому выбираем "Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys", нажатием "Пробела" и последующим подтверждением кнопкой "Enter":

Выбор инструмента​

После этого выбираем существующий проект (Use an existing project), нажав "Enter":

Выбор проекта​

После этого настраиваются дополнительные настройки, важная из которых это название папки с нашим сайтом (What do you want to use as your public directory?), в моём случае папка называется index. Далее просто нажимаем "Enter" отвечая на всё "N" так как Github мне не нужен и index.html у меня уже есть:

Завершение инициализации Firebase​

Последнее что осталось сделать, так это отправить наш проект на хостинг, для этого пишем команду firebase deploy:

Отправка сайта на хостинг

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

Please, Log in or Register to view URLs content!

Click to read more...