¿Cómo implementar aplicaciones frontend en páginas de Cloudflare?

Desplegar aplicaciones frontend es uno de los grandes problemas hace un tiempo. Pero hoy, es pan comido. Incluso un principiante puede implementar aplicaciones con la ayuda de los servicios de súper alojamiento.

Muchas plataformas de alojamiento nos permiten implementar aplicaciones frontend en minutos. Nuestro sitio estará listo públicamente en minutos.

¿No es genial?

Sí lo es.

Aprendamos a implementar aplicaciones frontend en las páginas de Cloudflare.

Aplicaciones frontales

Antes de sumergirnos en la parte de implementación de la aplicación, debemos crear una aplicación frontend.

¿Cómo hacerlo?

Incluso tú lo sabes. Entonces, no vamos a discutirlo aquí ahora.

Sabemos que existen muchas bibliotecas, marcos para que podamos crear aplicaciones frontend. Pero, la parte central de esas bibliotecas o marcos es JavaScript. Ya sabe todo eso, ya que ya está buscando una forma de implementar su aplicación frontend. Puede omitir esta parte y saltar a la implementación si solo está buscando la parte de implementación.

Hay React, Vue, Angular, JavaScript y muchos más. Uno puede crear aplicaciones basadas en sus requisitos.

Como podemos ver, hay un montón de opciones para crear aplicaciones frontend. ¿Qué pasa con el despliegue? ¿Es el mismo proceso para todas las aplicaciones frontend?

Sí, el proceso de implementación es el mismo para todas las aplicaciones frontend. Sin embargo, el proceso que hace que las aplicaciones frontend estén listas para su implementación puede variar según las bibliotecas y los marcos.

Habrá un comando para compilar para la mayoría de las aplicaciones front-end creadas con bibliotecas y marcos. Es posible que ya lo sepas. Si no sabe qué es, es posible que deba investigarlo en función de su biblioteca o marco de interfaz.

Necesitamos una aplicación para implementar. Configuremos una aplicación simple. Puede omitir esta parte si ya tiene una aplicación frontend para implementar.

Configuración

Antes de la configuración, debemos ser conscientes de una cosa. El punto de entrada debe ser índice.html para que nuestra aplicación frontend la implemente en las páginas de Cloudflare. Puede encontrar el archivo índice.html (la ubicación puede variar según la biblioteca y el marco) después del proceso de compilación.

Vamos a crear un sencillo Reaccionar y Simple JavaScript aplicación para la demostración. Puede elegir cualquier otra biblioteca o marco con el que esté familiarizado. vamos a configurar Reaccionar aplicación primero.

Ejecute el siguiente comando para crear la aplicación React.

npx create-react-app demo

Actualiza la aplicación con tu creatividad o déjala como está. Solo cambiaré algo para asegurarme de que se implemente correctamente al final.

Ahora, vamos a crear una aplicación de JavaScript simple.

Teniendo índice.html es obligatorio para nosotros. Entonces, vamos a crear el archivo con el nombre índice.html. Ahora, puede agregar más archivos como estilos.css, script.js, imágenes, etc., para que se vea elegante. Pero no es obligatorio, sin embargo :).

Nuestra sencilla configuración para la implementación ya está completa. ¿Qué sigue? Es tiempo de despliegue. Sumérgete en él.

Despliegue

Las páginas de Cloudflare nos permiten implementar nuestra aplicación frontend desde GitHub. Por lo tanto, hay dos partes en el proceso de implementación.

Primero, necesitamos tener nuestro código de aplicación en GitHub. En segundo lugar, implementar la aplicación en las páginas de Cloudflare.

La mayoría de las veces, no tendrá que preocuparse por la primera parte, ya que mantenemos nuestro código en las plataformas de alojamiento desde el primer día del proyecto. Puede omitir la primera parte y dirigirse a la parte de implementación.

Si no envió su código a GitHub o está en otras plataformas de alojamiento de código, es posible que deba cambiarlo a GitHub para implementarlo en las páginas de Cloudflare. Puede seguir los pasos a continuación para enviar su código a GitHub o hacerlo por su cuenta.

1. Enviar código a GitHub

¿Tienes una cuenta de GitHub? Sí, supongo que en la mayoría de los casos. En caso de que no tenga uno, cree uno aquí.

Vaya a GitHub e inicie sesión en su cuenta. Crea un repositorio con el nombre de tu proyecto. Aquí, lo estamos nombrando como el manifestación.

Repositorio GitHub

Un repositorio recién creado tendrá el siguiente aspecto. Muestra algunos comandos de git para llenar tu repositorio con código.

Repositorio GitHub

Empujemos nuestro código al repositorio que acabamos de crear. Puede seguir los pasos a continuación o hacerlo usted mismo si ya está familiarizado con él. Comencemos abriendo nuestro proyecto en terminal o cmd.

Inicialice el git con el comando git init. Agregue todos sus cambios a git local usando el comando git add .. Confirme los cambios con el comando git commit -m “message”. Reemplace la mensaje con un mensaje adecuado para la confirmación. Ahora, tenemos que conectar nuestro repositorio remoto al proyecto local. El comando para conectarlo es git remote add origin ‘your_repo_path’. Reemplazar su_repo_ruta con su repositorio remoto. La ruta del repositorio será la siguiente [email protected]:nombre de usuario/nombre_repo. La ruta de mi repositorio para el manifestación es [email protected]:hafeezulkareem/demo. El paso final es enviar el código a nuestro repositorio remoto. Podemos hacerlo usando el comando git push -u origin main.

Veamos las instantáneas de código en el repositorio de GitHub.

Código del repositorio de GitHub

Código de repositorio de JavaScript

Hemos terminado de enviar nuestro código a Github. Nuestra siguiente tarea es implementarlo en el Páginas de Cloudflare. Sin más preámbulos, comencemos a implementar.

2. Implementación en páginas de Cloudflare

Implementemos el sitio en las páginas de Cloudflare. Antes de continuar, debemos crear una cuenta de Cloudflare. Si aún no tiene una cuenta en Cloudflare, cree una aquí. Después de completar la creación de la cuenta de Cloudflare, está listo para implementar su sitio.

Vaya al sitio de páginas de Cloudflare. Ingrese a su cuenta. Verá el tablero de la siguiente manera.

Panel de control de páginas de Cloudflare

Si ha iniciado sesión en el Llamarada de la nube sitio web, es posible que no vea el panel de control de sus páginas. Navegue al panel de control de las páginas haciendo clic en el Paginas en el lado derecho de su tablero de Cloudflare. Consulte la imagen de abajo.

Panel de CloudflarePanel de Cloudflare

Clickea en el crear un proyecto botón del tablero de las páginas.

Crear proyectoCrear proyecto

Navegará a la página siguiente.

Proyecto - Primer Paso

Clickea en el Conectar cuenta de GitHub para obtener nuestro repositorio de aplicaciones de GitHub. Será redirigido a la página de aplicaciones de GitHub para autorizar las páginas de Cloudflare.

Autorización de páginas de GitHub Cloudflare

Podemos dar acceso a todos los repositorios o a los seleccionados. Es mejor dar acceso a los repositorios que estamos implementando en las páginas de Cloudflare. Puede dar acceso a todos los repositorios si lo desea. Seleccione una de las dos opciones. Si ha seleccionado Todos los repositorios, no es necesario seleccionar el repositorio específico de los repositorios. Clic en el botón Instalar y autorizar. Si ha seleccionado Seleccionar solo repositorios, luego debe seleccionar los repositorios del menú desplegable. Clickea en el Seleccionar repositorios menú desplegable que aparece después de seleccionar el Seleccionar solo repositorios opción.

Menú desplegable de repositorios

Ingrese el nombre de su repositorio de la siguiente manera.

Repositorio de búsqueda

Su repositorio se mostrará una vez que ingrese el nombre. Seleccione el repositorio. Puede ver el repositorio seleccionado en la parte superior de la lista de la siguiente manera.

Repositorio seleccionado

Clickea en el Instalar y autorizar botón. Se le redirigirá a la página de implementación de las páginas de Cloudflare. Verá todos los repositorios autorizados en la página.

Repositorios Autorizados

Seleccione el repositorio que desea implementar.

Selección del repositorio para implementar

Después de seleccionar el repositorio para implementar, haga clic en el Comenzar configuración botón.

Comenzar configuración

Lo llevará a los siguientes pasos en el proceso de implementación, es decir, Configurar compilaciones e implementaciones.

Configurar compilaciones e implementaciones

Cuando te desplazas hacia abajo, encontrarás una sección llamada Configuración de compilación. Tenemos que seleccionar el proceso de compilación apropiado para nuestra aplicación frontend. Tenemos que seleccionar el proceso de compilación según el marco o la biblioteca que estamos usando. Haga clic en el Marco preestablecido para ver todas las opciones.

Build - Opciones preestablecidas de Framework

Aquí, estamos desplegando Reaccionar y JavaScript simple aplicaciones Si está implementando un Reaccionar aplicación, luego seleccione Crear aplicación de reacción del menú desplegable. Para JavaScript simple aplicación sin ningún paquete, luego seleccione Ninguna.

Configuración de compilación de la aplicación ReactConfiguración de compilación de la aplicación React

Configuración de compilación de JavaScript simple

Si está implementando alguna otra aplicación frontend, seleccione la apropiada Marco preestablecido opción de construcción. Podemos seleccionar Ninguna y entrar en la costumbre comando de compilación así como. Según su aplicación, selecciónela. Después de la configuración de configuración de compilación, haga clic en el Guardar e implementar botón para finalizar nuestro proceso de implementación. Una vez que haga clic en el Salvar e implementar botón, el proceso de implementación comenzará de la siguiente manera.

Proceso de implementación

El proceso tomará unos minutos para implementar nuestro sitio. Espera y disfruta. Después de completar el proceso de implementación, le muestra la URL del sitio con un mensaje de éxito.

Éxito de la implementación

Visite el sitio con la URL dada.

demostración en vivodemostración en vivo

demostración en vivo

Podemos actualizar la configuración del sitio desde la página del proyecto.

Configuración del sitio

Las páginas de Cloudflare implementarán automáticamente las actualizaciones cada vez que insertemos código nuevo en el repositorio.

Eso es todo. Hemos terminado con la implementación de nuestra aplicación frontend en las páginas de Cloudflare.

Conclusión

¡Viva! hemos implementado nuestra aplicación frontend en las páginas de Cloudflare. Después de implementar la aplicación frontend, es posible que deba cambiar la configuración, actualizar cosas, etc.; consulte la documentación de Cloudflare aquí. Si desea ver los pasos para implementar una guía de marco específica, puede dirigirse a la sección de guías de marco en la documentación.

A continuación, ¿qué tal implementar la interfaz en Netlify?

Nota: Es posible que los sitios de demostración que se muestran en el artículo no estén disponibles públicamente después de un tiempo.

Feliz implementación 🙂

Publicaciones relacionadas

Botón volver arriba