Начните работу с хостингом приложений

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

Прежде чем вы начнете

Прежде чем вы сможете настроить хостинг приложений Firebase, вам необходимо создать проект Firebase (если у вас его еще нет) и перейти на план Blaze.

Чтобы создать проект:

  1. В консоли Firebase нажмите «Добавить проект» .

    • Чтобы добавить ресурсы Firebase в существующий проект Google Cloud, введите название его проекта или выберите его из раскрывающегося меню.

    • Чтобы создать новый проект, введите желаемое имя проекта. Вы также можете при желании изменить идентификатор проекта, отображаемый под названием проекта.

  2. При появлении запроса прочтите и примите условия Firebase .

  3. Нажмите Продолжить .

  4. (Необязательно) Настройте Google Analytics для своего проекта, что позволит вам оптимально использовать любой из следующих продуктов Firebase:

    Либо выберите существующую учетную запись Google Analytics , либо создайте новую учетную запись.

    Если вы создаете новую учетную запись, выберите местоположение для отчетов Analytics , затем примите настройки совместного использования данных и условия Google Analytics для вашего проекта.

  5. Нажмите «Создать проект» (или «Добавить Firebase» , если вы используете существующий проект Google Cloud).

Firebase автоматически выделяет ресурсы для вашего проекта Firebase. Когда процесс завершится, вы перейдете на страницу обзора вашего проекта Firebase в консоли Firebase.

Шаг 0 (необязательно). Создайте репозиторий GitHub и веб-приложение.

Если у вас еще нет веб-приложения, находящегося в репозитории GitHub, или вы предпочитаете попробовать работу с примером приложения, начните с инициализации одного из наших примеров для Next.js или Angular:

npm init @apphosting

Вы можете запустить пример приложения локально, используя next dev или ng start . Чтобы продолжить, создайте новый репозиторий GitHub и поместите в него только что инициализированный пример кода.

Шаг 1. Создайте серверную часть хостинга приложений.

Серверная часть хостинга приложений — это набор управляемых ресурсов, которые хостинг приложений создает для создания и запуска вашего веб-приложения. Вы можете создавать и перечислять серверные части хостинга приложений с помощью консоли Firebase или интерфейса командной строки Firebase .

Консоль Firebase : в меню «Сборка» выберите «Хостинг приложений» , а затем «Начало» .

CLI: (версия 3.9 или новее). Чтобы создать серверную часть, выполните следующую команду из корня локального каталога проекта, указав идентификатор проекта в качестве аргумента (для предварительной версии поддерживается только регион us-central1 ):

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

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

  • Установите корневой каталог вашего приложения (по умолчанию / ).

    Обычно здесь находится ваш файл package.json .

  • Установить живую ветку

    Это ветка вашего репозитория GitHub, которая развертывается по вашему действующему URL-адресу. Часто это ветка, в которую объединяются ветки функций или ветки разработки.

  • Принять или отклонить автоматическое внедрение

    Автоматическое развертывание включено по умолчанию. По завершении создания серверной части вы можете выбрать немедленное развертывание вашего приложения на хостинге приложений.

Шаг 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. Чтобы проверить настройку хостинга приложений:

  1. В GitHub отправьте изменение в активную ветку веб-приложения.
  2. Откройте вкладку «Хостинг приложений» в консоли Firebase и выберите «Просмотреть панель мониторинга» для своего бэкэнда. В списке таблиц отображается конкретная фиксация, связанная с развертыванием, вызванным вашим изменением.

Следующие шаги