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