Desplegando Backend + Frontend con Nginx

This content originally appeared on DEV Community and was authored by Erick Vasquez

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

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

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

Clonar proyectos:

git clone <tu-repo>
cd project
npm install

Configurar tu .env.

Desplegar el frontend (React sin framework adicional)

cnpm i
npm run build

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/* .

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

http://<ip-del-servidor>

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;
   }
}

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;
  }
}

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

Revisar logs en caso de error:

tail -f /var/log/nginx/

Dockerizar el backend

Referencia: guía de BetterStack.

Compilar la imagen:

docker build . -t api-aci:1

Ejecutar el contenedor:

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

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

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

Certificados SSL

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

sudo ufw enable

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.

This content originally appeared on DEV Community and was authored by Erick Vasquez