Configuración de archivos estáticos NGINX Django

Configurar correctamente los archivos estáticos en producción marca la diferencia entre una interfaz rota y una experiencia fluida. Aquí verás, paso a paso y sin rodeos, cómo alinear Django y NGINX para que CSS, JavaScript e imágenes carguen bien, cómo evitar 404 en /static/ y cuándo considerar S3 para optimizar costos.

¿Qué revelan los 404 en el Django admin sobre los archivos estáticos?

Al ingresar a withpython.com/admin el panel se ve "feo" porque faltan estilos. El debugger muestra múltiples 404 hacia /static/. Esto indica que el servidor web no está sirviendo los archivos estáticos aunque el proyecto de Django esté configurado para generarlos.

• Los archivos estáticos incluyen imágenes, CSS y JavaScript.
• El proyecto contempla uso de S3 como almacenamiento opcional con un flag booleano.
• Si S3 está activo, se usa ese flujo; si no, se espera servir desde el servidor.
• La URL /static/ existe en la configuración, pero la carpeta con los archivos aún no estaba creada ni mapeada en NGINX.

Idea clave: sin la carpeta generada y sin la regla de NGINX que apunte a ella, el navegador pedirá recursos a /static/ y obtendrá 404.

¿Cómo preparar el proyecto con collect static y verificar la carpeta?

Se actualiza el código y se crea la carpeta de estáticos que Django centraliza para producción. Aun así, hace falta decirle a NGINX dónde encontrarlos.

• Conexión por SSH, activar el entorno virtual y entrar al proyecto.
• Ejecutar actualización del repositorio con git pull.
• Al listar, no aparece aún la carpeta de estáticos unificados.
• Ejecutar el comando de Django collect static para copiar los recursos en el directorio de destino.
• Confirmar con un listado que la carpeta ya existe.
• Aunque exista, el sitio seguirá con 404 hasta configurar NGINX.

Código mencionado:

git pull
collect static

Habilidades y conceptos aplicados: despliegue con control de versiones. Gestión de entornos virtuales. Generación de carpeta de static files para producción. Diagnóstico de errores 404.

¿Cómo configurar NGINX para servir /static/ correctamente?

El paso definitivo es crear una regla en NGINX que apunte a la carpeta generada por collect static. Además, validar la configuración antes de reiniciar evita caídas por errores de sintaxis.

• Editar el archivo de configuración en "nginx sites enable" con privilegios.
• Crear una location /static/ y apuntar a la carpeta donde quedaron los archivos.
• Agregar el slash final en /static/ para incluir todos los recursos.
• Guardar y validar con sudo nginx -t para detectar errores como el punto y coma faltante.
• Reiniciar seguro con sudo service nginx restart.

¿Qué cambios hacer en la configuración de nginx?

Se agrega un bloque para servir los archivos desde la ruta de estáticos generada por Django.

location /static/ {
    # ruta: server/apps/django basic production/static files/
}

Puntos clave:

• location /static/ mapea las solicitudes del navegador.
• La ruta debe ser la carpeta creada por collect static.
• El punto y coma es obligatorio en las directivas de NGINX.

¿Cómo validar y reiniciar nginx sin caer el sitio?

La validación previa protege la disponibilidad del sitio.

sudo nginx -t
sudo service nginx restart

Buenas prácticas:

• Validar siempre antes de reiniciar para evitar downtime por configuración inválida.
• Confirmar visualmente que las URLs de recursos ya cargan sin 404.

¿Cuándo usar S3 para los static files?

Servir desde el servidor web es correcto y eficiente, pero si quieres reducir costos y evitar solicitudes al servidor, puedes usar un bucket de S3.

• Habilitar el flag booleano para S3 en el proyecto.
• Configurar el bucket y permisos adecuados.
• Actualizar el archivo .env para usar S3.

Beneficios:

• Menos carga en el servidor principal.
• Mejor distribución de archivos estáticos.
• Escalabilidad y ahorro potencial.

¿Te quedó alguna duda sobre el mapeo de /static/ o la validación con -t? Comparte tu caso y lo revisamos juntos.