Имея существующее приложение Next.js или Angular (версии Next.js 13.5.x+ или Angular 18.2.x+) в репозитории GitHub, начать работу с App Hosting можно так же просто, как создать бэкенд App Hosting и начать его развертывание, отправив изменения в рабочую ветку. Если у вас нет приложения, воспользуйтесь одним из наших примеров, чтобы выполнить шаги, описанные в этом руководстве.
Если вы предпочитаете развернуть приложение Next.js или Angular без подключения к репозиторию GitHub, App Hosting поддерживает альтернативные способы развёртывания с помощью Terraform, Firebase Studio или напрямую из локального источника. Вы всегда сможете подключить репозиторий GitHub позже.
Прежде чем начать
Прежде чем вы сможете настроить Firebase App Hosting , вам необходимо создать проект Firebase (если у вас его еще нет) и перейти на план Blaze.
Чтобы создать проект:
Новичок в Firebase или облаке
Если вы новичок в Firebase или Google Cloud , выполните следующие действия.
Вы также можете выполнить эти шаги, если хотите создать совершенно новый проект Firebase (и его базовый проект Google Cloud ).
- Войдите в консоль Firebase .
- Нажмите кнопку, чтобы создать новый проект Firebase.
В текстовом поле введите название проекта .
Если вы являетесь частью организации Google Cloud , вы можете по желанию выбрать, в какой папке создать свой проект.
- При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, затем нажмите «Продолжить» .
- (Необязательно) Включите помощь ИИ в консоли Firebase (которая называется «Gemini в Firebase»), которая поможет вам приступить к работе и оптимизировать процесс разработки.
(Необязательно) Настройте Google Analytics для своего проекта, что обеспечит оптимальную работу с использованием следующих продуктов Firebase: Firebase A/B Testing , Cloud Messaging , Crashlytics , In-App Messaging и Remote Config (включая Personalization ).
Выберите существующий аккаунт Google Analytics или создайте новый. При создании нового аккаунта выберите местоположение для отчётов Google Analytics , а затем примите настройки доступа к данным и условия Google Analytics для вашего проекта.
- Нажмите Создать проект .
Firebase создаст ваш проект, предоставит начальные ресурсы и включит важные API. После завершения процесса вы будете перенаправлены на страницу обзора вашего проекта Firebase в консоли Firebase .
Существующий облачный проект
Выполните следующие шаги, чтобы начать использовать Firebase с существующим проектом Google Cloud . Узнайте больше о добавлении Firebase в существующий проект Google Cloud и устранении неполадок.
- Войдите в консоль Firebase , используя учетную запись, которая предоставляет вам доступ к существующему проекту Google Cloud .
- Нажмите кнопку, чтобы создать новый проект Firebase.
- В нижней части страницы нажмите Добавить Firebase в проект Google Cloud .
- В текстовом поле начните вводить название существующего проекта, а затем выберите проект из отображаемого списка.
- Нажмите Открыть проект .
- При появлении соответствующего запроса ознакомьтесь с условиями Firebase и примите их, затем нажмите «Продолжить» .
- (Необязательно) Включите помощь ИИ в консоли Firebase (которая называется «Gemini в Firebase»), которая поможет вам приступить к работе и оптимизировать процесс разработки.
(Необязательно) Настройте Google Analytics для своего проекта, что обеспечит оптимальную работу с использованием следующих продуктов Firebase: Firebase A/B Testing , Cloud Messaging , Crashlytics , In-App Messaging и Remote Config (включая Personalization ).
Выберите существующий аккаунт Google Analytics или создайте новый. При создании нового аккаунта выберите местоположение для отчётов Google Analytics , а затем примите настройки доступа к данным и условия Google Analytics для вашего проекта.
- Нажмите Добавить Firebase .
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 :
- В GitHub отправьте изменение в действующую ветку веб-приложения.
- Откройте вкладку App Hosting в консоли Firebase и выберите «Просмотреть панель мониторинга» для вашего бэкенда. В таблице отображается конкретный коммит, связанный с развертыванием, инициированным вашим изменением.
Следующие шаги
- Подробности: пройдите лабораторную работу по Firebase, которая интегрирует размещенное приложение с аутентификацией Firebase и функциями Google AI: Next.js | Angular
- Подключите собственный домен .
- Настройте свой бэкэнд — установите переменные среды, сохраните секретные параметры и многое другое.
- Мониторинг развертываний, использования сайта и журналов .