Gestione dei File Statici in Django: Una Guida Completa

In questo tutorial, esamineremo cosa sono i file statici in Django, i vantaggi di gestirli in modo efficiente, il loro scopo nelle applicazioni web e configureremo un progetto dimostrativo per illustrare come gestire e servire file statici utilizzando diversi metodi e strumenti.

Django è un framework web di alto livello in Python che fornisce ai web developer uno strumento potente per creare applicazioni web in modo rapido ed efficiente.

Mentre Django è ottimo per creare applicazioni web rapidamente ed efficientemente, è altrettanto importante prendersi cura dello stile e del feeling delle applicazioni web che sviluppi. Per farlo, devi imparare come gestire gli asset che supportano e forniscono lo stile e il feeling delle tue applicazioni.

File Static in Django

In Django, i file static sono quei file che vengono serviti direttamente al client senza alcuna elaborazione da parte del server.

Questi tipicamente includono CSS, file JavaScript, immagini, icone, font e altri asset necessari per lo stile e il feeling della tua applicazione web.

Django fornisce meccanismi per gestire e servire questi file static in modo efficiente, assicurando un’esperienza utente fluida.

Gestione efficiente dei file static

Per garantire che gli utenti della tua applicazione web abbiano un’ottima esperienza utente e che l’applicazione funzioni come previsto, devi gestire i file static in modo efficiente.

Organizzare e memorizzare nella cache i file static correttamente garantirà tempi di caricamento delle pagine veloci e che la risposta sia migliorata, migliorando la soddisfazione complessiva dell’utente.

Django offre vari strumenti e convenzioni per aiutare nella gestione dei file static.

Il ruolo dei file static nelle applicazioni web

I file static sono molto importanti, poiché stabiliscono come appaia e si senta un’applicazione web. Definiscono come i componenti in un’applicazione siano formattati, come reagiscano alle interazioni dell’utente e, infine, cosa vede un utente quando visita una determinata applicazione web.

Quando gestisci in modo efficiente i file statici, sarai in grado di creare un’interfaccia utente visivamente accattivante e reattiva, rendendo l’applicazione più coinvolgente e user-friendly.

Configurazione di un Progetto Dimostrativo

Per illustrare i concetti di gestione dei file statici in Django, configureremo un progetto dimostrativo da zero.

Questo progetto includerà la creazione di un progetto Django, la configurazione delle impostazioni dei file statici e l’integrazione dei file statici in un semplice web application.

Seguendo il progetto dimostrativo, acquisirai esperienza pratica nella gestione dei file statici in Django e comprenderai il loro significato nello sviluppo web.

Ai fini di questo tutorial, creeremo una landing page tale che quando gli utenti visitano la home page del nostro progetto, vedranno un titolo stilizzato che li accoglie nel sito. Mostrerà anche la data di oggi utilizzando JavaScript, e servirà anche un’immagine per completare la pagina.

Creazione di una directory per ospitare il progetto

Iniziamo creando una directory che ospiterà il progetto dimostrativo utilizzando il seguente comando:

mkdir sitepoint_django_static_tut

Creazione di un ambiente virtuale

Si consiglia di creare e isolare nuovi progetti all’interno di ambienti virtuali. Ciò significa che ogni progetto avrà le proprie dipendenze senza influenzare l’installazione globale di Python.

Utilizzeremo il pacchetto virtualenv per crearlo. Se non è installato nel tuo ambiente di sviluppo, installalo utilizzando pip install virtualenv, e crea un ambiente virtuale utilizzando il seguente comando:

virtualenv myenv

Il comando sopra crea un ambiente virtuale chiamato myenv. Per utilizzare l’ambiente virtuale, devi attivarlo:

Linux/macOS:

. myenv/bin/activate

Windows:

. myenv\Scripts\activate

Installazione delle dipendenze

Una volta attivo l’ambiente virtuale, ora puoi procedere e installare le dipendenze del tuo progetto. Per cominciare, installeremo Django. Installeremo altre dipendenze man mano che arriviamo alle sezioni che ne dimostrano l’uso:

pip install Django

Questo installerà la versione stabile più recente di Django, che al momento della stesura è la versione 5.0.

Creazione di un progetto Django

Dopo aver installato con successo Django, ora hai accesso ai comandi di gestione di Django. Usiamoli per creare un progetto Django nell’ambiente virtuale:

django-admin startproject sitepoint_django .

Il comando sopra creerà un progetto Django chiamato sitepoint_django e il punto alla fine indica che intendiamo creare il progetto nella directory corrente.

Creazione di un’app dimostrativa

Per illustrare i vari concetti della gestione dei file statici, abbiamo bisogno di creare almeno un’app Django nel nostro progetto:

python manage.py startapp  static_demo

Questo creerà una nuova app nel nostro progetto chiamata `static_demo`. Affinché venga riconosciuta dal nostro progetto, dobbiamo aggiungerla alla configurazione degli app installati nel file `settings.py` del nostro progetto. Apri `sitepoint_django/settings.py`, vai alla configurazione `INSTALLED_APPS` e aggiungi `static_demo.apps.StaticDemoConfig` in fondo alla lista, come mostrato di seguito:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # altri app
    'static_demo.apps.StaticDemoConfig',
]

Creazione del modello della home page

Renderizzeremo del HTML quando l’utente visita la home page del nostro sito. Nell’app `static_demo`, crea una directory `templates` e al suo interno crea un’altra directory e chiamala `static_demo`. In questa directory, crea un modello e chiamalo `index.html` così il percorso sarà `static_demo/templates/static_demo/index.html`.

Inserisci il seguente codice in `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>

Creazione della vista indice

Affinché il modello venga mostrato agli utenti ogni volta che visitano la home page del nostro app, dobbiamo creare una funzione di vista che verrà attivata per renderizzare il modello `home.html`. Apri il file `static_demo/views.py` e inserisci il seguente codice:

# static_demo/views.py

from django.shortcuts import render

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

Creazione del file URL per static_demo

Vogliamo che la vista indice nell’app static_demo renda la home page ogni volta che un utente visita il nostro sito. Quindi creeremo uno schema URL per la funzione della vista che renderà la home page. Per fare ciò, è necessario creare un file urls.py per l’app static_demo, quindi collegare il file URL static_demo al file URL del progetto.

Pertanto, nell’app static_demo, crea un file e chiamalo urls.py e aggiungi il seguente codice al suo interno:

# static_demo/urls.py

from django.urls import path
from .import views

app_name = 'static_demo'

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

Il codice sopra crea un URL per la vista indice del nostro progetto, quindi se un utente visita qualcosa come http://oursite.com/, o se visiti http://127.0.0.1:8000 in fase di sviluppo, verrà chiamata la vista indice per rispondere a ciò.

Aggiungiamolo al file URL del progetto. Apri il file sitepoint_django/urls.py e aggiungi il seguente codice:

# sitepoint_django/urls.py

from django.contrib import admin
from django.urls import path, include # aggiungi un'importazione per include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('static_demo.urls')), # aggiungi questa riga
]

Il codice sopra apporta alcune modifiche al file urls.py predefinito. Abbiamo aggiunto un’importazione per la funzione include, che dice a Django che stiamo includendo static_demo.urls.

Test del progetto

La configurazione iniziale del progetto è completata a questo punto. Eseguiamo il server di sviluppo per vedere se tutto è ben connesso.

Esegui il progetto con il seguente comando:

python manage.py runserver

Se tutto è configurato correttamente, dovresti essere in grado di visitare http://127.0.0.1:8000. Vedrai del testo non formattato che ti dà il benvenuto nel sito.

Servire File Statici in Sviluppo

Per aggiungere stili alla pagina, JavaScript per la data e l’immagine, dobbiamo apportare modifiche al progetto. Facciamolo in modo incrementale e vediamo come possiamo servire i diversi file statici in modi diversi, a partire dall’ambiente di sviluppo.

Configurazione di una directory per i file statici

Django raccomanda che tutti gli asset statici siano gestiti per app: vale a dire, tutti i CSS, JS e le immagini necessarie a una particolare app dovrebbero risiedere nell’ambito di quella app. Quindi aggiorniamo l’app static_demo e creiamo una directory chiamata static, e al suo interno creiamo un’altra directory chiamata static_demo. Quindi nella directory static_demo creiamo altre tre directory: css, js e images. Alla fine, avremo una struttura simile alla seguente:

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

Il motivo per cui vorresti creare una directory static_demo nella directory static è per aiutarti a namespacesare i tuoi asset statici. Se hai più di un’app e hai il CSS in entrambe le app denominato come styles.css, Django funzionerebbe solo con il primo foglio di stile che trova, poiché non sarebbe in grado di distinguere gli altri. Pertanto, li namespacesamo in modo che Django possa sapere quale file di asset stiamo richiamando nei nostri template.

Creazione dei file statici

In questo passaggio, impostiamo semplicemente asset statici minimi che dimostreranno come è possibile servire i file in fase di sviluppo.

Nella directory js, crea un file e chiamalo todays_date.js, e aggiungi il seguente codice:

/* static_demo/js/todays_date.js */

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

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

Il codice sopra recupera la data di oggi da JavaScript, la formatta in una stringa e poi la visualizza in un div con un ID di todaysDate.

Nella directory css, crea un file, chiamalo styles.css, e aggiungi il seguente codice:

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

Il codice sopra utilizza il layout Flexbox per centrare tutti gli elementi della pagina sia orizzontalmente che verticalmente. Imposta anche la dimensione del carattere dell’elemento H2 a 24px e il suo colore a verde.

Per l’immagine, puoi utilizzare qualsiasi immagine a tua scelta. Copia semplicemente qualche immagine nella directory images e tieni nota del nome.

Configurazione delle impostazioni dei file statici

Per servire file statici in fase di sviluppo, è necessario impostare diverse cose nel file Django settings.py. Apri il file sitepoint_django/settings.py e controlla per vedere se hai le seguenti impostazioni:

# sitepoint_django/settings.py`

DEBUG=True

Nello sviluppo, è generalmente consigliato impostare DEBUG su True nelle impostazioni del tuo progetto Django. Questa impostazione abilita varie funzionalità di debug, inclusa la visualizzazione di messaggi di errore dettagliati e tracce dello stack, che sono preziosissime per diagnosticare e risolvere problemi durante lo sviluppo.

Inoltre, quando DEBUG è impostato su True, l’app django.contrib.staticfiles serve automaticamente i file statici dalla directory static di ogni app. Questo comportamento semplifica il processo di sviluppo eliminando la necessità di configurazioni manuali per servire i file statici.

Nella impostazione INSTALLED_APPS, controlla se hai aggiunto django.contrib.staticfiles. Se non è presente, aggiungilo sopra le app che hai nel progetto. Ad esempio, in questo progetto aggiungilo sopra la stringa dell’app static_demo, come mostrato di seguito:

# sitepoint_django/settings.py`

INSTALLED_APPS = [

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

L’app django.contrib.staticfiles fornita da Django è essenziale per servire file statici durante lo sviluppo. Per impostazione predefinita, esamina le app del tuo progetto per individuare le directory dei file statici all’interno di ogni app. Tuttavia, se hai ulteriori asset statici che non sono associati a nessuna app particolare, puoi comunque renderli accessibili a django.contrib.staticfiles impostando l’impostazione STATICFILES_DIRS nel file settings.py del tuo progetto. Questa impostazione ti permette di specificare ulteriori directory in cui si trovano i file statici. Ad esempio:

# sitepoint_django/settings.py`

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

Oltre a DEBUG e STATICFILES_DIRS, un’altra importante impostazione da includere nel file delle impostazioni del tuo progetto Django è STATIC_URL. Mentre Django fornisce un valore predefinito per STATIC_URL, puoi definirlo esplicitamente nel tuo file settings.py se non è già presente.

L’impostazione STATIC_URL specifica l’URL di base da cui verranno serviti gli asset statici. Ad esempio, impostando STATIC_URL = "static/" si indica a Django di servire gli asset statici dall’URL /static/. Ciò significa che, ad esempio, il file di stili situato nell’app static_demo sarà accessibile a un URL come http://127.0.0.1:8000/static/static_demo/css/styles.css.

Aggiornamento del template

Per utilizzare i file statici nel template, dobbiamo aggiornarlo con il seguente HTML:

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

<!-- aggiungere la funzionalità di gestione dei file statici -->
{% 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>

    <!-- collegamento al file css qui sotto -->
    <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>
    <!-- collegamento all'immagine qui sotto -->
    <img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

    <!-- collegamento al file js qui sotto -->
    <script src="{% static 'static_demo/js/todays_date.js' %}"></script>
</body>
</html>

Quell’aggiornamento del template ci introduce a una nuova tag: {% load static %}. Questa tag carica la funzionalità di gestione dei file statici fornita dal motore di template Django. Includendo questa tag in un file di template Django, ci permette di utilizzare tag e filtri di template relativi ai file statici.

Ad esempio, utilizzarlo nel nostro modello ci consente di fare riferimento a file statici come immagini, CSS e JS negli elementi HTML. Utilizzarlo consente inoltre a Django di generare URL per i riferimenti alle risorse statiche:

<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 tali impostazioni e l’aggiornamento del modello in atto, dovremmo eseguire il progetto e verificare se i file vengono serviti in fase di sviluppo. Eseguire il progetto utilizzando il seguente comando:

python manage.py runserver

Se tutto è configurato correttamente, dovremmo avere il server di sviluppo in esecuzione su http://127.0.0.1:8000. Se visitiamo quel link, dovremmo avere una pagina simile a quella riportata di seguito.

Avere un’immagine simile mostra che i file statici sono stati applicati correttamente.

Si dovrebbe notare che nello sviluppo Django, quando DEBUG=True nelle impostazioni del progetto e django.contrib.staticfiles è abilitato, ciò consente al server di sviluppo di Django (runserver) di servire i file statici. In questa situazione, eventuali modifiche apportate ai file statici, come CSS, JavaScript o immagini, vengono rilevate e applicate automaticamente da Django. Questo processo senza soluzione di continuità semplifica notevolmente lo sviluppo, poiché vedrai immediatamente gli effetti delle tue modifiche senza dover ricaricare manualmente o riavviare il server.

Tuttavia, negli ambienti di produzione, servire file statici di solito implica l’utilizzo di un server web separato o di una CDN. In questo caso, le modifiche ai file statici potrebbero non essere rilevate e applicate automaticamente da Django, richiedendo un intervento manuale per garantire che i file aggiornati vengano serviti agli utenti. Inoltre, se si sceglie di servire manualmente i file statici utilizzando un metodo diverso, come la vista django.views.static.serve(), il rilevamento automatico e l’applicazione delle modifiche potrebbero non verificarsi e potrebbe essere necessario implementare i propri meccanismi per gestire gli aggiornamenti dei file statici.

Servire File Statici con WhiteNoise

In fase di sviluppo, mentre django.contrib.staticfiles semplifica il processo di servizio delle risorse statiche, garantendo aggiornamenti fluidi man mano che si apportano modifiche.

Tuttavia, quando si passa alla produzione, impostazioni come DEBUG=True devono essere disattivate e i file statici potrebbero essere serviti da una CDN o da un altro server. Ciò richiede una soluzione che connetta entrambi gli ambienti — permettendo il servizio fluido dei file durante lo sviluppo e riflettendo fedelmente l’ambiente di produzione.

Entra in gioco il pacchetto WhiteNoise. Progettato per integrarsi perfettamente con Django, WhiteNoise offre una soluzione robusta per il servizio di file statici sia in fase di sviluppo che in produzione, fornendo un approccio unificato che garantisce coerenza e affidabilità in tutte le fasi di distribuzione. Esploriamo WhiteNoise.

Installazione e configurazione di WhiteNoise in Django

Iniziare con WhiteNoise è semplice. In questa sezione, passeremo attraverso il processo di installazione e vi guideremo su come configurare WhiteNoise all’interno del vostro progetto Django.

Installiamo WhiteNoise in questo modo:

pip install whitenoise

Dopo l’installazione riuscita, vai a sitepoint_django/settings.py, scorri fino in fondo e trova la configurazione STATIC_URL. Sotto di essa, aggiungi la configurazione STATIC_ROOT:

# sitepoint_django/settings.py

STATIC_ROOT = BASEDIR / "staticfiles"

La configurazione sopra indica a Django che quando viene eseguito collectstatic, tutti gli asset statici in tutti gli app del tuo progetto saranno raccolti e memorizzati in questa directory chiamata staticfiles.

La prossima cosa da fare è eseguire il comando di gestione collectstatic:

python manage.py collectstatic

Per abilitare WhiteNoise, devi aggiungerlo alla lista delle configurazioni MIDDLEWARE, modifica il file settings.py e aggiungi il middleware WhiteNoise dopo il middleware di sicurezza di Django SecurityMiddleware e prima di tutti gli altri middleware:

# sitepoint_django/settings.py

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

Utilizzo di WhiteNoise in sviluppo

Con solo i passaggi sopra, WhiteNoise può servire i file statici in produzione. Ma se esegui il progetto in questo momento, il server di sviluppo di Django si prenderà automaticamente in carico la gestione dei file statici. Ma per trarre vantaggi da un comportamento simile sia in sviluppo che in produzione, è una buona idea utilizzarlo anche per servire file in sviluppo.

Per fare ciò, disabiliteremo la gestione dei file statici di Django e permetteremo a WhiteNoise di prendere il controllo semplicemente modificando il file delle impostazioni e aggiungendo WhiteNoise alla lista INSTALLED_APPS impostando sopra django.contrib.staticfiles:

# sitepoint_django/settings.py

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

È inoltre necessario disabilitare DEBUG impostandolo su False:

# sitepoint_django/settings.py

DEBUG=False

Con questi passaggi, potrai servire i tuoi asset statici in modo impeccabile utilizzando il pacchetto WhiteNoise.

Per verificare che WhiteNoise stia effettivamente servendo i tuoi file, puoi rimuovere o commentare l’opzione django.contrib.staticfiles dalla lista di impostazioni INSTALLED_APPS. Tuttavia, è importante notare che la rimozione di django.contrib.staticfiles renderà alcuni comandi di gestione dei file statici non disponibili, come il comando collectstatic. Questo comando è essenziale per la raccolta e la consolidazione dei file statici dai tuoi app in una singola directory per un servizio efficiente in ambienti di produzione.

Opzioni di configurazione avanzate di WhiteNoise

Mentre i passaggi sopra elencati sono sufficienti per la maggior parte dei casi, WhiteNoise offre alcune opzioni di configurazione in più. Ad esempio, puoi aggiungere la compressione e il supporto per il caching al tuo progetto. Per attivarlo, apri il file sitepoint_django/settings.py e aggiungi le seguenti impostazioni:

# sitepoint_django/settings.py

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

L’impostazione sopra assicura che WhiteNoise comprima e hash i file statici in un nome unico, in modo che possano essere memorizzati nella cache in sicurezza.

Utilizzo di WhiteNoise in ambienti di hosting condiviso

Il hosting condiviso è un tipo di servizio di hosting web in cui più siti web sono ospitati su un singolo server fisico. In questa configurazione, le risorse come spazio su disco, larghezza di banda e potenza di elaborazione sono condivise tra più utenti, rendendolo un’opzione conveniente dal punto di vista economico per l’hosting di siti web di piccole e medie dimensioni.

Gli ambienti di hosting condiviso sono tipicamente gestiti dai provider di hosting, che si occupano della manutenzione del server, della sicurezza e del supporto tecnico, permettendo ai proprietari di siti web di concentrarsi sulla costruzione e gestione dei loro siti senza doversi preoccupare delle attività di amministrazione del server.

Difficoltà nella gestione dei file statici in hosting condiviso

Mentre il hosting condiviso offre una soluzione di hosting conveniente ed economica per molti siti web, presenta anche limitazioni rispetto ad altri tipi di hosting, come i server virtuali privati (VPS) o i server dedicati. Queste limitazioni includono quanto segue:

• Restrizioni alle configurazioni e impostazioni del server, limitando la capacità di personalizzare il software del server o installare strumenti aggiuntivi.

• Le limitazioni delle risorse, come lo spazio su disco, giocano anche un ruolo, poiché potrebbero esserci limitazioni sulla quantità di larghezza di banda che può essere utilizzata per servire questi file ai visitatori.

• Le prestazioni potrebbero essere un altro problema nel web hosting condiviso, poiché condividere risorse con altri utenti può causare tempi di caricamento più lenti per i file statici, specialmente durante periodi di traffico elevato o utilizzo delle risorse.

Configurazione per l’uso di WhiteNoise

WhiteNoise è un pacchetto Python che si integra perfettamente con Django, rendendolo un’ottima scelta per servire file statici in ambienti di hosting condiviso. A differenza di altre installazioni software come Apache e Nginx, che potrebbero non essere consentite in determinati ambienti di hosting, WhiteNoise può essere facilmente installato insieme agli altri pacchetti del tuo progetto.

Configurando Django per utilizzare WhiteNoise, puoi servire in modo efficiente i file statici direttamente dalla tua applicazione Django senza la necessità di software server aggiuntivo. Questo semplifica il processo di configurazione e garantisce la compatibilità con una vasta gamma di provider di hosting.

La maggior parte dei provider di hosting condivisi offre un cPanel che ti consente di effettuare configurazioni server e caricamenti di file. Quindi, una volta caricati i tuoi file, puoi apportare le seguenti modifiche al file settings.py del progetto:

# sitepoint_django/settings.py

STATIC_URL='static/'

# sostituisci username con il tuo username cpanel
# usa public_html se stai lavorando sul tuo dominio principale come https://example.com
STATIC_ROOT='/home/username/public_html/static'

# OR 
# usa il nome della cartella se stai lavorando su un sottodominio come https://subdomain.example.com
STATIC_ROOT='/home/username/subdomain.mydomain.com/static'

Con queste impostazioni in atto, tutto ciò che devi fare è eseguire il comando collectstatic in modo che i tuoi file statici vengano raccolti in uno dei directory sopra indicati STATIC_ROOT, a seconda del dominio.

Servire File Statici da AWS S3

Amazon Simple Storage Service (S3) è un servizio di archiviazione di oggetti scalabile offerto da Amazon Web Services (AWS). Consente agli utenti di creare spazi di archiviazione noti come bucket dove puoi memorizzare vari tipi di dati come documenti, immagini, video e, per quanto riguarda il nostro tutorial, file statici.

AWS offre uno strato gratuito per diverse delle sue offerte, tra cui Amazon S3. Lo strato gratuito consente agli utenti di iniziare con i servizi AWS senza costi per un certo periodo o fino a limiti di utilizzo specifici. Per iniziare, puoi iscriverti allo strato gratuito di S3. Tuttavia, per completare il processo di iscrizione, è necessario fornire informazioni di pagamento.

Creazione di un Bucket S3

Per creare un bucket, vai alla dashboard S3 e clicca sul pulsante Crea bucket.

Assegna al bucket un nome univoco conforme ai DNS. Puoi scegliere opzionalmente una regione più vicina a te o ai tuoi utenti.

Abilita i Controlli di Accesso (ACL) per il bucket.

Abilita l’accesso pubblico al bucket, disattivando Blocca tutto l’accesso pubblico.

Dopo la creazione riuscita, dovresti vedere il tuo bucket nella pagina principale di S3.

Abilitazione dell’accesso IAM

Dopo aver creato un bucket, puoi utilizzarlo come utente root, ma AWS consiglia di creare un gruppo IAM (Identity Access Management) e di assegnargli accesso solo a un particolare bucket.

Creazione di un gruppo IAM

Vai alla pagina principale di IAM e seleziona Gruppi utente nella barra laterale. Quindi clicca sul pulsante Crea gruppo. Assegna al gruppo un nome.

Quindi in Collega politiche di permessi, cerca S3 e assegna AmazonS3FullAccess quindi clicca sul pulsante Crea gruppo.

Creazione di un utente IAM

Mentre si è ancora sulla pagina IAM, selezionare Users nel pannello a sinistra e quindi fare clic sul pulsante Create user.

Assegnare all’utente IAM un nome e fare clic sul pulsante Next.

Sotto l’opzione Set permissions, lasciare l’opzione Add user to group selezionata, quindi andare a User groups e selezionare il gruppo utente creato in precedenza, quindi fare clic sul pulsante Next.

Rivedere e fare clic su Create user.

Ora fare clic sul nome dell’utente per visualizzare i dettagli dell’utente. Fare clic sulla scheda Security credentials e quindi fare clic su Create access key. Scegliere Local code e fare clic sul pulsante Next.

Dopodiché, fare clic sul pulsante Create access key. È possibile copiare le chiavi nel file .env se si dispone di uno, o scaricare il file CSV per un uso successivo.

Configurare Django per l’uso di AWS S3 per i file statici

Dopo aver creato il bucket S3, è necessario configurare il progetto per servire i file da S3. Nella sezione precedente, abbiamo configurato WhiteNoise per servire i nostri asset statici. È necessario disabilitare WhiteNoise in modo che possiamo servire gli asset da S3. Per farlo, andare al file sitepoint_django/settings.py e commentare le righe di codice pertinenti:

# sitepoint_django/settings.py

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

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

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

Il codice sopra commenta tutte le impostazioni che avevamo messo in atto per WhiteNoise.

Installazione dei pacchetti

Per il progetto in grado di lavorare con S3, abbiamo bisogno di installare due pacchetti: boto3 e django-storages. boto3 fornisce l’API Python di basso livello per interagire con i servizi AWS, mentre django-storages estende le capacità di archiviazione file di Django per integrarsi con provider di archiviazione cloud come Amazon S3, consentendoti di gestire e servire file statici e multimediali nel tuo applicazione Django in modo trasparente:

pip install boto3 django-storages

Configurazione delle impostazioni

Per il nostro progetto in grado di servire file da S3, abbiamo bisogno di apportare alcune modifiche al file settings.py e aggiornarlo con il seguente codice:

# sitepoint_django/settings.py
import os  # prima aggiungi un import per il modulo os

# impostazione di archiviazione S3
STORAGES = {
    'staticfiles': {
        'BACKEND': 'storages.backends.s3boto3.S3Boto3Storage',
        'OPTIONS': {
            'bucket_name': os.getenv('AWS_STORAGE_BUCKET_NAME'),
            'location': 'static',
            'querystring_auth': False,
        },
    }
}

Le impostazioni di cui sopra creano un dizionario STORAGES che funge da contenitore di configurazione centralizzato per definire vari backend di archiviazione utilizzati all’interno del progetto.

È importante notare che questa impostazione è disponibile solo per le versioni di Django a partire dalla 4.2 e successive. Per le versioni precedenti, consultare la documentazione.

Nel codice di cui sopra, abbiamo una configurazione per staticfiles che identifica la configurazione di archiviazione per la gestione dei file statici.

Dopo le impostazioni STORAGES è necessario aggiungere alcune impostazioni specifiche AWS nel nostro file di impostazioni, quindi scorri fino alla porzione in cui troverai l’impostazione STATIC_URL e apporta i seguenti cambiamenti:

# 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'

Caricamento di file statici su S3

Una volta che le impostazioni sono in atto, il prossimo compito è caricare i tuoi file statici nel bucket S3 eseguendo collectstatic:

python manage.py collectstatic  --no-input

Questo raccoglierà tutti i file statici nei nostri app del progetto, li sposterà nel bucket S3 e li metterà in una cartella static come definito nel dizionario STORAGES. La bandiera --no-input indica a Django di funzionare in modalità non interattiva, ignorando qualsiasi promemoria per l’input dell’utente.

Quando utilizzato, Django procederà automaticamente con il processo di raccolta dei file statici senza richiedere alcuna intervento manuale da parte dell’utente.

Esecuzione del progetto

Una volta impostate tutte le configurazioni, è possibile avviare il progetto. Eseguiamo il progetto in modalità sviluppo e serviamo i file dalla bucket S3:

python manage.py runserver

Per verificare che i file vengano effettivamente serviti da S3, è possibile visualizzare il codice sorgente della pagina iniziale:

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

Analizzando gli elementi HTML si evince che le URL puntano effettivamente alla bucket S3.

Conclusione

In sintesi, la gestione dei file statici in Django implica valutare i requisiti del progetto, le esigenze di scalabilità e le restrizioni dell’ambiente di hosting per scegliere il metodo più adatto.

Ad esempio, il middleware WhiteNoise offre una soluzione efficiente per il servizio di file statici in ambienti di hosting condiviso, dove le limitazioni delle risorse e l’accesso limitato al server possono presentare sfide.

Configurando opportunamente le impostazioni di Django e sfruttando strumenti come WhiteNoise, i developer possono garantire un servizio di file statici affidabile e ottimizzato, indipendentemente dall’ambiente di hosting. Ogni metodo offre i propri vantaggi e considerazioni, richiedendo una valutazione accurata per soddisfare le specifiche esigenze del progetto e offrire un’esperienza utente fluida.

Abbiamo trattato diversi punti chiave:

Metodi per la gestione dei file statici. Abbiamo discusso vari approcci, tra cui il servizio di file statici localmente, l’uso del server di sviluppo integrato di Django, l’impiego di soluzioni di archiviazione di terze parti come Amazon S3 e il servizio di file utilizzando pacchetti come WhiteNoise. Ogni metodo ha i propri vantaggi e considerazioni, a seconda di fattori come scalabilità, prestazioni e facilità di distribuzione.

Impostazioni e comandi comuni:

• STATIC_ROOT: specifica la directory in cui verranno archiviati i file statici raccolti.
• STATIC_URL: definisce l’URL base per l’accesso ai file statici attraverso il server web.
• STATICFILES_DIRS: specifica ulteriori directory contenenti asset statici.
• STATICFILES_STORAGE: configura il backend di archiviazione per la gestione dei file statici.
• collectstatic: raccoglie tutti gli asset statici da tutte le directory degli app verso il STATIC_ROOT.

Letture ulteriori:

• Come gestire i file statici
• Come distribuire i file statici