Implemente una aplicación React en Firebase con acciones de GitHub

La implementación de aplicaciones web en Firebase Hosting puede ser complicada. Sin embargo, al usar las acciones de GitHub, puede simplificar y agilizar el proceso de implementación y hacer es increíblemente fácil administrar los flujos de trabajo de implementación a lo largo de toda la vida útil de un software proyecto.

Con solo unos pocos pasos, puede configurar un flujo de trabajo de implementación para automatizar el proceso. Esto incluye el seguimiento de nuevos cambios en las sucursales y el registro de cualquier error. Siga leyendo para saber cómo implementar una aplicación React en el servicio de alojamiento de Firebase.

¿Qué es una canalización de CI/CD?

Una canalización de CI/CD (Integración continua/Entrega continua) es un conjunto de procesos automatizados implementados para hacer posible la creación, prueba e implementación continuas de aplicaciones.

En pocas palabras, se configura una canalización de CI/CD para automatizar los procesos involucrados en el ciclo de vida del desarrollo de software. Esto incluirá el desarrollo real, las pruebas, los lanzamientos (beta, alfa y lanzamiento final), las correcciones de errores e incluso las actualizaciones de funciones. Esencialmente, este proceso hace posible enviar software de calidad de manera fácil y rápida.

Una canalización de CI/CD generalmente cubre un par de etapas, que incluyen:

1. Etapa de origen: esta fase cubre el desarrollo y mantenimiento real del código de la aplicación con una herramienta de control de versiones como Git.
2. Etapa de compilación: este paso ensambla el código fuente con todas sus dependencias en un formato ejecutable.
3. Etapa de prueba: Esta etapa incorpora pruebas automatizadas para validar la calidad del software. El objetivo final es detectar y corregir cualquier error. Puede realizar diferentes tipos de pruebas en esta etapa y una vez que el código ha pasado las pruebas, está listo para implementar.
4. Implementación: esta etapa automatiza el proceso de implementación en el entorno de producción.

La tubería debe monitorear cada etapa para garantizar que no haya errores y mejorar todo el proceso para futuras versiones.

¿Qué son las acciones de GitHub?

GitHub Actions es una función proporcionada por GitHub para automatizar los procesos de flujo de trabajo de implementación de un software en las canalizaciones de CI/CD. Hace posible definir y automatizar flujos de trabajo de implementación directamente desde el repositorio de GitHub de su proyecto.

GitHub Actions tiene varios beneficios:

1. Fácil de usar: GitHub Actions proporciona una interfaz fácil de usar y una sintaxis simple para configurar flujos de trabajo de implementación. Puede definir fácil y rápidamente los flujos de trabajo de su proyecto utilizando el editor incorporado en GitHub.
2. Integración nativa: GitHub Actions es parte de GitHub, lo que facilita la configuración, la administración y la colaboración en flujos de trabajo junto con el código de su proyecto.
3. Flexible y personalizable: GitHub Actions proporciona una plataforma flexible y personalizable que garantiza que pueda crear flujos de trabajo que se ajusten a sus necesidades específicas. Además, admite múltiples lenguajes de programación. Es decir, puede usarlo con la tecnología que prefiera.

Configurar un proyecto de Firebase y el cliente de React

Para empezar, dirígete a base de fuego e inicie sesión con su cuenta de Google. En la página de descripción general de la consola, haga clic en Crear proyecto para configurar un nuevo proyecto y proporcionar el nombre del proyecto.

Próximo, crear una aplicación React e instale las herramientas de línea de comandos de Firebase:

npm install -g firebase-herramientas

Puedes encontrar el código de este proyecto en su repositorio GitHub.

Inicie sesión en Firebase desde su terminal con las credenciales de su cuenta de Firebase.

inicio de sesión de base de fuego: ci

Esto activará el flujo de autenticación de Firebase que le pedirá que ingrese sus datos de inicio de sesión si aún no ha iniciado sesión. Una vez que Firebase lo autentique, imprimirá un token. Copie este token; lo usará para ejecutar comandos de Firebase en su configuración de GitHub Actions.

Finalmente, cree una versión lista para producción de su aplicación:

compilación de ejecución de npm

Este comando genera los archivos y activos necesarios, dentro de una nueva carpeta de 'compilación' en el directorio raíz, necesarios para implementar la aplicación.

Inicialice Firebase en su aplicación React

Ejecute este comando para inicializar Firebase en la carpeta de su proyecto:

inicio de base de fuego

A continuación, confirme que desea inicializar Firebase en su proyecto y continúe y seleccione Hosting: configura archivos para Firebase Hosting y (opcionalmente) configura implementaciones de GitHub Actionde la lista de opciones.

Especifique que desea usar un proyecto existente y seleccione el nombre del proyecto que creó inicialmente en la consola para desarrolladores de Firebase.

A continuación, especifique la carpeta 'compilar' como el público directorio, seleccione No para reescribir todas las URL en la opción /index.html, seleccione No a la opción de configurar compilaciones e implementaciones automáticas desde GitHub y, finalmente, seleccione Sí para sobrescribir la opción de archivo build/index.html.

Después de realizar los cambios anteriores, la CLI creará un archivo firebase.json en el directorio raíz. Este archivo contiene toda la configuración de hospedaje que requerirá el flujo de trabajo de GitHub Actions.

Finalmente, antes de configurar el flujo de trabajo de GitHub Actions, crear un repositorio en GitHuby envíele los archivos del proyecto.

Configuración de acciones de GitHub

En el repositorio de su proyecto en GitHub, seleccione Ajustes > Secretos y Variables > Comportamiento. En la página secreta del repositorio, ingrese FIREBASE_TOKEN como el nombre del secreto y pegue el token de Firebase que copió en el Misterios campos.

Configurar el flujo de trabajo de implementación

Haga clic en la pestaña Acciones en el repositorio de su proyecto y seleccione Configurar Nodejs flujo de trabajo en el Integración continua sección.

A continuación, cambie el nombre del archivo a base de fuego.yml, elimine el código repetitivo en el editor y agregue el siguiente código:

# Este flujo de trabajo llevará a cabo una instalación limpia de dependencias de nodos,
# almacenarlos en caché/restaurarlos, construir el fuente codificar y ejecutar pruebas en diferentes
# versiones de nodo
# Para más información, ver:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nombre: Firebase CI
en:
 empujar:
 sucursales: [principal]
 solicitud de extracción:
 sucursales: [principal]
trabajos:
 construir:
 se ejecuta en: ubuntu-latest
 estrategia:
 matriz:
 versión de nodo: [14.x]

 pasos:
 - usos: acciones/checkout@v2
 - nombre: Usar Node.js ${{ matrix.node-version }}
 usos: acciones/setup-node@v1
 con:
 versión-nodo: ${{ matrix.versión-nodo }}
 - ejecutar: npm install -g npm
 - nombre: instalación, compilación y prueba de npm
 ejecutar: |
 instalar npm
 compilación de ejecución de npm
 - nombre: compilación de archivo
 usos: acciones/subir-artefacto@v2
 con:
 nombre: construir
 camino: construir

 desplegar:
 nombre: Implementar
 necesidades: construir
 se ejecuta en: ubuntu-latest
 pasos:
 - usos: acciones/checkout@v2
 - nombre: Descargar compilación
 usos: acciones/descargar-artefacto@v2
 con:
 nombre: construir
 camino: construir
 - nombre: Implementar en Firebase
 usos: w9jds/firebase-action@master
 con:
 argumentos: implementar --solo alojamiento
 env:
 FIREBASE_TOKEN: ${{ secretos. FIREBASE_TOKEN }}

Estas son algunas de las propiedades clave explicadas:

1. En: eventos que activan las acciones en este flujo de trabajo.
2. Trabajos: especifica los trabajos que debe ejecutar una acción en particular. En este caso, hay dos trabajos: construir y desplegar.
3. Se ejecuta en: la máquina en la que se debe ejecutar esta acción.
4. Pasos: Define una secuencia de pasos para que la Acción realice un trabajo en particular.
5. Con:Especifica cualquier argumento requerido por las Acciones a ejecutar.
6. Nombre: Nombre de un paso particular para un trabajo.

Finalmente, confirme los cambios realizados en este archivo. GitHub activará automáticamente este flujo de trabajo, creando e implementando la aplicación React en el servicio de alojamiento de Firebase. Puede verificar la URL activa de la aplicación en los registros de implementación.

Implementación de aplicaciones mediante acciones de GitHub

GitHub Actions proporciona un enfoque de implementación simplificado. Garantiza que pueda implementar aplicaciones de manera consistente y confiable, independientemente de la tecnología en la que las construya.

Además, puede personalizar fácilmente el flujo de trabajo de implementación utilizando las herramientas de implementación integradas para satisfacer sus necesidades específicas de canalización de CI/CD.