Despliege de aplicaciones React y/o Angular

En este post veremos como se puede desplegar una aplicación React o Angular en distintos tipos de servidor. Se enseñara como configurar el servidor correctamente para que el sistema de enrutado de las aplicaciones funcione correctamente.

React y Angular tienen la particularidad que son webs de una sola página, cualquier simulación de enrutado se hace en cliente y no en servidor como una página web tradicional. Esta caracteristica requiere una configuración especial en el servidor que defina que cuando se hace una petición a quela url del servidor responda devolviendo un solo archivo a esa petición.

Debido a que el despliegue de React y de Angular es muy similar y de que se tratam de aplicaciones muy parecidas en su diseño se mostrará el despliegue de la aplicación React en Node y en Apache y la aplicación Angular en Azure.

La aplicación React

La aplicación React que se va a desplegar solo contiene 2 páginas y cada una contiene un enlace a la otra.

Para compilar esta aplicación usaremos el comando:

yarn build

En el directorio de la aplicación y nos generará una carpeta llamada build.

En esa carpeta se encontrarán los archivos de nuestra aplicación necesarios para el despliege.

Despliege en Node

La forma mas sencilla de desplegar la aplicación en Node.js seria intalando Serve con el comando:

yarn global add serve

y ejecutando

serve -s build

Nos mostrara una url que debemos de introducir en el navegador para ver nuestra aplicación.

Pero explicare como realizarlo en Express ya que es mucho mas versátil y Serve solo puede enviar ficheros, no puede realizar ninguna ejecución de código en servidor como por ejemplo definir una api necesaria para una aplicación más avanzada.

Pare ello instalaremos Express usando:

npm install express –save

Y crearemos un fichero llamado server.js que se encargara de responder a las peticiones.

const express = require("express");
const path = require("path");
const app = express();

//definir el root de la aplicacion
app.use(express.static(path.join(__dirname, "build")));

//cuando se acceda al root enviar el fichero del proyecto
app.get("/", function(req, res) {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

//Escuchar en el puerto 9000
app.listen(9000);

y lo ejecutamos usando:

node server.js

Si acedemos al root (“/”) podemos ver la pa´ágina pero si hacemos click en el link nos devuevle un 404 no encontrado ya que el enrutado se realiza mediante la librería de domrouter de react y el servidor lo que esta haciendo es intentar buscar el archivo “otrapagina”.Para solucionar esto debemos de servir en todas las rutas index.html quedando asi server.js:

const express = require("express");
const path = require("path");
const app = express();

//definir el root de la aplicacion
app.use(express.static(path.join(__dirname, "build")));

//cuando se acceda al root enviar el fichero del proyecto
app.get("/*", function(req, res) {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

//Escuchar en el puerto 9000
app.listen(9000);

y si volver a ejecutar

node server.js

Podremos observar que si acedemos en un navegador a localhost:9000 la aplicación funciona como debería. Y ya la podemos dar por desplegada.

Despliege en Apache

Para el despliegue en el servidor http Apache se va a usar la herramienta de XAMPP.

En el panel de control de apache pulsamos Explorer.

ImagenEntramos en htdocs y sustituimos todo su contenido por los archivos compilados

Para que no tengamos en mismo problema que con Node debemos de crear un archivo llamado configuracion.htaccess (lo importante en la extension) con este código

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

Que lo que hace es servir el fichero «index.html» si recibe cualquier petición.

Pulsamos start para iniciar el servidor.

Y si introducimos localhost en nuestro navegador podremos ver que en la web la aplicación react funciona correctamente.

La aplicación Angular

Al igual que la aplicación de react, la aplicación de Angular tiene dos páginas enlazadas entre sí.

Para compilar la aplicación debemos de ejecutar

ng build --prod

y nos creara una carpeta llamada dist con una carpeta con el nombre del proyecto dentro.

Despliege en Azure

En azure portal crearemos una nueva web app, en mi caso creo una con el perfil gratuito ya que no es una aplicación que vaya a tener uso publico. Pero deberias de analizar los requisitos de tu aplicacion y elegir el plan que más se ajuste a tus requerimientos.

Y tras crearla y seleccionarla pulsaremos “Herramientas avanzadas“ e “Ir”

Pulsaremos debugconsole->cmd y se nos motrará una consola de comandos y un sistema de archivos.

Tras esto navegaremos hasta \site\wwwroot y eliminaremos “hostingstart.html” que es el archivo por defecto y lo sustituiremos por los archivos compilados de nuestra aplicación. Para subirlo simplemente arrastra los archivos.

Y ya la tendríamos funcionando nuestra aplicación Angular.

Conclusión

Se ha explicado como se puede desplegar aplicaciones React y Angular en distintos tipos de servidor, es algo sencillo pero que requiere configurar el servidor en el que se vaya a desplegar para que la aplicación para que esta funcione correctamente.

Autor/a: Ismael Pérez Lozano
Curso: Microsoft MCSA Web Applications + MCSD App Builder + Xamarin
Centro: Tajamar
Año académico: 2019-2020
Codigo GitHub: https://github.com/IsmaelPerez-Fsts/React-anguarDeploy

FUENTES

https://create-react-app.dev/docs/deployment

https://medium.com/@achillesmoraites/serve-a-react-app-with-express-server-c5986769bac

https://gist.github.com/ywwwtseng/63c36ccb58a25a09f7096bbb602ac1de

https://medium.com/@kayode.adechinan/host-react-application-on-apache-server-90c803241483

https://www.jamessturtevant.com/posts/How-to-add-edit-and-remove-files-in-your-azure-webapp-using-the-kudu-service-dashboard/