Antes de implementar en su sitio en vivo, querrá ver y probar sus cambios. Firebase Hosting le permite ver y probar los cambios localmente e interactuar con los recursos del proyecto backend emulados. Si necesita que sus compañeros de equipo vean y prueben sus cambios, Hosting puede crear direcciones URL de vista previa temporales y compartibles para su sitio. Incluso admitimos una integración de GitHub para implementar desde una solicitud de extracción.
Antes de que empieces
Complete los pasos enumerados en la página de inicio de alojamiento , específicamente las siguientes tareas:
- Instale o actualice Firebase CLI a su última versión.
- Conecte el directorio del proyecto local (que contiene el contenido de su aplicación) a su proyecto de Firebase.
Opcionalmente, puede implementar el contenido y la configuración de Hosting de su aplicación, pero no es un requisito previo para los pasos de esta página.
Paso 1: prueba localmente
Si está realizando iteraciones rápidas o desea que su aplicación interactúe con los recursos del proyecto back-end emulados, puede probar el contenido y la configuración de Hosting localmente. Al probar localmente, Firebase sirve su aplicación web en una URL alojada localmente.
Hosting es parte de Firebase Local Emulator Suite , que permite que su aplicación interactúe con su configuración y contenido de Hosting emulado , así como, de manera opcional, con los recursos de su proyecto emulado (funciones, bases de datos y reglas).
(Opcional) De forma predeterminada, su aplicación alojada localmente interactuará con recursos de proyecto reales , no emulados (funciones, base de datos, reglas, etc.). En su lugar, puede conectar opcionalmente su aplicación para usar cualquier recurso de proyecto emulado que haya configurado. Más información: Base de datos en tiempo real | Almacén de fuego en la nube | Funciones en la nube
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase emulators:start
Abra su aplicación web en la URL local devuelta por la CLI (generalmente
http://localhost:5000
).Para actualizar la URL local con cambios, actualice su navegador.
Prueba desde otros dispositivos locales
De forma predeterminada, los emuladores solo responden a las solicitudes de localhost
. Esto significa que podrá acceder a su contenido alojado desde el navegador web de su computadora, pero no desde otros dispositivos en su red. Si desea realizar pruebas desde otros dispositivos locales, configure su firebase.json
de la siguiente manera:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Al usar firebase serve
, su aplicación interactúa con un backend emulado para su contenido y configuración de Hosting (y funciones opcionales), pero su backend real para todos los demás recursos del proyecto.
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase serve --only hosting
Abra su aplicación web en la URL local devuelta por la CLI (generalmente
http://localhost:5000
).Para actualizar la URL local con cambios, actualice su navegador.
Use firebase serve
para probar desde otros dispositivos locales
De forma predeterminada, firebase serve
solo responde a las solicitudes de localhost
. Esto significa que podrá acceder a su contenido alojado desde el navegador web de su computadora, pero no desde otros dispositivos en su red. Si desea realizar pruebas desde otros dispositivos locales, use el indicador --host
, así:
firebase serve --host 0.0.0.0 // accepts requests to any host
Paso 2: Vista previa y compartir
Si desea que otros vean los cambios en su aplicación web antes de publicarla, puede usar los canales de vista previa.
Después de implementar en un canal de vista previa, Firebase publica su aplicación web en una "URL de vista previa", que es una URL temporal que se puede compartir. Cuando usa una URL de vista previa, su aplicación web interactúa con su backend real para todos los recursos del proyecto.
Tenga en cuenta que aunque las URL de vista previa son difíciles de adivinar (ya que contienen un hash aleatorio), son públicas. Entonces, cualquiera que conozca la URL puede acceder a ella.
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase hosting:channel:deploy CHANNEL_ID
Reemplace CHANNEL_ID con una cadena sin espacios (por ejemplo,
feature_mission-2-mars
). Este ID se usará para construir la URL de vista previa asociada con el canal de vista previa.Abra su aplicación web en la URL de vista previa devuelta por la CLI. Se verá así:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Para actualizar su URL de vista previa con cambios, ejecute el mismo comando nuevamente. Asegúrese de especificar el mismo
CHANNEL_ID
en el comando.
Obtenga información sobre cómo administrar los 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 automáticamente una URL de vista previa cuando realiza cambios en una solicitud de extracción. Aprenda a configurar y usar esta acción de GitHub .
Paso 3: implementar en vivo
Cuando esté listo para compartir sus cambios con el mundo, implemente su contenido y configuración de Hosting en su canal en vivo. Firebase ofrece un par de opciones diferentes para este paso según su caso de uso (vea las opciones a continuación).
Opción 1: Clona desde un canal de vista previa a tu canal en vivo
Esta opción brinda la confianza de que está implementando en su canal en vivo el contenido y la configuración exactos que probó en un canal de vista previa. Obtenga más información sobre la clonación de versiones .
Desde cualquier directorio, ejecute el siguiente comando:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
Reemplace cada marcador de posición con lo siguiente:
SOURCE_SITE_ID y TARGET_SITE_ID : Estos son los ID de los sitios de Hosting que contienen los canales.
- Para su sitio de hospedaje predeterminado, use su ID de proyecto de Firebase.
- Puede especificar sitios que estén en el mismo proyecto de Firebase o incluso en diferentes proyectos de Firebase.
SOURCE_CHANNEL_ID : este es el identificador del canal que actualmente ofrece la versión que desea implementar en su canal en vivo.
- Para un canal en vivo, use
live
como ID de canal.
- Para un canal en vivo, use
Ver sus cambios (siguiente paso).
Opción 2: implemente desde su directorio de proyectos local a su canal en vivo
Esta opción le brinda flexibilidad para ajustar las configuraciones específicas del canal en vivo o para implementar incluso si no ha utilizado un canal de vista previa.
Desde la raíz de su directorio de proyecto local, ejecute el siguiente comando:
firebase deploy --only hosting
Ver sus cambios (siguiente paso).
Paso 4: vea sus cambios en su sitio en vivo
Ambas opciones anteriores implementan su contenido de alojamiento y configuración en los siguientes sitios:
Los subdominios proporcionados por Firebase para su sitio de hospedaje predeterminado y cualquier sitio de hospedaje adicional:
SITE_ID .web.app
(comoPROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(comoPROJECT_ID .firebaseapp.com
)Cualquier dominio personalizado que haya conectado a su(s) sitio(s) de hospedaje
Para restringir la implementación a un sitio de hospedaje específico, especifique un destino de implementación en su comando CLI.
Otras actividades e información de despliegue
Agregar un comentario para la implementación
Opcionalmente, puede agregar un comentario a una implementación. Este comentario se mostrará con la otra información de implementación en el panel de Hosting en Firebase console. Por ejemplo:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Agregar tareas con secuencias de comandos previas y posteriores a la implementación
Opcionalmente, puede conectar scripts de shell al comando de firebase deploy
para realizar tareas previas o posteriores a la implementación. Por ejemplo, un enlace posterior a la implementación podría notificar a los administradores sobre las implementaciones de contenido del sitio nuevo. Consulte la documentación de Firebase CLI para obtener más detalles.
Almacenamiento en caché de contenido implementado
Cuando se realiza una solicitud de contenido estático , Firebase Hosting almacena automáticamente el contenido en la CDN. Si vuelve a implementar el contenido de su sitio, Firebase borra automáticamente todo su contenido estático almacenado en caché en la CDN para que las nuevas solicitudes reciban su nuevo contenido.
Tenga en cuenta que puede configurar el almacenamiento en caché de contenido dinámico .
Servir a través de HTTPS
Asegúrate de que todos los recursos externos que no estén alojados en Firebase Hosting se carguen 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).
Próximos pasos
Integre con GitHub e itere su contenido de vista previa configurando GitHub Action .
Más información sobre otras capacidades de alojamiento:
Eche un vistazo a la documentación completa de Firebase CLI .
Prepárese para lanzar su aplicación:
- Configura alertas de presupuesto para tu proyecto en Google Cloud Console.
- Supervise el panel de uso y facturación en la consola de Firebase para obtener una imagen general del uso de su proyecto en varios servicios de Firebase. También puede visitar el panel de uso de alojamiento para obtener información de uso más detallada.
- Revise la lista de verificación de lanzamiento de Firebase .