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

Как развернуть приложение в 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 screenshot

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

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

Add a project in Firebase

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

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

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

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

Войдите в Firebase.

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

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

Firebase CLI message about accessing your Google account

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

Firebase 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
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.