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

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

Прежде чем начать

Прежде чем вы сможете настроить Firebase App Hosting , вам необходимо создать проект 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. Создайте серверную часть App Hosting

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

Консоль 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 :

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

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