При наличии существующего приложения Next.js или Angular (версии Next.js 13+ или Angular 17.2+) в репозитории GitHub начать работу с App Hosting может быть так же просто, как создать серверную часть App Hosting , а затем начать развертывание с помощью нажатия кнопки твоя живая ветка. Если у вас нет приложения, воспользуйтесь одним из наших примеров приложений, чтобы выполнить действия, описанные в этом руководстве.
Прежде чем начать
Прежде чем вы сможете настроить Firebase App Hosting , вам необходимо создать проект Firebase (если у вас его еще нет) и перейти на план Blaze.
Чтобы создать проект:
В консоли Firebase нажмите «Добавить проект» .
Чтобы добавить ресурсы Firebase в существующий проект Google Cloud , введите название его проекта или выберите его из раскрывающегося меню.
Чтобы создать новый проект, введите желаемое имя проекта. Вы также можете при желании изменить идентификатор проекта, отображаемый под названием проекта.
При появлении запроса прочтите и примите условия Firebase .
Нажмите Продолжить .
(Необязательно) Настройте Google Analytics для своего проекта, что позволит вам оптимально использовать любой из следующих продуктов Firebase:
Либо выберите существующую учетную запись Google Analytics , либо создайте новую учетную запись.
Если вы создаете новую учетную запись, выберите местоположение для отчетов Analytics , затем примите настройки совместного использования данных и условия Google Analytics для вашего проекта.
Нажмите «Создать проект» (или «Добавить 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 создает для создания и запуска вашего веб-приложения. Любой владелец проекта может создать первый бэкэнд App Hosting для проекта, используя консоль Firebase или интерфейс командной строки Firebase . После этой первоначальной настройки администраторы App Hosting также могут создавать дополнительные серверные части и управлять ими. Подробности см. в разделе Роли IAM Firebase App Hosting .
Консоль Firebase : в меню «Сборка» выберите «Хостинг приложений» , а затем «Начало» .
CLI: (версия 13.15.4 или новее). Чтобы создать серверную часть, запустите следующую команду из корня локального каталога проекта, указав идентификатор проекта и предпочтительный регион в качестве аргументов:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
Как для консоли, так и для интерфейса командной строки следуйте инструкциям, чтобы присвоить имя серверной части, настроить соединение 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} --location us-central1
Шаг 3. Запустите развертывание, отправив изменение.
После того как ваш бэкэнд создан и у вас есть действующий URL-адрес, вы можете инициировать развертывание новой версии вашего веб-приложения всякий раз, когда вы вносите изменения в действующую ветку вашего репозитория GitHub. Чтобы проверить настройку App Hosting :
- В GitHub отправьте изменение в активную ветку веб-приложения.
- Откройте вкладку App Hosting в консоли Firebase и выберите «Просмотреть панель мониторинга» для своего бэкэнда. В списке таблиц отображается конкретная фиксация, связанная с развертыванием, вызванным вашим изменением.
Следующие шаги
- Идите глубже: ознакомьтесь с кодовой лабораторией Firebase, которая интегрирует размещенное приложение с функциями аутентификации Firebase и Google AI: Next.js | Угловой
- Подключите личный домен .
- Настройте свой бэкэнд .
- Отслеживайте развертывание, использование сайта и журналы .
При наличии существующего приложения Next.js или Angular (версии Next.js 13+ или Angular 17.2+) в репозитории GitHub начать работу с App Hosting может быть так же просто, как создать серверную часть App Hosting , а затем начать развертывание с помощью нажатия кнопки твоя живая ветка. Если у вас нет приложения, воспользуйтесь одним из наших примеров приложений, чтобы выполнить действия, описанные в этом руководстве.
Прежде чем начать
Прежде чем вы сможете настроить Firebase App Hosting , вам необходимо создать проект Firebase (если у вас его еще нет) и перейти на план Blaze.
Чтобы создать проект:
В консоли Firebase нажмите «Добавить проект» .
Чтобы добавить ресурсы Firebase в существующий проект Google Cloud , введите название его проекта или выберите его из раскрывающегося меню.
Чтобы создать новый проект, введите желаемое имя проекта. Вы также можете при желании изменить идентификатор проекта, отображаемый под названием проекта.
При появлении запроса прочтите и примите условия Firebase .
Нажмите Продолжить .
(Необязательно) Настройте Google Analytics для своего проекта, что позволит вам оптимально использовать любой из следующих продуктов Firebase:
Либо выберите существующую учетную запись Google Analytics , либо создайте новую учетную запись.
Если вы создаете новую учетную запись, выберите местоположение отчетов Analytics , затем примите настройки обмена данными и условия Google Analytics для вашего проекта.
Нажмите «Создать проект» (или «Добавить 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 создает для создания и запуска вашего веб-приложения. Любой владелец проекта может создать первый бэкэнд App Hosting для проекта, используя консоль Firebase или интерфейс командной строки Firebase . После этой первоначальной настройки администраторы App Hosting также могут создавать дополнительные серверные части и управлять ими. Подробности см. в разделе Роли IAM Firebase App Hosting .
Консоль Firebase : в меню «Сборка» выберите «Хостинг приложений» , а затем «Начало» .
CLI: (версия 13.15.4 или новее). Чтобы создать серверную часть, запустите следующую команду из корня локального каталога проекта, указав идентификатор проекта и предпочтительный регион в качестве аргументов:
firebase apphosting:backends:create --project PROJECT_ID --location us-central1
Как для консоли, так и для интерфейса командной строки следуйте инструкциям, чтобы присвоить имя серверной части, настроить соединение 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} --location us-central1
Шаг 3. Запустите развертывание, отправив изменение.
После того как ваш бэкэнд создан и у вас есть действующий URL-адрес, вы можете инициировать развертывание новой версии вашего веб-приложения всякий раз, когда вы вносите изменения в действующую ветку вашего репозитория GitHub. Чтобы проверить настройку App Hosting :
- В GitHub отправьте изменение в активную ветку веб-приложения.
- Откройте вкладку App Hosting в консоли Firebase и выберите «Просмотреть панель мониторинга» для своего бэкэнда. В списке таблиц отображается конкретная фиксация, связанная с развертыванием, вызванным вашим изменением.
Следующие шаги
- Идите глубже: ознакомьтесь с кодовой лабораторией Firebase, которая интегрирует размещенное приложение с функциями аутентификации Firebase и Google AI: Next.js | Угловой
- Подключите личный домен .
- Настройте свой бэкэнд .
- Отслеживайте развертывание, использование сайта и журналы .