Начало работы с App Hosting

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

Чтобы получить помощь от ИИ, скопируйте запрос ниже и вставьте его в ИИ-агент программирования, например Antigravity, Claude Code, Codex или Cursor. Вы можете настроить запрос и повторить его с агентом. Подробные инструкции по установке вы найдете в статье Навыки агента Firebase. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

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

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

Шаг 1. Создайте форк демонстрационного репозитория

Перейдите на страницу https://github.com/firebase/apphosting-adapters и выберите Fork (Форк).

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

  1. В консоли Firebase выберите Hosting & Serverless (Хостинг и бессерверная архитектура) > App Hosting (Хостинг приложений).

  2. Нажмите Начать.

  3. Если появится запрос, перейдите на тарифный план Blaze с оплатой по мере использования, чтобы использовать App Hosting.

Скриншот настройки серверной части App Hosting.

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

  • Выберите основной регион (обычно это регион, ближайший к вашим пользователям).
  • Подключитесь к GitHub. Выберите хранилище, которое вы только что создали, разветвив хранилище apphosting-adapters.
  • Укажите один из следующих корневых каталогов приложения:
  • Установите для активной ветви значение main.
  • Включите автоматическое развертывание (оно включено по умолчанию).
  • Укажите название бэкенда.
  • Выберите среду выполнения. По умолчанию выбрана последняя рекомендуемая версия Node.js.
    • Настройте автоматическое обновление базового образа. Функция ABIU включена по умолчанию и автоматически применяет исправления системы безопасности к вашей среде. Чтобы отказаться от ABIU, выберите "Не указано" в качестве среды выполнения.
  • Создайте новое веб-приложение Firebase.

Нажмите Завершить и развернуть.

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

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

В строке Backend information (Информация о бэкенде) на панели управления бэкендом выберите ссылку на работающий бэкенд, чтобы посмотреть новый сайт.

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

Шаг 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 по мере того, как изменения внедряются в рабочую среду. Когда выпуск завершится, вы сможете увидеть изменения на главной странице приложения.

Дальнейшие действия