Cómo Implementar una Aplicación React en la Plataforma de Aplicaciones de DigitalOcean

Tutoriales
JavaScript React

El autor seleccionó Creative Commons para recibir una donación como parte del programa Write for Donations.

Nota: Este tutorial muestra cómo implementar activos estáticos y sitios utilizando React y App Platform. Si estás buscando implementar una aplicación React con código dinámico en el backend, consulta el ejemplo de React de App Platform en la documentación oficial.

Introducción

App Platform de DigitalOcean es un producto de Plataforma como Servicio (PaaS) que te permite configurar e implementar aplicaciones desde un repositorio fuente. Después de configurar tu aplicación, DigitalOcean construirá e implementará la aplicación en cada cambio, brindándote el beneficio de un servidor web completo y un canal de implementación con una configuración mínima. Esta puede ser una forma rápida y eficiente de implementar tus aplicaciones React, y si estás utilizando React para construir un sitio sin backend, puedes utilizar la capa gratuita de App Platform.

En este tutorial, desplegarás una aplicación React en la Plataforma de Aplicaciones de DigitalOcean utilizando el nivel gratuito Inicial. Construirás una aplicación con Create React App, enviarás el código a un repositorio de GitHub, luego configurarás la aplicación como una app de DigitalOcean. Conectarás la app a tu código fuente y desplegarás el proyecto como un conjunto de archivos estáticos.

Al final de este tutorial, podrás configurar una aplicación React para que se despliegue automáticamente en cada envío a la rama principal de un repositorio de GitHub.

Requisitos previos

Paso 1 — Crear un Proyecto de React

En este paso, crearás una aplicación de React usando Create React App y construirás una versión desplegable de la misma.

Para comenzar, crea una nueva aplicación utilizando Create React App en tu máquina local. En un terminal, ejecuta el comando para construir una aplicación llamada digital-ocean-app: 

  1. npx create-react-app digital-ocean-app

El comando npx ejecutará un paquete de Node sin descargarlo en tu máquina. El script create-react-app instalará todas las dependencias y creará un proyecto base en el directorio digital-ocean-app. Para obtener más información sobre Create React App, consulta el tutorial Cómo configurar un proyecto de React con Create React App.

El código descargará las dependencias y creará un proyecto base. Puede tomar algunos minutos para completarse. Cuando esté completo, recibirás un mensaje de éxito. Tu versión puede ser ligeramente diferente si usas yarn en lugar de npm: 

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

Ahora que tienes un proyecto base, ejecútalo localmente para probar cómo aparecerá el proyecto en el servidor. Primero, cambia al directorio: 

  1. cd digital-ocean-app

Ejecuta el proyecto utilizando el script npm start: 

  1. npm start

Cuando se ejecute el comando, recibirás una salida con la URL del servidor de desarrollo local: 

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

Abre un navegador en http://localhost:3000 y encontrarás tu proyecto:

Detén el proyecto escribiendo CTRL+C o ⌘+C en el terminal.

Ahora que tienes una aplicación React funcional, puedes subir el código a un repositorio de GitHub.

Paso 2 — Subir el código a GitHub

Para implementar tu aplicación, la Plataforma de Aplicaciones recupera tu código fuente desde un repositorio de código alojado. En este paso, subirás el código de tu aplicación React a un repositorio de GitHub para que la Plataforma de Aplicaciones pueda acceder a él más tarde.

Inicia sesión en tu cuenta de GitHub. Después de iniciar sesión, crea un nuevo repositorio llamado digital-ocean-app. Puedes hacer que el repositorio sea privado o público:

Create React App inicializa automáticamente tu proyecto con git, por lo que puedes configurarlo para enviar el código directamente a GitHub. Primero, agrega el repositorio que te gustaría usar con el siguiente comando:

  1. git remote add origin https://github.com/your_name/digital-ocean-app.git

Luego, declara que deseas hacer push a la rama main con lo siguiente:

  1. git branch -M main

Finalmente, envía el código a tu repositorio:

  1. git push -u origin main

Ingresa tus credenciales de GitHub cuando se te solicite para enviar tu código.

Cuando envíes el código, recibirás un mensaje de éxito. Tu mensaje será ligeramente diferente:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

Ahora has copiado tu código al repositorio de GitHub.

En este paso, has subido tu proyecto a GitHub para poder acceder a él usando DigitalOcean Apps. A continuación, crearás una nueva aplicación en DigitalOcean utilizando tu proyecto y configurarás el despliegue automático.

Paso 3 — Despliegue en la Plataforma de Aplicaciones de DigitalOcean

En este paso, desplegarás una aplicación de React en la Plataforma de Aplicaciones de DigitalOcean. Conectarás tu repositorio de GitHub a DigitalOcean, configurarás el proyecto para que se construya y construirás tu proyecto inicial. Una vez que el proyecto esté en vivo, cada cambio provocará una nueva construcción y actualización.

Al finalizar este paso, podrás desplegar una aplicación con entrega continua en DigitalOcean.

Para comenzar, inicia sesión en tu cuenta de DigitalOcean y presiona el botón Crear, luego selecciona Apps:

A continuación, se te pedirá que enlaces tu repositorio de GitHub. Si aún no lo has conectado, deberás iniciar sesión con tu nombre de usuario y contraseña y otorgar autorización a DigitalOcean para acceder a tus repositorios:

Una vez que enlaces tu cuenta, selecciona el repositorio que deseas conectar en la pantalla de autorización de GitHub. En este caso, estás utilizando el repositorio digital-ocean-app, pero puedes conectar más repositorios si lo deseas:

Después de seleccionar el repositorio, te reconectarás a la interfaz de DigitalOcean. Selecciona digital-ocean-app de la lista de repositorios, luego presiona Siguiente. Esto conectará tu App directamente al repositorio de GitHub:

Ahora que has seleccionado tu repositorio, necesitas configurar la App de DigitalOcean. En este ejemplo, el servidor estará basado en América del Norte al elegir Nueva York en el campo Región, y la rama de despliegue será main. Para tu aplicación, elige la región que esté más cerca de tu ubicación física:

Para este tutorial, estás marcando Autodeployar cambios de código. Esto reconstruirá automáticamente tu app cada vez que actualices el código.

Presiona Siguiente para pasar a la pantalla Configura tu app.

Luego, selecciona el tipo de aplicación que ejecutarás. Dado que React generará activos estáticos, selecciona Sitio Estático del menú desplegable en el campo Tipo.

Nota: Create React App no es un generador de sitios estáticos como Gatsby, pero estás usando activos estáticos, ya que el servidor no necesita ejecutar ningún código del lado del servidor como Ruby o PHP. La aplicación utilizará Node para ejecutar los pasos de instalación y construcción, pero no ejecutará código de la aplicación en el nivel gratuito.

También tienes la opción de usar un script de compilación personalizado. Pero en este caso, puedes seguir con el comando predeterminado npm run build. Es posible que desees crear un script de compilación personalizado si tienes un script de compilación diferente para un entorno de aseguramiento de calidad (QA) o un entorno de producción:

Pulsa Siguiente para avanzar a la página Finalizar y lanzar.

Aquí puedes seleccionar el plan de precios. El nivel gratuito Starter está hecho para sitios estáticos, así que elige ese:

Pulsa el botón Lanzar aplicación de inicio y DigitalOcean comenzará a construir tu aplicación.

La aplicación ejecutará los scripts npm ci y npm build en tu repositorio. Esto descargará todas las dependencias y creará el directorio build con una versión compilada y minificada de todos tus archivos JavaScript, HTML y otros recursos. También podrías crear un script personalizado en tu package.json y actualizar los Comandos en la pestaña Componentes de tu aplicación en la Plataforma de Aplicaciones.

Llevará unos minutos que se complete la compilación, pero cuando termine, recibirás un mensaje de éxito y un enlace a tu nuevo sitio. Tu enlace tendrá un nombre único y será ligeramente diferente:

Pulsa Aplicación en vivo para acceder a tu proyecto en el navegador. Será igual que el proyecto que probaste localmente, pero estará en vivo en la web con una URL segura:

Ahora que tu proyecto está configurado, cada vez que realices un cambio en el repositorio vinculado, se ejecutará una nueva compilación. En este caso, si realizas un cambio en la rama main, DigitalOcean ejecutará automáticamente una nueva implementación. No es necesario iniciar sesión; se ejecutará tan pronto como realices el cambio:

En este paso, creaste una nueva aplicación de DigitalOcean en la Plataforma de Aplicaciones. Conectaste tu cuenta de GitHub y configuraste la aplicación para compilar la rama main. Después de configurar la aplicación, descubriste que la aplicación implementará una nueva compilación después de cada cambio.

Conclusión

La Plataforma de Aplicaciones de DigitalOcean te ofrece una herramienta rápida para implementar aplicaciones. Con una configuración inicial pequeña, tu aplicación se implementará automáticamente después de cada cambio. Esto se puede utilizar en conjunto con React para poner en marcha rápidamente tu aplicación web.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.

Source:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform