Начните работу с хостингом приложений

Имея существующее приложение Next.js или Angular (версии Next.js 13.5.x+ или Angular 18.2.x+) в репозитории GitHub, начать работу с App Hosting можно так же просто, как создать бэкенд App Hosting и начать его развертывание, отправив изменения в рабочую ветку. Если у вас нет приложения, воспользуйтесь одним из наших примеров, чтобы выполнить шаги, описанные в этом руководстве.

Прежде чем начать

Прежде чем вы сможете настроить Firebase App Hosting , вам необходимо создать проект Firebase (если у вас его еще нет) и перейти на план Blaze.

Чтобы создать проект:

  1. В консоли Firebase нажмите Добавить проект .

    • Чтобы добавить ресурсы Firebase в существующий проект Google Cloud , введите имя проекта или выберите его из раскрывающегося меню.

    • Чтобы создать новый проект, введите его название. Вы также можете изменить идентификатор проекта, отображаемый под его названием.

  2. При необходимости ознакомьтесь и примите условия Firebase .

  3. Нажмите «Продолжить» .

  4. (Необязательно) Настройте Google Analytics для своего проекта, что обеспечит оптимальную работу с использованием следующих продуктов Firebase: Firebase A/B Testing , Cloud Messaging , Crashlytics , In-App Messaging и Remote Config (включая Personalization ).

    Выберите существующий аккаунт Google Analytics или создайте новый. При создании нового аккаунта выберите местоположение для отчётов Google Analytics , а затем примите настройки доступа к данным и условия использования Google Analytics для вашего проекта.

  5. Нажмите «Создать проект» (или «Добавить Firebase» , если вы добавляете Firebase в существующий проект Google Cloud ).

Firebase автоматически выделяет ресурсы для вашего проекта Firebase. После завершения процесса вы будете перенаправлены на страницу обзора вашего проекта Firebase в консоли Firebase .

Шаг 0 (необязательно): создайте репозиторий GitHub и веб-приложение.

Если у вас еще нет веб-приложения, размещенного в репозитории GitHub, или вы предпочитаете попробовать поток с примером приложения, начните с инициализации одного из наших примеров для Next.js или Angular:

npm init @apphosting

Вы можете запустить пример приложения локально, используя next dev или ng start . Чтобы продолжить, создайте новый репозиторий GitHub и отправьте в него только что инициализированный пример кода.

Шаг 1: Создайте серверную часть App Hosting

Бэкэнд App Hosting представляет собой набор управляемых ресурсов, которые App Hosting создает для создания и запуска вашего веб-приложения.

Консоль Firebase : в меню «Сборка» выберите «Хостинг приложений» , а затем «Начать» .

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

firebase apphosting:backends:create --project PROJECT_ID

Для консоли или CLI следуйте инструкциям по выбору региона , настройке подключения к GitHub и настройке следующих основных параметров развертывания:

  • Установите корневой каталог вашего приложения (по умолчанию / )

    Обычно именно здесь находится файл package.json .

  • Установить живую ветку

    Это ветка вашего репозитория GitHub, которая развёртывается по вашему текущему URL-адресу. Часто именно в эту ветку объединяются ветки функций или ветки разработки.

  • Принять или отклонить автоматическое развертывание

    Автоматическое развертывание включено по умолчанию. После завершения создания бэкенда вы можете выбрать немедленное развертывание приложения на App Hosting .

  • Присвойте имя вашему бэкэнду.

Шаг 2: Просмотр развернутого приложения

При создании бэкенда Firebase предоставляет вам бесплатный поддомен, где конечные пользователи смогут посещать ваше веб-приложение. Формат поддомена: backend-id -- project-id .us-central1.hosted.app .

Чтобы просмотреть URL-адрес вашего веб-приложения, проверьте консоль Firebase или выполните следующую команду CLI:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

Шаг 3: Запустите развертывание, отправив изменение

После создания бэкенда и получения активного URL-адреса вы можете запускать выпуск новой версии веб-приложения при каждом добавлении изменений в активную ветку репозитория GitHub. Чтобы протестировать настройку App Hosting :

  1. В GitHub отправьте изменение в действующую ветку веб-приложения.
  2. Откройте вкладку App Hosting в консоли Firebase и выберите «Просмотреть панель мониторинга» для вашего бэкенда. В таблице отображается конкретный коммит, связанный с развертыванием, инициированным вашим изменением.

Следующие шаги