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

Создание вашего углового проекта

В этом примере мы будем работать с Angular 13 в среде Windows 10. Давайте начнем с создания очень простого проекта Angular. Чтобы создать новый проект Angular, вы выполните следующую команду из командной строки. В этом примере мы называем наш проект angular-firebase-hello-world, но вы можете назвать свой проект как угодно.

ng new angular-firebase-hello-world

Затем вы можете перейти к файлу app.component.html в каталоге src\app и заменить все шаблонное содержимое простым тегом следующим образом:

<h1>Angular Firebase Hello World</h1>

Далее давайте протестируем это простое приложение локально и убедимся, что оно доступно из веб-браузера, запустив:

ng serve

Как только вы увидите, что приложение успешно скомпилировано, вы можете перейти к соответствующему URL-адресу в своем веб-браузере. В нашем примере URL-адрес будет http://localhost:4200С вашего веб-сайта вы должны увидеть страницу, похожую на следующую:

Создайте свой проект

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

ng build

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

Создайте новый проект Firebase

Следующим шагом в этом процессе будет создание нового проекта из консоли Firebase. В предпочитаемом веб-браузере перейдите на https://firebase.google.com/. Как только вы окажетесь на этой странице, вы увидите ссылку в правом верхнем углу страницы с надписью Перейти к консоли. Вы захотите перейти по этой ссылке.

После того, как вы нажмете эту ссылку, вы должны увидеть опцию на следующей странице, которая гласит «Добавить проект». Вы захотите выбрать эту опцию.

Затем вы перейдете к мастеру настройки для создания вашего проекта. Первое приглашение, которое вы увидите, попросит вас ввести имя проекта. В этом примере наш проект будет называться «Angular-Firebase-Hello-World».

На следующей странице вам будет предложено включить Google Analytics для этого проекта. Значение по умолчанию для этого — «Да». Мы можем просто принять значение по умолчанию и нажать кнопку «Продолжить».

На последней странице мастера настройки вам будет предложено выбрать существующую учетную запись или создать существующую учетную запись для Google Analytics. В этом примере у меня была существующая «Тестовая учетная запись», которую я решил использовать для этого проекта. Затем вы можете нажать кнопку «Создать проект», чтобы завершить создание нового проекта Firebase.

Локальная установка инструментов Firebase и вход в Firebase

После создания нового проекта в консоли Firebase вам нужно вернуться в командную строку и установить инструменты Firebase:

npm install -g firebase-tools

Войдите в интерфейс командной строки Firebase

После установки инструментов Firebase вам нужно будет войти в интерфейс командной строки Firebase. В командной строке введите следующую команду:

firebase login

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

Инициализируйте свой проект Firebase

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

firebase init

Отсюда вы пройдете через мастер настройки для инициализации вашего проекта Firebase. Когда вас спросят, готовы ли вы продолжить, выберите «Да» или «Д». В следующем запросе вас спросят, какие функции Firebase вы хотели бы настроить для этого каталога. В нашем примере мы хотим перейти к опции, которая говорит Hosting: Configure files for hosting and (optionally) set up Github action deploys. Нажмите пробел, чтобы выбрать эту опцию, а затем нажмите Enter, чтобы подтвердить наш выбор.

Следующее приглашение, к которому мы придем, попросит нас связать этот каталог проекта с проектом Firebase. Поскольку мы уже создали наш проект Firebase из консоли, мы можем выбрать опцию Use an existing project для этой подсказки.

В следующем запросе вы увидите список всех существующих проектов Firebase, существующих под этой учетной записью Google. Мы можем выбрать проект Angular-Firebase-Hello-World, который мы создали ранее.

Следующее приглашение, которое вы увидите, попросит вас указать, что вы хотели бы использовать для своего общедоступного каталога. Вы можете ввести следующее dist\angular-firebase-hello-world, как показано ниже.

Для следующего запроса, где вас спросят, хотите ли вы настроить одностраничное приложение, вы можете указать «Нет» или «N». В этом примере мы также выбираем «Нет» для подсказки Set up automatic builds and deploys with Github, а также «Нет» для File dist\angular-firebase-hello-world/index.html already exists. Overwrite? после того, как вы выполнили все подсказки в мастере установки. Вы увидите, что инициализация Firebase завершена.

Самый последний шаг, который нужно сделать сейчас, — это развернуть приложение в Firebase, введя приведенную ниже команду в командной строке.

firebase deploy

После завершения развертывания вы должны увидеть Hosting URL, к которому можно перейти в предпочитаемом веб-браузере. В нашем случае https://angular-firebase-hello-w-2b539.web.app

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

Спасибо всем, что нашли время, чтобы прочитать это объяснение. Я надеюсь, что этот пример был полезен. Не стесняйтесь обращаться ко мне с любыми вопросами или комментариями.

Если вам понравилась эта статья, рассмотрите возможность регистрации на Medium, если вы еще этого не сделали, используя мою реферальную ссылку. Эта подписка обеспечивает неограниченный доступ к моим статьям, а также к тысячам других талантливых авторов во многих областях.