Начало работы с 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, но есть и другие способы, в том числе с использованием интерфейса командной строки Firebase для развертывания локального кода без подключения к GitHub.

Шаг 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.

В строке Информация о серверной части на панели управления серверной частью выберите ссылку на активную серверную часть, чтобы посмотреть новый сайт:

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

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

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