Начните программировать с `Firebase` база данных в реальном времени

Посетите здесь: -

https://mylogin-007.firebaseapp.com

Хостинг приложений Angular 2 на Firebase

Шаг 1: Используйте Angular CLI для запуска нового проекта

Angular CLI — это интерфейс командной строки и инструмент формирования шаблонов, который позволяет очень легко инициировать проекты Angular 2 и управлять ими из командной строки. Сначала убедитесь, что Angular CLI доступен в вашей системе, используя следующую команду для загрузки и установки через NPM:

$ npm install angular-cli -g

После установки становится доступной команда ng, и мы можем инициировать новый проект Angular 2, выполнив:

$ ng new fb-host-test

Создается новая папка с именем проекта (fb-host-test), создается исходная структура проекта и загружаются все зависимости. Выполнив этот шаг, вы можете переключиться в новый каталог проекта:

$ cd fb-host-test

и проверьте, работает ли приложение, выполнив:

$ ng serve

Это запускает веб-сервер и делает приложение доступным по адресу http://localhost:4200. Результат, который отображается в браузере, должен выглядеть следующим образом:

Шаг 2: Создание для производства

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

$ ng build --prod

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

Шаг 3: Создание проекта Firebase и установка инструмента командной строки Firbase

Теперь, когда у нас есть работающий проект Angular 2, который подготовлен для развертывания в нашей локальной системе, мы можем продолжить подготовку хостинга Firebase. Первое, что нам нужно сделать, это открыть консоль Firebase по адресу https://console.firebase.google.com/ и создать новый проект Firebase:

Чтобы развернуть наше локальное приложение Angular 2 в службе хостинга Firebase, нам нужно сначала установить инструменты командной строки Firebase, снова используя NPM:

$ npm install -g firebase-tools

После завершения установки должна быть доступна новая команда firebase. На следующем шаге мы будем использовать эту команду для завершения развертывания.

Шаг 4. Развертывание в Firebase

При наличии доступной команды firebase процесс развертывания может быть запущен следующим. Сначала используйте следующую команду для входа в firebase:

$ firebase login

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

После аутентификации вы снова можете использовать команду firebase. На этот раз мы используем опцию инициализации:

$ firebase init

Прежде всего, вас спрашивают, какие функции клиента Firebase вы хотите использовать. Выберите параметр Хостинг: настроить и развернуть сайт Firebase Hosting. Затем клиент Firebase спросит, какую папку использовать для развертывания. Введите dist. Это важно, потому что это место, где хранится наша производственная сборка.

Далее возникает вопрос, является ли это приложение одностраничным и должно ли оно переписывать все URL-адреса в index.html. В нашем случае нужно ответить да.

Последний вопрос: должна ли Firebase перезаписывать файл index.html. Ответ на этот вопрос: нет.

Предоставив все ответы, приложение теперь готово к развертыванию в Firebase. Конфигурация Firebase для нашего проекта хранится в файле firebase.json. Теперь вы можете выполнить процесс развертывания с помощью следующей команды:

$ firebase deploy

Firebase предоставит URL-адрес, который вы можете использовать для доступа к своему приложению в Интернете. Вы также можете использовать собственный домен. Конфигурацию пользовательского домена можно найти в бэкэнде консоли Firebase.

Наконец, вы должны увидеть тот же результат в браузере, что и раньше (при запуске приложения на локальном хосте):

На терминале Шаги: -

root@ashish-Inspiron-3521:/home/ashish/wow# развертывание firebase

=== Развертывание на ‘wow1-a02f3’…

развертывание базы данных, размещение
базы данных i: проверка синтаксиса правил…

база данных: синтаксис правил для базы данных wow1-a02f3 действителен
i hosting: подготовка общего каталога для загрузки…

хостинг: успешно загружено 1 файл
я база данных: освобождение правил…

база данных: правила для базы данных wow1-a02f3 успешно выпущены

Развертывание завершено!

Консоль проекта: https://console.firebase.google.com/project/wow1-a02f3/overview
URL-адрес хостинга: https://wow1-a02f3.firebaseapp.com
root@ ashish-Inspiron-3521:/home/ashish/wow# вход в firebase
Уже выполнен вход как [email protected]
root@ashish-Inspiron-3521:/home/ashish/wow# firebase init

######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########

Вы собираетесь инициализировать проект Firebase в этом каталоге:

/дом/ашиш/вау

Прежде чем мы начнем, имейте в виду:

* В настоящее время вы находитесь за пределами своего домашнего каталога
* Вы выполняете инициализацию в существующем каталоге проекта Firebase

? Какие функции Firebase CLI вы хотите настроить для этой папки? Нажмите пробел
, чтобы выбрать функции, затем нажмите Enter, чтобы подтвердить свой выбор. Хостинг: настройка и развертывание сайтов Firebase Hosting.

=== Настройка проекта

Во-первых, давайте свяжем этот каталог проекта с проектом Firebase.
Вы можете создать несколько псевдонимов проекта, запустив firebase use –add,
, но сейчас мы просто настроим проект по умолчанию.

i .firebaserc уже имеет проект по умолчанию, пропуская

=== Настройка хостинга

Общедоступный каталог — это папка (относительно каталога вашего проекта), которая
будет содержать ресурсы хостинга, которые будут загружены с помощью развертывания firebase. Если у вас
есть процесс сборки ваших ресурсов, используйте выходной каталог вашей сборки.

? Что вы хотите использовать в качестве общего каталога? расстояние
? Настроить как одностраничное приложение (переписать все URL-адреса в /index.html)? Да
? Файл dist/index.html уже существует. Переписать? Нет
i Пропуск записи dist/index.html

i Запись информации о конфигурации в firebase.json…
i Запись информации о проекте в .firebaserc…

Инициализация Firebase завершена!
root@ashish-Inspiron-3521:/home/ashish/wow# firebase deploy