Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+

Как развернуть приложение в Firebase с помощью Angular CLI

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Masha Kolesnikova (you can also view the original English article)

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

С Angular CLI очень легко создавать готовые к работе приложения. С другой стороны, Firebase позволяет быстро размещать приложения. Кроме того, Firebase имеет множество функций и бесплатный план, который позволяет вам экспериментировать с платформой, не привязываясь к платному плану.

Бесплатный план имеет следующие особенности:

  • A/B тестирование
  • Аналитика
  • Индексация приложений
  • Аутентификация
  • Обмен сообщениями в облаке
  • Аналитика крашей
  • Инвайты
  • Мониторинг производительности
  • Прогнозы

Предпосылки

Для запуска Angular CLI в вашей системе должен быть установлен Node.js 6.9 и NPM 3 или выше. Если у вас не установлен Node.js, посетите веб-сайт Node.js, чтобы найти инструкции по установке Node.js в вашей операционной системе.

Вы также должны иметь общее представление о следующем:

  • объектно-ориентированное программирование
  • JavaScript или TypeScript

Установка Angular CLI

Установить Angular CLI просто:

Приведенная выше команда устанавливает последнюю версию Angular. Чтобы проверить успешную установку Angular CLI, просто введите следующую команду:

Создание приложения Angular

Теперь, когда у вас установлен Angular CLI, мы можем приступить к разработке нашего приложения. В этом руководстве мы не будем вдаваться в компоненты, составляющие проект Angular CLI, так как этот пост посвящен в основном развертыванию в Firebase.

Чтобы создать новое приложение, просто запустите ng new [name_of_project], где вы замените name_of_project на имя вашего приложения.

Это создаст все файлы, необходимые для начала работы. Как вы можете видеть, Angular CLI создал много файлов, которые вам иначе пришлось бы создать самим в более ранних версиях, то есть Angular v1.

Запуск вашего приложения

Чтобы просмотреть приложение в браузере, перейдите в папку проекта и запустите ng -serve. Эта команда используется для локального запуска приложения.

Теперь перейдите по адресу http://localhost:4200/, чтобы увидеть ваше приложение в действии. Любые изменения, которые вы вносите в свое приложение, перезагружаются в вашем браузере, поэтому вам не нужно перезапускать приложение.

Развертывание

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

  • Создать проект Firebase
  • Установить инструменты Firebase
  • Собрать для прода
  • Развернуть в Firebase

Создание приложения Firebase

Firebase website screenshotFirebase website screenshotFirebase website screenshot

Для начала вам необходимо иметь учетную запись Firebase. Если у вас ее нет, перейдите на бесплатный аккаунт.

На панели инструментов Firebase создайте новый проект, как показано ниже. Вы можете просто дать ему то же имя, что и ваше приложение Angular. Так будет легче, особенно если у вас есть много проектов на панели инструментов Firebase.

Add a project in FirebaseAdd a project in FirebaseAdd a project in Firebase

Установите Firebase Command Tools

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

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

Аутентификация Firebase

Войдите в Firebase.

Ответьте Да на интерактивную подсказку.

Затем инструмент Firebase CLI откроет браузер, в котором вас попросят разрешить Firebase проходить аутентификацию через Google Mail.

Firebase CLI message about accessing your Google accountFirebase CLI message about accessing your Google accountFirebase CLI message about accessing your Google account

Если аутентификация прошла успешно, вы получите следующий интерфейс в вашем браузере по адресу http://localhost:9005/.

Firebase CLI Login Successful pageFirebase CLI Login Successful pageFirebase CLI Login Successful page

Инициализировать проект

Следующим шагом будет инициализация вашего проекта Firebase. Это свяжет ваше локальное приложение Angular с приложением Firebase, которое вы только что создали. Для этого просто запустите:

Выберите хостинг в качестве функции, которую вы хотите настроить для проекта, так как нас интересует только хостинг Firebase.

Эта команда создаст два файла:

  • .firebaserc
  • .firebase.json

Эти два файла содержат конфигурации Firebase и некоторую важную информацию о вашем приложении.

Файл JSON должен выглядеть следующим образом:

Сбор для прода

Angular CLI предоставляет команду ng build --prod, которая запускает производственную сборку. Эта команда создает папку dist, которая содержит все файлы для обслуживания приложения. Этот процесс важен для того, чтобы сделать ваше приложение легче и быстрее при загрузке веб-страниц. Для этого просто введите:

Разверните приложение!

Если вы выполнили все шаги до сих пор, наше локальное приложение Angular теперь связано с Firebase, и вы можете легко отправлять файлы, как вы это делаете с Git. Просто выполните команду firebase deploy для развертывания вашего приложения.

Ваше приложение теперь развернуто, и вы можете просмотреть его, выполнив следующую команду.

Заключение

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

Для получения дополнительной информации посетите официальный сайт Angular и Firebase и изучите возможности совместного использования этих двух технологий.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.