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