Entrando al mundo de producción: desplegando una aplicación de React en un servidor Apache

Imaginémonos lo siguiente: hemos terminado un desarrollo de una aplicación web en React. ¡Enhorabuena! Ahora, solo falta construir la versión de producción y subir nuestra aplicación a un servidor (en este caso con Apache 2). Por muy simple que pueda parecer, si nunca hemos tenido experiencia alguna con servidores y hemos estado muy cómodos en el mundo de las versiones de desarrollo y no de producción, esta tarea puede ser algo complicada, no por los aspectos de lo que en realidad hay que hacer para que funcione, pero si no tenemos idea alguna de qué hacer, ¿por dónde, siquiera, vamos a comenzar?

He preparado una guía rápida de acciones a tomar si lo que deseas es subir una aplicación de React en modo producción, con el fin de poder llenar ciertos agujeros de conocimiento que todos los principiantes hemos tenido en algún momento de nuestras vidas y también con el fin de ahorrar algunas, si no es que muchas, búsquedas en Google sobre el tema.

Paso 1: Preparando nuestra aplicación para el modo de producción.

Lo primero será preparar los archivos de nuestra aplicación para que se generen los binarios de nuestra versión de producción. Dependiendo del boilerplate que estemos usando, los comandos pueden variar, pero lo normal será correr npm run build. Esto debería generarnos en alguna parte una carpeta llamada "build" o "dist", etc., como digo, depende mucho del boilerplate que se esté utilizando. Esta carpeta será la que subiremos a nuestro servidor. Ahora, lo importante es en dónde.

Paso 2: Realizando una conexión con el servidor y colocando los archivos.

Lo primero será ubicar la carpeta var/www/ desde la raíz de nuestro servidor. Algo importante a recordar es que nuestro servidor está corriendo Apache 2, ya que si nuestro servidor corre con Nginx, la historia es distinta. Lo siguiente será dirigirnos a la carpeta de nuestro virtual host, que normalmente es "html", pero si tenemos muchos virtualhosts creados en el archivo de configuración de apache, entonces debemos de ir al que deseamos que guarde los archivos de nuestra aplicación de React. Recordemos que este archivo está usualmente ubicado en la ruta /etc/apache2/sites-available/000-default.conf

Lo que sigue ahora es subir los contenidos de nuestra carpeta /dist o /build (dependiendo del boilerplate) a la raíz de la carpeta del virtual host en nuestro servidor. Es importante que sean solo los contenidos de la carpeta y que no se suba la carpeta, ya que sino luego elementos como el Router de React no podrán funcionar correctamente. 

Paso 3: Haciendo algunas configuraciones.

Una vez hecho esto, es bastante probable que nuestra aplicación de React funcione, pero tal vez no correctamente. Algo que recién mencioné es el Router de React. Si nuestra aplicación utiliza el Router (que seguramente que sí), necesitaremos decirle a Apache que queremos utilizar nuestras rutas, alojadas en nuestra aplicación de React y no las rutas físicas del servidor. Lo que debemos hacer es un mod_rewrite, que nos dará permiso para hacer justamente esto.

sudo a2enmod rewrite 

sudo systemctl restart apache2

Y ya tenemos habilitado el rewrite. Ahora, debemos crear un archivo .htaccess que nos permitirá sobreescribir reglas para acceder a la configuración del servidor y poder sobreescribir nuestras rutas a través del Router de React. Primero, editamos el archivo de configuración de Apache, ubicado en /etc/apache2/sites-available/000-default.conf con lo siguiente:

Luego, debemos reiniciar Apache para que los cambios surtan efecto: sudo systemctl restart apache2. Lo siguiente es crear nuestro archivo .htaccess en la carpeta del web root, con lo siguiente:

Y con esto estamos listos! Con ello ya podemos desplegar nuestra aplicación de React, generada con Webpack en un servidor Apache! En esta ocasión desplegamos en producción una aplicación de front end, con React, lo cual solo requirió de ciertas configuraciones mínimas. En otra ocasión, veremos cómo podemos desplegar una aplicación como un servidor con Express, por ejemplo.

Espero este post pueda aclarar algunas dudas que se pueden tener al principio cuando recién queremos desplegar una aplicación en producción y no sabemos ni por dónde empezar.

Hasta la próxima,

- Brolius