¿Como configurar un dominio con nginx para una aplicación en reactJs ó angularJs ?


Hola! en este post voy a enseñarles a configurar nginx para crear un dominio y ejecutar una aplicación en reactJs o angularJs.

Imagina que tienes un servidor con ubuntu donde quieres alojar 1 dominio o varios que corren una app en reactJs ó angularJs. El objetivo es configurar lo que se conoce como hosts virtuales en la máquina. La verdad es que es realmente sencillo hacer esto. incluso esye dominio esta implementado con nginx y ejecuta wordpress con php ya que tenemos varias páginas alojadas en un mismo servidor.

Si nuestra app en angularJs o reactJs contiene rutas en HTML5 como por ejemplo /about cada vez que recargues el navegador aparecera el error 404 ya que el archivo o la carpeta no existe, en este post mostraremos como configurar nginx para que siempre cargue el archivo index.html y nuestra app que usa el modo HTML5 cargue correctamente las rutas.

Paso 1: Instalar Nginx

Por supuesto, debemos tener Nginx instalado. puedes revisar la documentacion aqui.

Paso 2: Crear el directorio

El siguiente paso es crear una carpeta en nuestro sistema, si queremos añadir un dominio.com, hacemos lo siguiente:

sudo mkdir -p /var/www/{dominio.com ó nombre de la aplicación}/

Paso 3: Clonar repositorio

Si nuestro proyecto esta en git lo idea es clonar el reposotirio en la carpeta que creamos, si usamos react o angular con gulp ejecutamos los comando correspondientes:

 npm run build

ó

 gulp build

Paso4: Crear el Host Virtual en Nginx

A continuación vamos a decirle a Nginx que va a tener un nuevo host virtual que gestionar, es decir, que cuando el usuario introduzca en el navegador dominio.com, el servidor tendrá que leer el archivo de configuración que crearemos para saber qué hacer. En Nginx hay dos rutas importantes. La primera de ellas es sites-available, que contiene los archivos de configuración de los hosts virtuales disponibles en el servidor. La otra es sites-enabled, que contiene los archivos de configuración de los sitios habilitados, es decir, los que funcionan en ese momento. Vamos a crear un archivo para dominio.com ejecutando el siguiente comando:

sudo nano /etc/nginx/sites-available/dominio.com

pregamos el siguiente contenido:

server {
        ## Escucha en el puerto 80 (HTTP)
        listen   80; 

        ## Raíz donde se encuentra la aplicación recuerda que react crea la carpeta build y angular con ## gulp crea la carpeta dist
        root /var/www/dominio.com/build;

        ## Orden de prioridad de los archivos index
        index index.html index.htm;

        ## dominbre de dominio que se ingresa en el navegador
        server_name dominio.com; 

        ##ruta principal
        location / {
            ## si nuestra app  usa modo html5 siempre que cargue el index.html
            try_files $uri  /index.html;
        }      
}
 

A pesar de haber creado este archivo, todavía no podemos acceder a nuestra página Web, ya que la configuración está en sites-available, pero no en sites-enabled. Para habilitar el host virtual crearemos un enlace simbólico entre ambas carpetas:

sudo ln -s /etc/nginx/sites-available/dominio.com /etc/nginx/sites-enabled/dominio.com

Paso 5: Reiniciar Nginx

A menos que reiniciemos Nginx, los cambios no se aplicarán:

sudo service nginx restart

Paso 6: Configurar los DNS

Finalmente tendremos que configurar los registros DNS. si usamos cloudflare apuntamos el nombre de domino a la api de nuestro servidor

Paso 7: Usar certificado ssl

Si en nuestro dominio tenemos un certificado ssl debemos direccionar el puerto 80 (HTTP) al puerto 443 (HTTPS) usando la siguiente configuración:

server {
        ## Escucha en el puerto 443 (HTTPS)
        listen 443  ssl spdy;
        ## dominbre de dominio que se ingresa en el navegador
        server_name dominio.com;
 
        ## activamos el ssl en nginx
        ssl    on;
        ## ruta de nuestro archivo ctr
        ssl_certificate /home/ubuntu/SSL/ssl_dominio.com.ctr;
        ## ruta de archivo key
        ssl_certificate_key /home/ubuntu/SSL/ssl_dominio.com.key;
 
 
        ## Raíz donde se encuentra la aplicación recuerda que react crea la carpeta build y angular con ## gulp crea la carpeta dist
        root /var/www/dominio.com/build;
 
        ## Orden de prioridad de los archivos index
        index index.html index.htm;
 
        ##ruta principal
        location / {
        	## si nuestr app  usa modo html5 siempre que cargue el index.html
            try_files $uri  /index.html;
    	}
}

Gracias por leer y compartir este tutorial cuentame que te parecio y que podemos mejorar aqui algunos libros que me han ayudado a mejorar las buenas practicas a la hora de programar.