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

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

В этом руководстве описывается, как настроить App Hosting в консоли Firebase для автоматического развёртывания при каждом коммите в репозиторий GitHub. В результате вы получите работающий пример приложения Next.js или Angular, который будет развёртываться каждый раз при коммите нового изменения в main ветку репозитория GitHub.

Хотя в этом руководстве основное внимание уделяется рекомендуемому потоку консоли Firebase , существуют и другие способы развертывания , включая использование Firebase CLI для развертывания локального кода без подключения к GitHub.

Шаг 1: Создайте форк демо-репозитория

Посетите https://github.com/FirebaseExtended/firebase-framework-tools и выберите Fork .

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

В консоли Firebase откройте App Hosting и выберите «Начать». Чтобы использовать App Hosting, вам потребуется перейти на тариф Blaze.

Скриншот настройки бэкэнда App Hosting.

Следуйте инструкциям, чтобы выполнить следующие шаги:

  • Выберите основной регион (обычно это регион, ближайший к вашим пользователям).
  • Подключитесь к GitHub. Выберите репозиторий, который вы только что создали, создав форк репозитория firebase-framework-tools.
  • Установите корневой каталог вашего приложения на один из следующих:
  • Установите действующую ветку как основную.
  • Включить автоматическое развертывание (автоматическое развертывание включено по умолчанию).
  • Присвойте имя вашему бэкэнду.
  • Создайте новое веб-приложение Firebase.

Выберите Готово и разверните .

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

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

В строке «Информация о бэкэнде» на панели управления вашего бэкэнда выберите ссылку на работающий бэкэнд, чтобы просмотреть ваш новый веб-сайт:

Скриншот строки с информацией на бэкэнде с выделенной ссылкой на активное приложение.

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

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

  1. В вашей ветке демо-репозитория GitHub перейдите к исходному коду домашней страницы демо-приложения, внесите любые необходимые изменения, а затем отправьте их в основную ветку. Чтобы найти домашнюю страницу:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. В консоли Firebase отслеживайте App Hosting по мере развертывания новых изменений в рабочей среде. После завершения развертывания вы сможете увидеть изменения на главной странице приложения.

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