DEV Community

Cover image for Desplegando Backend + Frontend con Nginx
Erick Vasquez
Erick Vasquez

Posted on

Desplegando Backend + Frontend con Nginx

#nginx #azure #virtualmachine

Cuando tuve que desplegar un proyecto en una máquina virtual (VM) de Azure, terminé armando los pasos a partir de diferentes tutoriales y documentación. Dejo mis notas aquí por si le sirven a alguien más y le ahorran un buen rato. No es una guía perfecta, pero debería llevarte de cero a tener tu backend y frontend funcionando.

Configuración de la VM en Azure

  • Crear la VM.
  • Asegurarse de abrir los puertos HTTP (80), HTTPS (443) y SSH (22).
  • Guardar el archivo .pem (lo vas a necesitar para conectarte).

Instalar Nginx 

sudo apt install -y nginx
Enter fullscreen mode Exit fullscreen mode

Instalar Node.js (con nvm)

Seguí este tutorial de DigitalOcean.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc

nvm list-remote
nvm install v14.10.0
Enter fullscreen mode Exit fullscreen mode

Instalar Docker

Seguir la documentación oficial.

Configurar Git + SSH 

ssh-keygen
cat ~/.ssh/id_rsa.pub   # agregar esta clave a GitHub
eval $(ssh-agent -s)
ssh-add ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

Clonar proyectos:

git clone <tu-repo>
cd project
npm install
Enter fullscreen mode Exit fullscreen mode

Configurar tu .env.

Desplegar el frontend (React sin framework adicional) 

cnpm i
npm run build
Enter fullscreen mode Exit fullscreen mode

Mover el build al directorio de Nginx:

cd /var/www/html/
sudo su
rm index.nginx-debian.html
cp -rv /home/radar/projects/frontend_aci/dist/* .
Enter fullscreen mode Exit fullscreen mode

Probar en el navegador con la IP pública del servidor:

http://<ip-del-servidor>
Enter fullscreen mode Exit fullscreen mode

Configurar Nginx

Referencia: este artículo.

Ejemplo para el frontend:

server {
   server_name aci.
![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdkfcnvegct8q7up9oqy.png)

intern.org www.aci.awaqintern.org;
   listen 80;

   root /var/www/html/frontend_aci;
   index index.html;

   location / {
      try_files $uri $uri/ /index.html;
   }
}
Enter fullscreen mode Exit fullscreen mode

Ejemplo para el backend:

server {
  server_name api.awaqintern.org;
  location / {
    proxy_pass http://localhost:8080; 
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}
Enter fullscreen mode Exit fullscreen mode

Activar las configuraciones y reiniciar:

sudo ln -s /etc/nginx/sites-available/api.domain.com.conf /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/domain.com.conf /etc/nginx/sites-enabled/
sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Revisar logs en caso de error:

tail -f /var/log/nginx/
Enter fullscreen mode Exit fullscreen mode

Dockerizar el backend

Referencia: guía de BetterStack.

Docker

Compilar la imagen:

docker build . -t api-aci:1
Enter fullscreen mode Exit fullscreen mode

Ejecutar el contenedor:

docker run -d -p 8080:8080 --name api_aci api-aci:1
docker logs -f <id-del-contenedor>
Enter fullscreen mode Exit fullscreen mode

Configurar dominios y DNS

En /etc/hosts, probar mapeando tu IP con el dominio:

4.236.183.100   aci.somosawaq.com
4.236.183.100   api.aci.somosawaq.com
Enter fullscreen mode Exit fullscreen mode

Después configurar el dominio real en Cloudflare (o tu proveedor DNS) apuntando a la IP pública de la VM.

Cloudflare

Certificados SSL

Al final, habilitar el firewall y configurar HTTPS con Certbot (no lo detallo aquí, pero es altamente recomendable):

sudo ufw enable
Enter fullscreen mode Exit fullscreen mode

Este fue el camino que seguí para poner en línea una API en Node.js y un frontend en React en una VM de Azure usando Nginx y Docker. Existen formas más elegantes de hacerlo (CI/CD, Kubernetes, etc.), pero si lo que necesitas es tener algo funcionando rápido, esta configuración cumple.

Top comments (0)