Administración de Archivos Estáticos en Django: Una Guía Integral

En este tutorial, examinaremos qué son los archivos estáticos en Django, los beneficios de gestionarlos de manera eficiente, su propósito en aplicaciones web, y configuraremos un proyecto demostrativo para ilustrar cómo gestionar y servir archivos estáticos utilizando diferentes métodos y herramientas.

Django es un framework de desarrollo web de alto nivel en Python que proporciona a los desarrolladores web una poderosa herramienta para crear aplicaciones web de forma rápida y eficiente.

Aunque Django es excelente para crear aplicaciones web rápida y eficientemente, también es igual de importante cuidar el aspecto y la sensación de las aplicaciones web que desarrollas. Para lograrlo, debes aprender a gestionar los recursos que soportan y proporcionan el aspecto y la sensación de tus aplicaciones.

Archivos Estáticos en Django

En Django, los archivos estáticos son aquellos archivos que se sirven directamente al cliente sin ningún procesamiento por parte del servidor.

Estos normalmente incluyen archivos CSS, JavaScript, imágenes, iconos, fuentes y otros recursos necesarios para el aspecto y la sensación de tu aplicación web.

Django proporciona mecanismos para gestionar y servir estos archivos estáticos de manera eficiente, asegurando una experiencia de usuario fluida.

Gestionar archivos estáticos de manera eficiente

Para garantizar que los usuarios de tu aplicación web tengan una buena experiencia de usuario y que la aplicación funcione como se espera, debes gestionar los archivos estáticos de manera eficiente.

Organizar y cachear correctamente los archivos estáticos asegurará tiempos de carga de páginas rápidos, y que la respuesta sea mejorada, aumentando la satisfacción general del usuario.

Django ofrece varias herramientas y convenciones para ayudar en el manejo de archivos estáticos.

El propósito de los archivos estáticos en aplicaciones web

Los archivos estáticos son muy importantes, ya que establecen cómo se ve y se siente una aplicación web. Definen cómo se estilizan los componentes en una aplicación, cómo se comportan en respuesta a las interacciones del usuario, y finalmente qué ve un usuario cuando visita una aplicación web en particular.

Al servir los archivos estáticos de manera eficiente, podrás crear una interfaz de usuario visualmente atractiva y receptiva, lo que hace que la aplicación sea más atractiva y fácil de usar.

Configuración de un Proyecto de Demostración

Para ilustrar los conceptos de gestión de archivos estáticos en Django, configuraremos un proyecto de demostración desde cero.

Este proyecto incluirá la creación de un proyecto Django, la configuración de la configuración de archivos estáticos e integrar archivos estáticos en una aplicación web simple.

Siguiendo el proyecto de demostración, adquirirás experiencia práctica en la gestión de archivos estáticos en Django y comprenderás su importancia en el desarrollo web.

Para los fines de este tutorial, crearemos una página de destino de manera que cuando los usuarios visiten la página principal de nuestro proyecto, verán un encabezado estilizado dándoles la bienvenida al sitio. También mostrará la fecha de hoy utilizando JavaScript, y también serviremos una imagen para completar la página.

Creación de un directorio para albergar el proyecto

Comencemos creando un directorio que albergue el proyecto de demostración utilizando el siguiente comando:

mkdir sitepoint_django_static_tut

Creación de un entorno virtual

Se recomienda que crees y aísles nuevos proyectos dentro de entornos virtuales. Esto significa que cada proyecto tendrá sus propias dependencias sin afectar la instalación global de Python.

Usaremos el paquete virtualenv para crearlo. Si no está instalado en tu entorno de desarrollo, instálalo utilizando pip install virtualenv, y crea un entorno virtual con el siguiente comando:

virtualenv myenv

El comando anterior crea un entorno virtual llamado myenv. Para utilizar el entorno virtual, debes activarlo:

Linux/macOS:

. myenv/bin/activate

Windows:

. myenv\Scripts\activate

Instalación de dependencias

Una vez que el entorno virtual esté activo, ahora puedes proceder a instalar las dependencias de tu proyecto. Como punto de partida, instalaremos Django. Instalaremos otras dependencias a medida que lleguemos a las secciones que demuestren su uso:

pip install Django

Esto instalará la versión estable más reciente de Django, que a la fecha de redacción es la versión 5.0.

Creando un proyecto Django

Una vez que se haya instalado Django correctamente, ahora tienes acceso a los comandos de administración de Django. Utilicémoslos para crear un proyecto Django en el entorno virtual:

django-admin startproject sitepoint_django .

El comando anterior creará un proyecto Django llamado sitepoint_django y el punto al final significa que pretendemos crear el proyecto en el directorio actual.

Creando una aplicación de demostración

Para ilustrar los diversos conceptos de la gestión de archivos estáticos, necesitamos crear al menos una aplicación Django en nuestro proyecto:

python manage.py startapp  static_demo

Esto creará una nueva aplicación en nuestro proyecto llamada static_demo. Para que sea reconocida por nuestro proyecto, debemos agregarla a la configuración de aplicaciones instaladas en el archivo settings.py de nuestro proyecto. Abre sitepoint_django/settings.py, ve a la configuración INSTALLED_APPS y agrega static_demo.apps.StaticDemoConfig al final de la lista, como se muestra a continuación:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # otras aplicaciones
    'static_demo.apps.StaticDemoConfig',
]

Creando la plantilla de la página de inicio

Vamos a renderizar algo de HTML cuando el usuario visite la página de inicio de nuestro sitio. En la aplicación static_demo, crea un directorio templates, y dentro de él crea otro directorio y nómbralo static_demo. En este directorio, crea una plantilla y nómbrala index.html para que el camino sea static_demo/templates/static_demo/index.html.

Coloca el siguiente código en index.html:

<!-- static_demo/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>
</head>
<body>
    <h2>Hello there, welcome to our great site!</h2>
</body>
</html>

Creando la vista de índice

Para que la plantilla se muestre a los usuarios cada vez que visiten la página de inicio de nuestra aplicación, necesitamos crear una función de vista que será desencadenada para renderizar la plantilla home.html. Abre el archivo static_demo/views.py e introduce el siguiente código:

# static_demo/views.py

from django.shortcuts import render

def index(request):
    return render(request, "static_demo/home.html")

Creando el archivo URL de static_demo

Queremos que la vista de índice en la aplicación static_demo renderice la página de inicio cada vez que un usuario visite nuestro sitio. Por lo tanto, crearemos un esquema de URL para la función de vista que renderizará la página de inicio. Para ello, necesitamos crear un archivo urls.py para la aplicación static_demo, y luego conectar el archivo de URL de static_demo al archivo de URL del proyecto.

Por lo tanto, en la aplicación static_demo, cree un archivo y nómbrelo urls.py y agregue el siguiente código en él:

# static_demo/urls.py

from django.urls import path
from .import views

app_name = 'static_demo'

urlpatterns = [
    path('', views.index, name="index"),
]

El código anterior crea una URL para la vista de índice de nuestro proyecto, por lo que si un usuario visita algo como http://oursite.com/, o si visita http://127.0.0.1:8000 en desarrollo, se llamará a la vista de índice para responder a eso.

Agreguémoslo al archivo de URL del proyecto. Abra el archivo sitepoint_django/urls.py y agregue el siguiente código:

# sitepoint_django/urls.py

from django.contrib import admin
from django.urls import path, include # agregue una importación para include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('static_demo.urls')), # agregue esta línea
]

El código anterior introduce algunos cambios en el archivo urls.py predeterminado. Hemos agregado una importación para la función include, que le indica a Django que estamos incluyendo static_demo.urls.

Probando el proyecto

La configuración inicial del proyecto se ha completado en este punto. Ejecutemos el servidor de desarrollo para ver si todo está bien atado.

Ejecute el proyecto con el siguiente comando:

python manage.py runserver

Si todo está configurado correctamente, deberías poder visitar http://127.0.0.1:8000. Verás algo de texto sin formato dándote la bienvenida al sitio.

Servir Archivos Estáticos en Desarrollo

Para agregar estilo a la página, JavaScript para la fecha e imagen, debemos realizar cambios en el proyecto. Hagámoslo incrementalmente y veamos cómo podemos servir los diferentes archivos estáticos de diferentes maneras, comenzando con el entorno de desarrollo.

Configurar un directorio de archivos estáticos

Django recomienda que todos los recursos estáticos se administren por aplicación: es decir, todos los CSS, JS e imágenes que una aplicación en particular necesita deben residir dentro de esa aplicación. Así que actualicemos la aplicación static_demo y creemos un directorio llamado static, y dentro de él cree otro directorio llamado static_demo. Luego, en el directorio static_demo cree tres directorios más: css, js y images. Al final, tendremos una estructura similar a la siguiente:

static_demo/
    └── static/
        └── static_demo/
            ├── css/
            ├── js/
            └── images/

La razón por la que querrías crear un directorio static_demo en el directorio static es para ayudarte a nombrar espacios de tus recursos estáticos. Si tienes más de una aplicación y tienes el CSS en ambas aplicaciones llamado como styles.css, Django solo funcionaría con el primer archivo de hoja de estilo que encuentre, ya que no podría distinguir entre los demás. Por lo tanto, los nombramos de manera que Django pueda saber qué archivo de recurso estamos refiriéndonos en nuestros templates.

Creando los archivos estáticos

En este paso, configuremos solo activos estáticos mínimos que demostrarán cómo puede servir los archivos en desarrollo.

En el directorio js, cree un archivo y nómbrelo todays_date.js, y agregue el siguiente código:

/* static_demo/js/todays_date.js */

let formattedDate = new Date().toLocaleDateString();

document.getElementById('todaysDate').innerText = `The date today is ${formattedDate}`;

El código anterior obtiene la fecha de hoy desde JavaScript, la formatea en una cadena y luego la muestra en un div con un ID de todaysDate.

En el directorio css, cree un archivo, nómbrelo styles.css, y agregue el siguiente código:

/* static_demo/css/styles.css */

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
}

h2 {
    font-size: 24px; 
    color: green;
}

El código anterior utiliza el diseño Flexbox para centrar todos los elementos en la página tanto horizontal como verticalmente. También establece el tamaño de fuente del elemento H2 en 24px y su color en verde.

Para la imagen, puede usar cualquier imagen de su agrado. Solo copie alguna imagen en el directorio images y tenga en cuenta el nombre.

Configurando la configuración de archivos estáticos

Para servir archivos estáticos en desarrollo, se deben establecer varias cosas en el archivo settings.py de Django. Abra el archivo sitepoint_django/settings.py y verifique si tiene las siguientes configuraciones:

# sitepoint_django/settings.py`

DEBUG=True

En el desarrollo, generalmente se recomienda establecer DEBUG en True en la configuración de tu proyecto Django. Esta configuración activa diversas características de depuración, incluidos mensajes de error detallados y trazas de pila, que son imprescindibles para diagnosticar y solucionar problemas durante el desarrollo.

Además, cuando DEBUG está configurado en True, la aplicación django.contrib.staticfiles sirve automáticamente archivos estáticos desde el directorio static de cada aplicación. Este comportamiento simplifica el proceso de desarrollo al eliminar la necesidad de configuración manual para servir archivos estáticos.

En la configuración INSTALLED_APPS, verifica si tienes la aplicación django.contrib.staticfiles agregada. Si no es así, añádela encima de las aplicaciones que tienes en el proyecto. Por ejemplo, en este proyecto añádela encima de la cadena static_demo de la aplicación, como se muestra a continuación:

# sitepoint_django/settings.py`

INSTALLED_APPS = [

    'django.contrib.staticfiles',
    'static_demo.apps.StaticDemoConfig',
]

La aplicación django.contrib.staticfiles proporcionada por Django es esencial para servir archivos estáticos durante el desarrollo. Por defecto, recorre las aplicaciones de tu proyecto para localizar directorios de archivos estáticos dentro de cada aplicación. Sin embargo, si tienes recursos estáticos adicionales que no están asociados a ninguna aplicación en particular, aún puedes hacerlos accesibles a django.contrib.staticfiles configurando la opción STATICFILES_DIRS en el archivo settings.py de tu proyecto. Esta configuración te permite especificar directorios adicionales donde se encuentran los archivos estáticos. Por ejemplo:

# sitepoint_django/settings.py`

STATICFILES_DIRS = [
    "/dir/with/staticfiles/static",
    "/someother/dir/static",
    "/home/example.com/static",
]

Además de DEBUG y STATICFILES_DIRS, otra configuración importante que debes incluir en el archivo de configuración de tu proyecto Django es STATIC_URL. Aunque Django proporciona un valor predeterminado para STATIC_URL, puedes definirlo explícitamente en tu archivo settings.py si aún no está presente.

La configuración STATIC_URL especifica la URL base desde la cual se servirán los recursos estáticos. Por ejemplo, la configuración STATIC_URL = "static/" indica a Django que sirva los recursos estáticos desde la ruta de URL /static/. Esto significa que, por ejemplo, el archivo de estilos ubicado en la aplicación static_demo estará disponible en una URL como http://127.0.0.1:8000/static/static_demo/css/styles.css.

Actualizar la plantilla

Para utilizar los archivos estáticos en la plantilla, debemos actualizarla con el siguiente HTML:

<!-- static_demo/index.html -->

<!-- agregar funcionalidad de manejo de archivos estáticos -->
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sitepoint Django Tutorial</title>

    <!-- enlace al archivo CSS a continuación -->
    <link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 
</head>
<body>
    <h2>Hello there, welcome to our great site</h2>
    <p id="todaysDate"></p>
    <!-- enlace a la imagen a continuación -->
    <img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

    <!-- enlace al archivo JS a continuación -->
    <script src="{% static 'static_demo/js/todays_date.js' %}"></script>
</body>
</html>

Esa actualización de la plantilla nos presenta una nueva etiqueta: {% load static %}. Esta etiqueta carga la funcionalidad de manejo de archivos estáticos proporcionada por el motor de plantillas de Django. Incluir esta etiqueta en un archivo de plantilla de Django nos permite utilizar etiquetas de plantilla y filtros relacionados con archivos estáticos.

Por ejemplo, al utilizarlo en nuestra plantilla, podemos hacer referencia a archivos estáticos como imágenes, CSS y JS en elementos HTML. También permite que Django genere URLs para las referencias de activos estáticos:

<link rel="stylesheet" href="{% static 'static_demo/css/styles.css'%}"> 

<img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

<script src="{% static 'static_demo/js/todays_date.js' %}"></script>

Con esos ajustes y la actualización de la plantilla, debemos ejecutar el proyecto y verificar si los archivos se sirven en desarrollo. Ejecute el proyecto utilizando el siguiente comando:

python manage.py runserver

Si todo está configurado correctamente, deberíamos tener el servidor de desarrollo en funcionamiento en http://127.0.0.1:8000. Si visitamos ese enlace, deberíamos tener una página similar a la siguiente.

Tener una imagen similar muestra que los archivos estáticos se han aplicado correctamente.

Debes tener en cuenta que en el desarrollo de Django, cuando DEBUG=True en la configuración de tu proyecto, y django.contrib.staticfiles está habilitado, esto permite que el servidor de desarrollo de Django (runserver) sirva archivos estáticos. En esta situación, cualquier cambio realizado en archivos estáticos, como CSS, JavaScript o imágenes, es detectado y aplicado automáticamente por Django. Este proceso sin problemas simplifica enormemente el desarrollo, ya que verás instantáneamente los efectos de tus cambios sin necesidad de refrescar manualmente o reiniciar el servidor.

Sin embargo, en entornos de producción, servir archivos estáticos generalmente implica usar un servidor web o CDN separado. En este caso, los cambios en los archivos estáticos pueden no ser detectados y aplicados automáticamente por Django, lo que requiere una intervención manual para asegurar que los archivos actualizados se sirvan a los usuarios. Además, si opta por servir manualmente archivos estáticos utilizando un método diferente, como la vista django.views.static.serve(), la detección automática y aplicación de cambios puede no ocurrir, y puede necesitar implementar sus propios mecanismos para manejar las actualizaciones de archivos estáticos.

Servir Archivos Estáticos con WhiteNoise

En desarrollo, mientras django.contrib.staticfiles simplifica el proceso de servir activos estáticos, asegurando actualizaciones sin problemas a medida que realizas cambios.

Sin embargo, al pasar a producción, configuraciones como DEBUG=True deben deshabilitarse y los archivos estáticos podrían servirse desde un CDN o otro servidor. Esto requiere una solución que una ambos entornos, permitiendo el servicio fluido de archivos durante el desarrollo mientras refleja fielmente el entorno de producción.

Entra el paquete WhiteNoise. Diseñado para integrarse sin problemas con Django, WhiteNoise ofrece una solución robusta para servir archivos estáticos tanto en entornos de desarrollo como de producción, proporcionando un enfoque unificado que garantiza consistencia y fiabilidad en todas las etapas de despliegue. Exploremos WhiteNoise.

Instalación y configuración de WhiteNoise en Django

Empezar con WhiteNoise es sencillo. En esta sección, repasaremos el proceso de instalación y te guiaremos sobre cómo configurar WhiteNoise dentro de tu proyecto Django.

Instalamos WhiteNoise de la siguiente manera:

pip install whitenoise

Después de una instalación exitosa, dirígete a sitepoint_django/settings.py, desplázate hasta el final y encuentra la configuración STATIC_URL. Debajo de ella, agrega la configuración STATIC_ROOT:

# sitepoint_django/settings.py

STATIC_ROOT = BASEDIR / "staticfiles"

La configuración anterior indica a Django que cuando se ejecute collectstatic, todos los recursos estáticos en todas las aplicaciones de tu proyecto se recopilarán y almacenarán en este directorio llamado staticfiles.

Lo siguiente que debes hacer es ejecutar el comando de gestión collectstatic:

python manage.py collectstatic

Para habilitar WhiteNoise, debes agregarlo a la lista de configuraciones MIDDLEWARE, edita el archivo settings.py y agrega el middleware de WhiteNoise después del middleware de seguridad de Django SecurityMiddleware y antes de todos los demás middleware:

# sitepoint_django/settings.py

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

Usando WhiteNoise en desarrollo

Con solo los pasos anteriores, WhiteNoise puede servirte archivos estáticos en producción. Pero si ejecutas el proyecto en este punto, el servidor de desarrollo de Django automáticamente se apoderará del manejo de archivos estáticos. Pero para beneficiarse de un comportamiento similar en desarrollo y en producción, es una buena idea usarlo para servir archivos en desarrollo también.

Para hacerlo, deshabilitaremos el manejo de archivos estáticos de Django y permitiremos que WhiteNoise se haga cargo simplemente editando el archivo de configuración y agregando WhiteNoise a la lista de INSTALLED_APPS estableciendo por encima de django.contrib.staticfiles:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    "whitenoise.runserver_nostatic",
    "django.contrib.staticfiles",
    # ...
]

También necesitas deshabilitar DEBUG configurándolo como False:

# sitepoint_django/settings.py

DEBUG=False

Con estos pasos, puedes servir tus recursos estáticos de manera transparente utilizando el paquete WhiteNoise.

Para verificar que WhiteNoise está sirviendo efectivamente tus archivos, puedes eliminar o comentar la opción django.contrib.staticfiles de la lista de configuración INSTALLED_APPS. Sin embargo, es importante tener en cuenta que al eliminar django.contrib.staticfiles se harán inaccesibles algunos comandos de gestión de archivos estáticos, como el comando collectstatic. Este comando es esencial para recopilar y consolidar archivos estáticos de tus aplicaciones en un solo directorio para un servicio eficiente en entornos de producción.

Opciones avanzadas de configuración de WhiteNoise

Mientras que los pasos mencionados arriba son suficientes para la mayoría de los casos, WhiteNoise ofrece algunas opciones adicionales de configuración. Por ejemplo, puedes agregar compresión y soporte de caché a tu proyecto. Para habilitarlo, abre el archivo sitepoint_django/settings.py y agrega las siguientes configuraciones:

# sitepoint_django/settings.py

STORAGES = {
    # ...
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

La configuración anterior garantizará que WhiteNoise comprima y haga un hash de los archivos estáticos para obtener un nombre único, por lo que se almacenarán de manera segura en caché.

Usar WhiteNoise en entornos de hosting compartido

El hosting compartido es un tipo de servicio de alojamiento web donde múltiples sitios web se alojan en un solo servidor físico. En esta configuración, los recursos como espacio en disco, ancho de banda y potencia de procesamiento se comparten entre varios usuarios, lo que lo convierte en una opción rentable para alojar sitios web de tamaño pequeño a mediano.

Los entornos de hosting compartido generalmente son administrados por proveedores de alojamiento, quienes se encargan de la mantenimiento del servidor, seguridad y soporte técnico, permitiendo a los propietarios de sitios web centrarse en la construcción y gestión de sus sitios sin tener que preocuparse por tareas de administración del servidor.

Desafíos de gestionar archivos estáticos en hosting compartido

Si bien el hosting compartido ofrece una solución de alojamiento económica y conveniente para muchos sitios web, también tiene limitaciones en comparación con otros tipos de alojamiento, como servidores virtuales privados (VPS) o servidores dedicados. Estas limitaciones incluyen lo siguiente:

Restricciones en las configuraciones y ajustes del servidor, limitando la capacidad de personalizar el software del servidor o instalar herramientas adicionales.
Las limitaciones de recursos, como el espacio en disco, también influyen, ya que podrían existir restricciones en la cantidad de ancho de banda que se puede utilizar para servir estos archivos a los visitantes.
El rendimiento podría ser otro desafío en el alojamiento compartido, ya que compartir recursos con otros usuarios puede resultar en tiempos de carga más lentos para archivos estáticos, especialmente durante períodos de alto tráfico o utilización de recursos.

Configurar para usar WhiteNoise

WhiteNoise es un paquete de Python que se integra sin problemas con Django, lo que lo convierte en una opción ideal para servir archivos estáticos en entornos de alojamiento compartido. A diferencia de otras instalaciones de software como Apache y Nginx, que pueden no ser permitidas en ciertos entornos de alojamiento, WhiteNoise puede instalarse fácilmente junto con sus otros paquetes de proyecto.

Al configurar Django para usar WhiteNoise, puedes servir archivos estáticos de manera eficiente directamente desde tu aplicación Django sin necesidad de software de servidor adicional. Esto simplifica el proceso de configuración y garantiza la compatibilidad con una amplia gama de proveedores de alojamiento.

La mayoría de los proveedores de alojamiento compartido ofrecen un cPanel que te permite realizar configuraciones de servidor y subir archivos. Una vez que hayas subido tus archivos, puedes realizar los siguientes cambios en el archivo settings.py del proyecto:

# sitepoint_django/settings.py

STATIC_URL='static/'

# reemplaza username por tu nombre de usuario de cpanel
# usa public_html si estás trabajando en tu dominio principal como https://ejemplo.com
STATIC_ROOT='/home/username/public_html/static'

# O 
# usa el nombre de la carpeta si estás trabajando en un subdominio como https://subdominio.ejemplo.com
STATIC_ROOT='/home/username/subdomain.mydomain.com/static'

Con esas configuraciones en su lugar, todo lo que necesitas hacer es ejecutar el comando collectstatic para que tus archivos estáticos se recopilen en cualquiera de los directorios STATIC_ROOT mencionados anteriormente, dependiendo del dominio.

Servir archivos estáticos desde AWS S3

Amazon Simple Storage Service (S3) es un servicio de almacenamiento de objetos escalable ofrecido por Amazon Web Services (AWS). Permite a los usuarios crear espacios de almacenamiento conocidos como “buckets” donde puedes almacenar varios tipos de datos como documentos, imágenes, videos y, en particular para nuestro tutorial, archivos estáticos.

AWS ofrece un nivel gratuito para varios de sus servicios, incluido Amazon S3. El nivel gratuito permite a los usuarios comenzar con los servicios de AWS sin costo alguno durante un cierto período o hasta límites de uso específicos. Para comenzar, puedes registrarte en el nivel gratuito de S3. Sin embargo, para completar el proceso de registro, necesitarás proporcionar información de pago.

Creación de un Bucket S3

Para crear un bucket, ve al panel de S3 y haz clic en el botón Crear bucket.

Asigna al bucket un nombre único compatible con DNS. Puedes seleccionar opcionalmente una región más cercana a ti o a tus usuarios.

Habilita ACL para el bucket.

Permite el acceso público al bucket, desactivando Bloquear todo acceso público.

Una vez creado con éxito, deberías ver tu bucket en la página principal de S3.

Habilitación del acceso IAM

Después de crear un bucket, puedes usarlo como usuario raíz, pero AWS recomienda que crees un grupo de usuarios IAM (Identity Access Management) y les asignes acceso solo a un bucket específico.

Creación de grupo IAM

Ve a la página principal de IAM y selecciona Grupos de usuarios en la barra lateral. Luego haz clic en el botón Crear grupo. Asigna al grupo un nombre.

Luego, bajo Adjuntar políticas de permisos, busca S3 y asigna AmazonS3FullAccess y haz clic en el botón Crear grupo.

Creación de usuario IAM

Mientras aún estás en la página de IAM, selecciona Usuarios en el panel de la izquierda y luego haz clic en el botón Crear usuario.

Asigna un nombre al usuario de IAM y haz clic en el botón Siguiente.

Bajo la opción Establecer permisos, deja la opción Agregar usuario a grupo como la opción seleccionada, luego ve a Grupos de usuarios y selecciona el grupo de usuarios que creaste anteriormente y luego haz clic en el botón Siguiente.

Revisa y haz clic en Crear usuario.

Ahora haz clic en el nombre del usuario para ver los detalles del usuario. Haz clic en la pestaña Credenciales de seguridad y luego haz clic en Crear clave de acceso. Elige Código local y haz clic en el botón Siguiente.

Después de eso, haz clic en el botón Crear clave de acceso. Puedes copiar las claves en tu archivo .env si lo tienes, o descargar el archivo CSV para su uso posterior.

Configurando Django para usar AWS S3 para archivos estáticos

Después de crear el bucket S3, necesitamos configurar el proyecto para servir archivos desde S3. En la sección anterior, configuramos WhiteNoise para servir nuestros activos estáticos. Necesitamos deshabilitar WhiteNoise para que podamos servir los activos desde S3. Para hacer eso, ve al archivo sitepoint_django/settings.py y comenta las líneas de código relevantes:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # ...
    # "whitenoise.runserver_nostatic",
    # ...
]

MIDDLEWARE = [
    # ...
    # "whitenoise.middleware.WhiteNoiseMiddleware",
    # ...
]

# STORAGES = {
#     "staticfiles": {
#         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
#     },
# }

El código anterior comenta todos los ajustes que habíamos establecido para WhiteNoise.

Instalación de paquetes

Para que el proyecto pueda funcionar con S3, necesitamos instalar dos paquetes: boto3 y django-storages. boto3 proporciona la API de Python de bajo nivel para interactuar con los servicios de AWS, mientras que django-storages extiende las capacidades de almacenamiento de archivos de Django para integrarse con proveedores de almacenamiento en la nube como Amazon S3, lo que te permite gestionar y servir de manera transparente archivos estáticos y multimedia en tu aplicación Django:

pip install boto3 django-storages

Configuración de ajustes

Para que nuestro proyecto pueda servir archivos desde S3, necesitamos realizar algunos cambios en el archivo settings.py y actualizarlo con el siguiente código:

# sitepoint_django/settings.py
import os  # primero agregue una importación para el módulo os

# Configuración de almacenamiento S3
STORAGES = {
    'staticfiles': {
        'BACKEND': 'storages.backends.s3boto3.S3Boto3Storage',
        'OPTIONS': {
            'bucket_name': os.getenv('AWS_STORAGE_BUCKET_NAME'),
            'location': 'static',
            'querystring_auth': False,
        },
    }
}

Las configuraciones anteriores crean un diccionario STORAGES que sirve como contenedor de configuración centralizado para definir varios backends de almacenamiento utilizados dentro del proyecto.

Es importante tener en cuenta que esta configuración solo está disponible para versiones de Django a partir de 4.2 y superiores. Para versiones anteriores, consulte la documentación.

En el código anterior, tenemos una configuración para staticfiles que identifica la configuración de almacenamiento para gestionar archivos estáticos.

Después de las configuraciones de STORAGES necesitamos agregar algunas configuraciones específicas de AWS en nuestro archivo de configuración, así que desplácese hasta la parte donde encontrará la configuración STATIC_URL y realice los siguientes cambios:

# sitepoint_django/settings.py

USE_S3 = os.getenv('USE_S3')

if USE_S3:
    AWS_ACCESS_KEY_ID = os.getenv('AWS_ACCESS_KEY_ID')
    AWS_SECRET_ACCESS_KEY = os.getenv('AWS_SECRET_ACCESS_KEY')
    AWS_S3_OBJECT_PARAMETERS = {
        "CacheControl": "max-age=2592000",
    }

else:
    STATIC_URL = 'static/'
    STATIC_ROOT = BASE_DIR / 'staticfiles'

Cargar archivos estáticos a S3

Una vez que las configuraciones estén en su lugar, la siguiente tarea es cargar sus archivos estáticos al bucket de S3. Puedes hacerlo ejecutando collectstatic:

python manage.py collectstatic  --no-input

Esto recopilará todos los archivos estáticos en nuestras aplicaciones del proyecto, los moverá al bucket de S3 y los colocará en una carpeta static según se define en el diccionario STORAGES. La bandera --no-input instruye a Django a ejecutarse en modo no interactivo, omitiendo cualquier solicitud de entrada del usuario.

Al utilizar Django, el proceso de recopilación de archivos estáticos se llevará a cabo automáticamente sin requerir ninguna intervención manual por parte del usuario.

Ejecutando el proyecto

Una vez que todas las configuraciones estén en su lugar, puedes ejecutar el proyecto. Vamos a ejecutar el proyecto en modo de desarrollo y servir los archivos desde el bucket de S3:

python manage.py runserver

Para verificar que estás sirviendo archivos desde S3, puedes revisar el código fuente de la página de inicio:

<link rel="stylesheet" href="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/css/styles.css">

<img src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/images/flowerImage.png" alt="Flower Image">

<script src="https://sitepoint-django-static.s3.amazonaws.com/static/static_demo/js/todays_date.js"></script>

Al observar los elementos HTML, se revela que efectivamente las URL apuntan al bucket de S3.

Conclusión

En resumen, gestionar archivos estáticos en Django implica evaluar los requisitos del proyecto, las necesidades de escalabilidad y las limitaciones del entorno de alojamiento para elegir el método más adecuado.

Por ejemplo, el middleware WhiteNoise ofrece una solución eficiente para servir archivos estáticos en entornos de alojamiento compartido, donde las limitaciones de recursos y el acceso limitado al servidor pueden plantear desafíos.

Configurando adecuadamente las opciones de Django y aprovechando herramientas como WhiteNoise, los desarrolladores pueden garantizar una entrega de archivos estáticos confiable y optimizada, independientemente del entorno de alojamiento. Cada método ofrece sus propios beneficios y consideraciones, requiriendo una evaluación cuidadosa para cumplir con las necesidades específicas del proyecto y ofrecer una experiencia de usuario sin problemas.

Hemos cubierto varios puntos clave:

Métodos para gestionar archivos estáticos. Hemos analizado varios enfoques, incluyendo servir archivos estáticos localmente, utilizar el servidor de desarrollo integrado de Django, aprovechar soluciones de almacenamiento de terceros como Amazon S3, y servir archivos utilizando paquetes como WhiteNoise. Cada método tiene sus propias ventajas y consideraciones, dependiendo de factores como escalabilidad, rendimiento y facilidad de despliegue.

Configuraciones y comandos comunes:

STATIC_ROOT: especifica el directorio donde se almacenarán los archivos estáticos recopilados.
STATIC_URL: define la URL base para acceder a los archivos estáticos a través del servidor web.
STATICFILES_DIRS: especifica directorios adicionales que contienen recursos estáticos.
STATICFILES_STORAGE: configura el backend de almacenamiento para manejar archivos estáticos.
collectstatic: recolecta todos los recursos estáticos de todos los directorios de aplicaciones al STATIC_ROOT.

Lectura adicional: