Antes de implementar en tu sitio, te recomendamos consultar y probar los cambios. Firebase Hosting te permite ver y probar los cambios de forma local y también interactuar con recursos de proyectos de backend emulados. Si necesitas que tus compañeros de equipo vean y probar tus cambios, Hosting podrá crear URLs de vista previa temporales que se pueden compartir para tu sitio. Incluso admitimos un Integración en GitHub para implementar a partir de una extracción para cada solicitud.
Antes de comenzar
Completa los pasos que se indican Página introductoria de Hosting, específicamente la las siguientes tareas:
- Instala o actualiza la CLI de Firebase a su versión más reciente.
- Conecta el directorio del proyecto local (que incluye el contenido de tu app) a tu proyecto de Firebase.
Si lo deseas, puedes implementar el contenido y la configuración de Hosting de tu app, pero es no es un requisito previo para los pasos que se indican en esta página.
Paso 1: Realiza pruebas de forma local
Si realizas iteraciones rápidas o quieres que tu app interactúe con modelos recursos del proyecto de backend, puedes probar tu contenido y configuración de Hosting de forma local. Cuando realizas pruebas locales, Firebase entrega tu aplicación web en una URL alojada localmente.
Hosting es parte de Firebase Local Emulator Suite, que permite que la app interactúe con tu contenido de Hosting emulado y y, opcionalmente, tus recursos de proyecto emulados (funciones, bases de datos y reglas).
(Opcional) De forma predeterminada, tu aplicación alojada de forma local interactuará con los recursos del proyecto (funciones, base de datos, reglas, etc.) reales, no emulados. De manera opcional, puedes conectar tu app para que use cualquier recurso del proyecto emulado que hayas configurado. Más información: Realtime Database | Cloud Firestore | Cloud Functions
Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:
firebase emulators:start
Abre tu aplicación web en la URL local que muestra la CLI (generalmente
http://localhost:5000
).Para actualizar la URL local con los cambios, actualiza el navegador.
Realiza pruebas desde otros dispositivos locales
De forma predeterminada, los emuladores solo responden a las solicitudes de localhost
. Esto
significa que podrás acceder al contenido alojado mediante el navegador web de tu computadora,
pero no desde otros dispositivos de la red. Si quieres realizar pruebas desde otros dispositivos locales, configura tu firebase.json
de la siguiente manera:
"emulators": {
// ...
"hosting": {
"port": 5000,
"host": "0.0.0.0"
}
}
Paso 2: Obtén una vista previa y compártela
Si deseas que otras personas vean los cambios en tu app web antes de publicarlos, puedes usar los canales de vista previa.
Después de la implementación en un canal de vista previa, Firebase entrega tu app web en una “URL de vista previa”, que es una URL temporal que se puede compartir. Cuando usas una URL de vista previa, la app web interactúa con el backend real de todos los recursos del proyecto (excepto las funciones “fijadas” en la configuración de tus reescrituras).
Ten en cuenta que, aunque las URLs de vista previa son difíciles de adivinar (ya que contienen un hash aleatorio), son públicas. Por lo tanto, cualquier persona que conozca la URL puede acceder a ella.
Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:
firebase hosting:channel:deploy CHANNEL_ID
Reemplaza CHANNEL_ID por una cadena sin espacios (por ejemplo,
feature_mission-2-mars
). Este ID se usará para crear la URL de vista previa asociada con el canal de vista previa.Abre la app web en la URL de vista previa que muestra la CLI. Será similar a esta:
PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app
Para actualizar la URL de la vista previa con cambios, ejecuta el mismo comando nuevamente. Asegúrate de especificar el mismo
CHANNEL_ID
en el comando.
Obtén más información sobre cómo administrar canales de vista previa, incluido cómo configurar el vencimiento de un canal.
Firebase Hosting admite una acción de GitHub que crea y actualiza una URL de vista previa cuando confirmas los cambios en una solicitud de extracción. Aprende a hacer lo siguiente: Configurar y usar esta acción de GitHub.
Paso 3: Implementa
Cuando estés listo para compartir tus cambios con todo el mundo, implementa tu Hosting. el contenido y la configuración de tu canal en vivo. Firebase ofrece varias opciones para este paso según tu caso de uso (consulta las opciones a continuación).
Opción 1: Realiza una clonación a partir del canal de vista previa en el canal publicado
Esta opción garantiza que implementes en tu canal publicado los mismos contenidos y configuración que probaste en un canal de vista previa. Obtén más información sobre la clonación de versiones.
Desde cualquier directorio, ejecuta el siguiente comando:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
Reemplaza cada marcador de posición por lo siguiente:
SOURCE_SITE_ID y TARGET_SITE_ID: Estos son los IDs. de los Hosting sitios que contienen los canales.
- En el sitio Hosting predeterminado, usa el ID del proyecto de Firebase.
- Puedes especificar sitios que se encuentren en el mismo proyecto de Firebase o incluso en diferentes proyectos de Firebase.
SOURCE_CHANNEL_ID: Este es el identificador del canal que está entregando la versión que deseas implementar en tu canal publicado.
- Para un canal publicado, usa
live
como ID de canal.
- Para un canal publicado, usa
Revisa tus cambios (paso siguiente).
Opción 2: Implementa desde el directorio de tu proyecto local hasta el canal publicado
Esta opción te brinda flexibilidad para ajustar la configuración específica del canal publicado o para realizar implementaciones, incluso si no usaste un canal de vista previa.
Desde la raíz del directorio del proyecto local, ejecuta el siguiente comando:
firebase deploy --only hosting
Revisa tus cambios (paso siguiente).
Paso 4: Revisa los cambios en el sitio publicado
Ambas opciones anteriores implementan tu contenido y configuración de Hosting en la los siguientes sitios:
Los subdominios aprovisionados por Firebase para tu sitio Hosting predeterminado y cualquier Hosting sitios adicionales:
SITE_ID.web.app
(comoPROJECT_ID.web.app
)
SITE_ID.firebaseapp.com
(comoPROJECT_ID.firebaseapp.com
)Cualquier dominio personalizado al que te hayas conectado sus sitios de Hosting
Para restringir la implementación a un sitio de Hosting específico, haz lo siguiente: especificar un destino de implementación en tu comando de la CLI.
Otra información y actividades de implementación
Agrega un comentario para la implementación
De manera opcional, puedes agregar un comentario a la implementación. Este comentario se mostrará con el ícono más información sobre la implementación Panel de Hosting en la consola de Firebase. Por ejemplo:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Agrega tareas de secuencia de comandos previas y posteriores a la implementación
De manera opcional, puedes conectar secuencias de comandos de shell al comando firebase deploy
para realizar tareas previas a la implementación o posteriores a ella. Por ejemplo, una trampa posterior a la implementación podría notificar a los administradores cuando se implementa contenido nuevo del sitio. Consulta las
Documentación de la CLI de Firebase para obtener más detalles.
Almacena en caché el contenido implementado
Cuando se hace una solicitud de contenido estático, Firebase Hosting automáticamente almacena en caché el contenido en la CDN. Si vuelves a implementar el contenido de tu sitio, Firebase borra automáticamente todo el contenido estático almacenado en caché en la CDN para que reciben tu nuevo contenido.
Ten en cuenta que puedes configurar el almacenamiento en caché del contenido dinámico.
Realiza entregas mediante HTTPS
Asegúrate de que todos los recursos externos que no estén alojados en Los Firebase Hosting se cargan a través de SSL (HTTPS),incluidas las secuencias de comandos externas. La mayoría de los navegadores no permiten que los usuarios carguen “contenido mixto” (tráfico SSL y no SSL).
Borra archivos
En Firebase Hosting, la forma principal de borrar archivos seleccionados desde un sitio implementado es borrar los archivos de forma local y, luego, volver a implementarlos.
Próximos pasos
Integra en GitHub y, luego, itera el contenido de la vista previa mediante la configuración de la acción de GitHub.
Más información sobre otras funciones de hosting:
Consulta la documentación completa de la CLI de Firebase.
Prepárate para iniciar tu app:
- Establezca el presupuesto. alertas para tu proyecto en la consola de Google Cloud.
- Supervisa la sección Uso y facturación. panel en la consola de Firebase para obtener un panorama general el uso en múltiples servicios de Firebase. También puedes consultar la página Hosting Uso panel para obtener más información información de uso detallada.
- Revisa la Lista de tareas para el lanzamiento de Firebase.