Comienza a usar App Hosting

Con una app existente de Next.js o Angular (Next.js 13 y versiones posteriores, o Angular 17.2 y versiones posteriores) en un repositorio de GitHub, comenzar a usar App Hosting puede ser lo siguiente: sencillo como crear un backend App Hosting y, luego, iniciar una de la versión con un envío a tu rama activa. Si no tienes una app, usa uno de nuestras apps de ejemplo para repasar los pasos descritos en esta guía.

Antes de comenzar

Antes de configurar Firebase App Hosting, deberás crear una cuenta de Firebase proyecto (si aún no tienes uno) y actualízalo al plan Blaze.

Sigue estos pasos para crear un proyecto:

  1. En la consola de Firebase, haz clic en Agregar proyecto.

    • Para agregar recursos de Firebase a un proyecto existente de Google Cloud, ingresa su nombre del proyecto o selecciónalo en el menú desplegable.

    • Para crear un proyecto nuevo, ingresa el nombre que quieras. También puedes editar el ID del proyecto que aparece debajo del nombre.

  2. Si se te solicita, revisa y acepta las Condiciones de Firebase.

  3. Haz clic en Continuar.

  4. (Opcional) Configura Google Analytics para tu proyecto, lo que te permitirá hacerlo. para tener una experiencia óptima con cualquiera de los siguientes productos de Firebase:

    Selecciona un nombre de usuario existente Cuenta de Google Analytics o para crear una cuenta nueva.

    Si creas una cuenta nueva, selecciona tu Analytics ubicación de los informes; luego, acéptala la configuración de uso compartido de datos y las condiciones de Google Analytics para tu proyecto.

  5. Haz clic en Crear proyecto (o Agregar Firebase, si utilizas una proyecto Google Cloud existente).

Firebase aprovisiona los recursos para tu proyecto de forma automática. Cuándo se completa el proceso, verás la página de resumen de tu proyecto en la consola de Firebase.

Paso 0 (opcional): Crea un repositorio de GitHub y una app web

Si aún no tienes una app web en un repositorio de GitHub o si no Intenta seguir el flujo con una app de ejemplo, empieza por inicializar uno de nuestros ejemplos para Next.js o Angular:

npm init @apphosting

Puedes ejecutar la app de ejemplo de manera local con next dev o ng start. Para continuar, Crea un nuevo repositorio de GitHub y le envías el código de muestra recién inicializado.

Paso 1: Crea un backend App Hosting

Un backend App Hosting es la colección de recursos administrados que App Hosting crea para compilar y ejecutar tu app web. Puedes crear y enumerar Backends App Hosting con la consola de Firebase CLI de Firebase.

Firebase console: En el menú Compilación, selecciona App Hosting y, luego, Comienza ahora.

CLI: (versión 3.9 o posterior). Para crear un backend, ejecuta el siguiente comando: desde la raíz del directorio del proyecto local project ID como argumento (para la vista previa, solo se admite la región us-central1):

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

Tanto en la consola como en la CLI, sigue las indicaciones y asigna un nombre a tu backend, para establece un Conexión con GitHub, y establece estos parámetros de configuración básicos de implementación:

  • Configura el directorio raíz de la app (el valor predeterminado es /).

    Por lo general, aquí es donde se encuentra el archivo package.json.

  • Configura la rama activa

    Esta es la rama de tu repositorio de GitHub que se implementa en tu URL publicada. A menudo, es la rama en la que las ramas de atributos o los modelos se fusionan las ramas.

  • Aceptar o rechazar lanzamientos automáticos

    Los lanzamientos automáticos están habilitados de forma predeterminada. Cuando finaliza la creación del backend, Puedes elegir que tu app se implemente en App Hosting de inmediato.

Paso 2: Visualiza la app implementada

Cuando creas un backend, Firebase te proporciona un subdominio sin costo donde los usuarios pueden visitar tu app web. Su formato es backend-id--project-id.us-central1.hosted.app.

Para ver la URL de tu app web, consulta Firebase console o ejecuta la siguiente CLI :

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

Paso 3: Activa un lanzamiento mediante el envío de un cambio

Una vez que se crea tu backend y tienes una URL activa, puedes activar el lanzamiento de una nueva versión de tu aplicación web cada vez que la cambios en la rama activa de tu repositorio de GitHub. Para realizar un prueba de la configuración de App Hosting:

  1. En GitHub, envía un cambio a la rama activa de la app web.
  2. Abre el App Hosting pestaña en la consola de Firebase y selecciona Ver panel para tu backend. La lista de tablas muestra la confirmación específica asociada con el lanzamiento activado por el cambio.

Próximos pasos