Beheer van statische bestanden in Django: Een uitgebreid handboek

In deze tutorial bekijken we wat statische bestanden zijn in Django, de voordelen van het efficiënt beheren ervan, hun doel in webtoepassingen, en we zullen een demo project instellen om te laten zien hoe statische bestanden te beheren en te serveren met verschillende methoden en tools.

Django is een hoogwaardige Python-webontwikkelingsframework dat webontwikkelaars een krachtig hulpmiddel biedt om webtoepassingen snel en efficiënt te creëren.

Hoewel Django uitstekend is voor het snel en efficiënt maken van webtoepassingen, is het even belangrijk om zorg te dragen voor de look en feel van de ontwikkelde webtoepassingen. Om dat te doen, moet je leren hoe je de middelen kunt beheren die het uiterlijk en de sfeer van je toepassingen ondersteunen en bieden.

Statische bestanden in Django

In Django zijn statische bestanden die bestanden die direct aan de client worden geleverd zonder enige verwerking door de server.

Dit omvat meestal CSS, JavaScript-bestanden, afbeeldingen, iconen, lettertypen en andere middelen die nodig zijn voor het uiterlijk en de sfeer van je webtoepassing.

Django biedt mechanismen om deze statische bestanden efficiënt te beheren en te leveren, waardoor een soepele gebruikerservaring wordt gegarandeerd.

Efficiënt beheer van statische bestanden

Om ervoor te zorgen dat de gebruikers van je webtoepassing een goede gebruikerservaring hebben en de toepassing zoals verwacht presteert, moet je de statische bestanden efficiënt beheren.

Het juist ordenen en cachen van statische bestanden zorgt voor snelle paginaladen, verbeterde responsiviteit en verhoging van de algemene gebruikerstevredenheid.

Django biedt verschillende tools en conventies om bij te dragen aan de handhaving van statische bestanden.

Het doel van statische bestanden in webtoepassingen

Statische bestanden zijn zeer belangrijk, aangezien ze bepalen hoe een webtoepassing eruit ziet en aanvoelt. Ze bepalen hoe componenten in een toepassing worden gestileerd, hoe ze reageren op gebruikersinteracties en uiteindelijk wat een gebruiker ziet wanneer ze een bepaalde webtoepassing bezoeken.

Wanneer u de statische bestanden efficiënt dient, kunt u een visueel aantrekkelijke en reageerbare gebruikersinterface creëren, waardoor de applicatie meer aantrekkelijk en gebruiksvriendelijk wordt.

Instellen van een Demo Project

Om de concepten van het beheer van statische bestanden in Django te illustreren, zullen we een demo project vanaf de grond opzetten.

Dit project zal het creëren van een Django project, het configureren van instellingen voor statische bestanden en het integreren van statische bestanden in een eenvoudig webapplicatie omvatten.

Door mee te gaan met het demo project, krijgt u praktische ervaring met het beheren van statische bestanden in Django en begrijpt u hun belangrijkheid in webontwikkeling.

Voor de doeleinden van deze tutorial zullen we een landingspagina maken, zodanig dat wanneer gebruikers de startpagina van ons project bezoeken, ze een geformatteerde titel zien die hen welkom heet bij de site. Het zal ook de huidige datum weergeven met behulp van JavaScript, en we zullen ook een afbeelding dienen om de pagina compleet te maken.

Het maken van een map om het project op te slaan

Laten we beginnen met het maken van een map die het demo project zal bevatten met het volgende commando:

mkdir sitepoint_django_static_tut

Het maken van een virtuele omgeving

Het wordt aanbevolen om en nieuwe projecten binnen virtuele omgevingen te isoleren. Dit betekent dat elk project zijn eigen afhankelijkheden heeft zonder de globale Python-installatie te beïnvloeden.

We’ll gebruik maken van de virtualenv package om het te creëren. Als het niet geïnstalleerd is in uw ontwikkelomgeving, installeer het met behulp van pip install virtualenv, en creëer een virtuele omgeving met het volgende commando:

virtualenv myenv

Het bovenstaande commando creëert een virtuele omgeving met de naam myenv. Om de virtuele omgeving te gebruiken, moet u deze activeren:

Linux/macOS:

. myenv/bin/activate

Windows:

. myenv\Scripts\activate

Installeren van afhankelijkheden

Zodra de virtuele omgeving actief is, kunt u nu doorgaan en de afhankelijkheden van uw project installeren. Als eerste stap zullen we Django installeren. We zullen andere afhankelijkheden installeren als we bij de secties komen die hun gebruik demonstreren:

pip install Django

Dit zal de meest recente stabiele versie van Django installeren, die op het moment van schrijven versie 5.0 is.

Een Django project aanmaken

Na succesvolle installatie van Django, hebt u nu toegang tot Django beheercommando’s. Laten we deze gebruiken om een Django project te creëren in de virtuele omgeving:

django-admin startproject sitepoint_django .

Het bovenstaande commando zal een Django project met de naam sitepoint_django creëren en de punt aan het einde duidt erop dat we het project in de huidige map willen aanmaken.

Een demo app aanmaken

Om de verschillende concepten van het beheer van statische bestanden te illustreren, moeten we minstens één Django app in ons project aanmaken:

python manage.py startapp  static_demo

Dit zal een nieuwe app in ons project creëren met de naam static_demo. Om deze door ons project te laten herkennen, moeten we deze toevoegen aan de ingestelde apps-instelling in het settings.py bestand van ons project. Open sitepoint_django/settings.py, ga naar de INSTALLED_APPS instelling en voeg static_demo.apps.StaticDemoConfig toe aan de onderkant van de lijst, zoals hieronder weergegeven:

# sitepoint_django/settings.py

INSTALLED_APPS = [
    # andere apps
    'static_demo.apps.StaticDemoConfig',
]

Het maken van de startpagina-sjabloon

We zullen wat HTML renderen wanneer de gebruiker de startpagina van onze site bezoekt. In de static_demo app, maak een templates directory aan, en in deze directory maak nog een directory aan en noem deze static_demo. In deze directory, maak een sjabloon aan en noem deze index.html zodat het pad static_demo/templates/static_demo/index.html wordt.

Plaats de volgende code 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>

Het maken van de indexweergave

Om de sjabloon te laten zien aan gebruikers wanneer ze de startpagina van onze app bezoeken, moeten we een weergavefunctie maken die wordt geactiveerd om de home.html sjabloon te renderen. Open het static_demo/views.py bestand en voeg de volgende code toe:

# static_demo/views.py

from django.shortcuts import render

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

Het maken van het statische_demo URL-bestand

We willen dat de indexweergave in de static_demo app de homepage rendert wanneer een gebruiker onze site bezoekt. Daarom gaan we een URL-schema maken voor de weergavefunctie die de homepage zal renderen. Hiervoor moeten we een urls.py bestand maken voor de static_demo app en de static_demo URL-bestand verbinden met het URL-bestand van de projecten.

Daarom, in de static_demo app, maak een bestand aan en noem het urls.py en voeg de volgende code toe aan het:

# static_demo/urls.py

from django.urls import path
from .import views

app_name = 'static_demo'

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

De code hierboven creëert een URL voor de indexweergave van ons project, dus als een gebruiker iets bezoekt zoals http://oursite.com/, of als je http://127.0.0.1:8000 bezoekt in ontwikkeling, zal de indexweergave worden aangeroepen om daarop te reageren.

Laten we het toevoegen aan het project URL-bestand. Open het sitepoint_django/urls.py bestand en voeg de volgende code toe:

# sitepoint_django/urls.py

from django.contrib import admin
from django.urls import path, include # voeg een import voor include toe

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('static_demo.urls')), # voeg deze regel toe
]

De code hierboven brengt enkele wijzigingen aan in het standaard urls.py bestand. We hebben een import toegevoegd voor de include functie, die Django vertelt dat we het static_demo.urls opnemen.

Testen van het project

De initiële configuratie van het project is op dit moment klaar. Laten we de ontwikkelingsserver draaien om te zien of alles goed verbonden is.

Draai het project met de volgende opdracht:

python manage.py runserver

Als alles correct is ingesteld, zou je naar http://127.0.0.1:8000 moeten kunnen gaan. Je zult wat ongeformatteerde tekst zien die je welkom heet bij de site.

Dienen van Statische Bestanden in Ontwikkeling

Om opmaak toe te voegen aan de pagina, JavaScript voor de datum en de afbeelding, moeten we wijzigingen aanbrengen in het project. Laten we dit stap voor stap doen en zien hoe we de verschillende statische bestanden op verschillende manieren kunnen dienen, beginnend met de ontwikkelomgeving.

Instellen van een directory voor statische bestanden

Django raadt aan dat alle statische middelen op app-niveau worden beheerd: dat wil zeggen, alle CSS, JS en afbeeldingen die een bepaalde app nodig heeft, moeten aanwezig zijn binnen de grenzen van die app. Dus laten we de static_demo app aanpassen en een directory maken met de naam static, en daarbinnen nog een directory maken met de naam static_demo. Vervolgens in de static_demo directory drie extra directories maken: css, js, en images. Uiteindelijk zullen we een structuur hebben die lijkt op de onderstaande:

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

De reden waarom je een static_demo directory in de static directory zou willen maken, is om je statische middelen te namespaceren. Als je meer dan één app hebt, en je hebt de CSS in beide apps genoemd als styles.css, zou Django alleen werken met de eerste stylesheet die het vindt, aangezien het niet in staat zou zijn om onderscheid te maken tussen de anderen. Daarom namespaceren we ze zodat Django kan weten welk assetbestand we in onze templates aanroepen.

Maken van de statische bestanden

In deze stap gaan we minimale statische assets instellen die laten zien hoe je bestanden in de ontwikkelingsfase kunt serveren.

In de js map, maak een bestand aan en noem het todays_date.js, en voeg de volgende code toe:

/* static_demo/js/todays_date.js */

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

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

De bovenstaande code haalt de huidige datum uit JavaScript, formatteert deze tot een string en toont deze vervolgens in een div met een ID van todaysDate.

In de css directory, maak een bestand aan, noem het styles.css, en voeg de volgende code toe:

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

De bovenstaande code gebruikt de Flexbox-layout om alle items op de pagina zowel horizontaal als verticaal te centreren. Het stelt ook de lettergrootte van het H2-element in op 24px en de kleur op groen.

Voor de afbeelding kun je elke afbeelding gebruiken die je leuk vindt. Kopieer gewoon een afbeelding naar de images directory en onthoud de naam.

Configureren van statische bestandsinstellingen

Om statische bestanden in de ontwikkelingsfase te serveren, moeten er een aantal dingen worden ingesteld in het Django settings.py bestand. Open het sitepoint_django/settings.py bestand en controleer of de volgende instellingen aanwezig zijn:

# sitepoint_django/settings.py`

DEBUG=True

Bij ontwikkeling wordt over het algemeen aanbevolen om DEBUG in uw Django projectinstellingen op True te zetten. Deze instelling activeert diverse debugfuncties, waaronder gedetailleerde foutberichten en callstacksporen, die onschatbaar zijn voor het vaststellen en oplossen van problemen tijdens de ontwikkeling.

Bovendien, wanneer DEBUG is ingesteld op True, serveert de django.contrib.staticfiles app automatisch statische bestanden uit de static directory van elke app. Deze werking vereenvoudigt het ontwikkelingsproces door het niet meer nodig te maken om handmatig configuratie te doen voor het serveren van statische bestanden.

In de INSTALLED_APPS instelling, controleer of u de django.contrib.staticfiles hebt toegevoegd. Zo niet, voeg deze toe boven de apps die u in het project hebt. Bijvoorbeeld, in dit project voeg het toe boven de static_demo app string, zoals hieronder weergegeven:

# sitepoint_django/settings.py`

INSTALLED_APPS = [

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

De django.contrib.staticfiles app die door Django wordt geleverd, is essentieel voor het serveren van statische bestanden tijdens de ontwikkeling. Standaard doorzoekt het uw projectapps om statische bestandendirectories binnen elke app te vinden. Echter, als u extra statische activa heeft die niet geassocieerd zijn met een specifieke app, kunt u deze nog steeds toegankelijk maken voor django.contrib.staticfiles door de STATICFILES_DIRS instelling in uw project settings.py bestand in te stellen. Deze instelling stelt u in staat om extra directories op te geven waar statische bestanden zich bevinden. Bijvoorbeeld:

# sitepoint_django/settings.py`

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

Naast DEBUG en STATICFILES_DIRS, is een andere belangrijke instelling die u in uw Django project instellingenbestand moet opnemen STATIC_URL. Hoewel Django een standaardwaarde biedt voor STATIC_URL, kunt u deze expliciet definiëren in uw settings.py bestand als deze nog niet aanwezig is.

De STATIC_URL instelling specificeert de basis-URL waaruit statische middelen worden gedient. Bijvoorbeeld, het instellen van STATIC_URL = "static/" instrueert Django om statische middelen te dienen vanaf de /static/ URL pad. Dit betekent dat, bijvoorbeeld, het stijlblad gevonden in de static_demo app toegankelijk zal zijn op een URL zoals http://127.0.0.1:8000/static/static_demo/css/styles.css.

Bijwerken van de template

Met de instellingen uit de weg, om de statische bestanden in de template te gebruiken, moeten we deze bijwerken met de volgende HTML:

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

<!-- statische bestandsbehandelingsfunctionaliteit toevoegen -->
{% 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>

    <!-- link naar css hieronder -->
    <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>
    <!-- link naar afbeelding hieronder -->
    <img src="{% static 'static_demo/images/flowerImage.png' %}" alt="Flower Image"> 

    <!-- link naar js hieronder -->
    <script src="{% static 'static_demo/js/todays_date.js' %}"></script>
</body>
</html>

Die templateupdate introduceert ons een nieuw label: {% load static %}. Dit label laadt de functionaliteit voor het afhandelen van statische bestanden die wordt geboden door de Django sjabloonengine. Het opnemen van dit label in een Django templatebestand stelt ons in staat om sjabloonlabels en filters die verband houden met statische bestanden te gebruiken.

Bijvoorbeeld, door het in onze sjabloon te gebruiken, kunnen we statische bestanden zoals afbeeldingen, CSS en JS in HTML-elementen aanroepen. Het gebruik ervan stelt Django ook in staat om URL’s voor de referenties van statische middelen te genereren:

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

Met die instellingen en de sjabloonupdate op zijn plaats, zouden we het project moeten uitvoeren en kijken of de bestanden worden geleverd in ontwikkeling. Voer het project uit met het volgende commando:

python manage.py runserver

Als alles correct is ingesteld, zouden we de ontwikkelingsserver moeten hebben draaien op http://127.0.0.1:8000. Als we die link bezoeken, zouden we een pagina moeten hebben die lijkt op de onderstaande.

Het hebben van een soortgelijke afbeelding toont aan dat de statische bestanden correct zijn toegepast.

Je zou moeten opmerken dat in Django-ontwikkeling, wanneer DEBUG=True in de instellingen van je project, en django.contrib.staticfiles is ingeschakeld, dit Django’s ontwikkelingsserver (runserver) in staat stelt om statische bestanden te serveren. In deze situatie worden eventuele wijzigingen aan statische bestanden, zoals CSS, JavaScript of afbeeldingen, automatisch gedetecteerd en door Django toegepast. Dit soepele proces vereenvoudigt de ontwikkeling aanzienlijk, aangezien je onmiddellijk de gevolgen van je wijzigingen zult zien zonder de server handmatig te hoeven verversen of opnieuw opstarten.

Echter, in productieomgevingen, het serveren van statische bestanden houdt meestal het gebruik van een apart web server of CDN in. In dit geval kunnen wijzigingen in statische bestanden mogelijk niet automatisch worden gedetecteerd en toegepast door Django, wat handmatige interventie vereist om ervoor te zorgen dat de bijgewerkte bestanden worden geleverd aan gebruikers. Bovendien, als u ervoor kiest om statische bestanden handmatig te serveren met een andere methode, zoals de django.views.static.serve() view, kan automatische detectie en toepassing van wijzigingen niet plaatsvinden, en moet u misschien uw eigen mechanismen implementeren voor het afhandelen van updates van statische bestanden.

Het Serveren van Statische Bestanden met WhiteNoise

Tijdens ontwikkeling, hoewel django.contrib.staticfiles het proces van het serveren van statische activa vereenvoudigt, zorgt het voor vlekkeloze updates terwijl u wijzigingen aanbrengt.

Echter, bij het overstappen naar productie, moeten instellingen zoals DEBUG=True worden uitgeschakeld, en statische bestanden kunnen vanuit een CDN of een andere server worden geserveerd. Dit vereist een oplossing die beide omgevingen overbrugt – het mogelijk maakt om vloeiend bestanden te serveren tijdens ontwikkeling terwijl het de productieomgeving nauwgezet weerspiegelt.

In beeld komt het WhiteNoise pakket. Ontworpen om soepel te integreren met Django, biedt WhiteNoise een robuuste oplossing voor het serveren van statische bestanden in zowel ontwikkelings- als productieomgevingen, biedt een verenigd aanpak dat consistentie en betrouwbaarheid garandeert over de verschillende implementatiefases. Laten we WhiteNoise onderzoeken.

Installeren en configureren van WhiteNoise in Django

Aan de slag met WhiteNoise is eenvoudig. In deze sectie zullen we u door het installatieproces leiden en u begeleiden bij het configureren van WhiteNoise binnen uw Django project.

We installeren WhiteNoise zo:

pip install whitenoise

Na een succesvolle installatie, ga naar sitepoint_django/settings.py, scrol naar beneden, en vind de STATIC_URL instelling. Daaronder voeg je de STATIC_ROOT instelling toe:

# sitepoint_django/settings.py

STATIC_ROOT = BASEDIR / "staticfiles"

De bovenstaande instelling vertelt Django dat wanneer collectstatic wordt uitgevoerd, alle statische assets in alle apps van je project worden verzameld en opgeslagen in deze map genaamd staticfiles.

Het volgende dat je moet doen is de collectstatic beheercommando uitvoeren:

python manage.py collectstatic

Om WhiteNoise te activeren, moet je het toevoegen aan de MIDDLEWARE instellingslijst, bewerk de settings.py bestand, en voeg de WhiteNoise middleware toe na de Django SecurityMiddleware en voor alle andere middleware:

# sitepoint_django/settings.py

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

WhiteNoise gebruiken in ontwikkeling

Met alleen de bovenstaande stappen kan WhiteNoise statische bestanden in productie leveren. Maar als je het project op dit moment uitvoert, zal de Django ontwikkelingsserver automatisch de verwerking van statische bestanden overnemen. Maar om te profiteren van vergelijkbare gedrag in ontwikkeling en in productie, is het een goed idee om het ook te gebruiken om bestanden in ontwikkeling te serveren.

Om dat te doen, schakelen we Django’s statische bestandsbehandeling uit en laten we WhiteNoise het overnemen door simpelweg het instellingenbestand aan te passen en WhiteNoise toe te voegen aan de INSTALLED_APPS lijst, waarbij deze boven django.contrib.staticfiles wordt ingesteld:

# sitepoint_django/settings.py

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

Je moet ook DEBUG uitschakelen door deze in te stellen op False:

# sitepoint_django/settings.py

DEBUG=False

Met deze stappen kun je je statische activa naadloos dienen met behulp van de WhiteNoise-pakket.

Om te controleren of WhiteNoise inderdaad je bestanden aanbiedt, kun je django.contrib.staticfiles uit de INSTALLED_APPS instellingslijst verwijderen of uitschakelen. Het is echter belangrijk op te merken dat het verwijderen van django.contrib.staticfiles enkele statische bestandsbeheercommando’s onbruikbaar maakt, zoals het collectstatic commando. Dit commando is essentieel voor het verzamelen en consolideren van statische bestanden uit je apps in een enkele directory voor efficiënte dienstverlening in productieomgevingen.

Geavanceerde configuratieopties voor WhiteNoise

Hoewel de bovenstaande stappen voldoende zijn voor de meeste gevallen, biedt WhiteNoise nog enkele extra configuratieopties. Bijvoorbeeld, je kunt compressie en cacheondersteuning toevoegen aan je project. Om dit in te schakelen, open je het bestand sitepoint_django/settings.py en voeg de volgende instellingen toe:

# sitepoint_django/settings.py

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

De bovenstaande instelling zorgt ervoor dat WhiteNoise de statische bestanden comprimeert en een hash genereert voor een unieke naam, zodat ze veilig gecached kunnen worden.

Het gebruik van WhiteNoise in omgevingen met gedeelde hosting

Gedeelde hosting is een type webhosting waarbij meerdere websites op een enkele fysieke server worden gehost. In deze opzet worden middelen zoals schijfruimte, bandbreedte en rekenkracht gedeeld onder meerdere gebruikers, waardoor het een kosteneffectieve optie is voor het hosten van kleine tot middelgrote websites.

Gedeelde hostingomgevingen worden meestal beheerd door hostingproviders, die serveronderhoud, beveiliging en technische ondersteuning verzorgen, waardoor websiteeigenaren zich kunnen concentreren op het bouwen en beheren van hun websites zonder zich zorgen te hoeven maken over serveradministratieve taken.

Uitdagingen bij het beheren van statische bestanden in gedeelde hosting

Hoewel gedeelde hosting een betaalbare en handige hostingoplossing biedt voor veel websites, heeft het ook beperkingen in vergelijking met andere typen hosting, zoals virtuele private servers (VPS) of dedicated servers. Deze beperkingen omvatten het volgende:

Beperkingen op serverconfiguraties en instellingen, die de mogelijkheid beperken om serversoftware aan te passen of extra hulpprogramma’s te installeren.
Bronnenbeperkingen zoals schijfruimte spelen ook een rol, aangezien er mogelijk beperkingen zijn op de hoeveelheid bandbreedte die kan worden gebruikt om deze bestanden aan bezoekers te serveren.
Prestaties kunnen een ander uitdaging zijn bij gedeelde hosting, omdat het delen van middelen met andere gebruikers kan resulteren in tragere laadtijden voor statische bestanden, vooral tijdens perioden van hoge verkeersdrukte of middelenbenutting.

Configureren voor gebruik van WhiteNoise

WhiteNoise is een Python-pakket dat soepel integreert met Django, waardoor het een ideale keuze is voor het serveren van statische bestanden in omgevingen met gedeelde hosting. In tegenstelling tot andere software-installaties zoals Apache en Nginx, die misschien niet toegestaan zijn in bepaalde hostingomgevingen, kan WhiteNoise gemakkelijk naast uw andere projectpakketten worden geïnstalleerd.

Door Django in te stellen om WhiteNoise te gebruiken, kun je efficiënt statische bestanden rechtstreeks vanuit je Django-applicatie serveren zonder de noodzaak van extra serversoftware. Dit vereenvoudigt het opzettingsproces en zorgt voor compatibiliteit met een breed scala aan hostingproviders.

De meeste gedeelde hostingproviders bieden een cPanel dat je toestaat serverconfiguraties en bestandsuploads te doen. Dus zodra je je bestanden hebt geüpload, kun je de volgende wijzigingen aanbrengen in het projectbestand settings.py:

# sitepoint_django/settings.py

STATIC_URL='static/'

# vervang username door je cpanel gebruikersnaam
# gebruik public_html als je werkt aan je hoofddomein zoals https://voorbeeld.com
STATIC_ROOT='/home/username/public_html/static'

# OF 
# gebruik mapnaam als je werkt aan een subdomein zoals https://subdomein.voorbeeld.com
STATIC_ROOT='/home/username/subdomain.mydomain.com/static'

Met deze instellingen in plaats, hoef je enkel de collectstatic opdracht uit te voeren zodat je statische bestanden worden verzameld in een van bovenstaande STATIC_ROOT directories, afhankelijk van het domein.

Statische bestanden serveren vanuit AWS S3

Amazon Simple Storage Service (S3) is een schaalbare objectopslagdienst aangeboden door Amazon Web Services (AWS). Het stelt gebruikers in staat om opslagruimtes te creëren die bekend staan als buckets waar je verschillende soorten gegevens zoals documenten, afbeeldingen, video’s en belangrijk voor ons tutorial statische bestanden kunt opslaan.

AWS biedt een gratis tier voor verschillende van zijn diensten, waaronder Amazon S3. De gratis tier stelt gebruikers in staat om met AWS-diensten te beginnen zonder kosten voor een bepaalde periode of tot specifieke gebruikslimieten. Om te beginnen, kun je inschrijven voor de S3 gratis tier. Om het inschrijvingsproces te voltooien, moet je echter betalingsgegevens verstrekken.

Het maken van een S3 Bucket

Om een bucket te maken, ga naar het S3-dashboard en klik op de Bucket maken knop.

Geef de bucket een unieke dns-compatibele naam. Je kunt eventueel een regio selecteren die dichter bij jou of je gebruikers ligt.

Schakel ACL in voor de bucket.

Schakel publieke toegang in voor de bucket door Alle publieke toegang blokkeren uit te schakelen.

Na succesvolle creatie moet je je bucket op de hoofdpagina van S3 zien.

IAM-toegang inschakelen

Na het maken van een bucket kun je deze als rootgebruiker gebruiken, maar AWS raadt je aan een IAM (Identity Access Management) gebruikersgroep te maken en ze toegang te geven tot slechts een bepaalde bucket.

Het maken van een IAM-groep

Ga naar de hoofdpagina van IAM en selecteer Gebruikersgroepen in het zijmenu. Klik vervolgens op de Groep maken knop. Wijs de groep een naam toe.

Selecteer vervolgens onder Bevestig beleidsregels, zoek naar S3 en wijs AmazonS3FullAccess toe en klik op de Groep maken knop.

Het maken van een IAM-gebruiker

Terwijl je nog steeds op de IAM-pagina bent, selecteer Gebruikers op het deelvenster aan de linkerkant en klik vervolgens op de Gebruiker maken knop.

Geef de IAM-gebruiker een naam en klik op de Volgende knop.

Onder de Machtigingen instellen optie, laat de Gebruiker aan groep toevoegen als geselecteerde optie, ga vervolgens naar Gebruikersgroepen en selecteer de gebruikersgroep die je hierboven hebt gemaakt en klik dan op de Volgende knop.

Bekijk en klik Gebruiker maken.

Klik nu op de gebruikersnaam om de gebruikersgegevens te bekijken. Klik op het tabblad Beveiligingsreferenties en klik vervolgens op Toegangssleutel maken. Kies Lokale code en klik op de Volgende knop.

Daarna klik je op de Toegangssleutel maken knop. Je kunt de sleutels naar je .env bestand kopiëren als je er een hebt, of het CSV-bestand downloaden voor later gebruik.

Django configureren om AWS S3 te gebruiken voor statische bestanden

Na het maken van de S3-bucket, moeten we het project configureren om bestanden van S3 te dienen. In de vorige sectie hebben we WhiteNoise geconfigureerd om onze statische activa te dienen. We moeten WhiteNoise uitschakelen zodat we de activa van S3 kunnen dienen. Om dat te doen, ga naar het sitepoint_django/settings.py bestand en commentaar toevoegen aan de relevante regels code:

# sitepoint_django/settings.py

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

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

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

Het bovenstaande codefragment commentaar uit alle instellingen die we hadden geplaatst voor WhiteNoise.

Pakketten installeren

Om het project te kunnen werken met S3, moeten we twee pakketten installeren: boto3 en django-storages. boto3 biedt de low-level Python API voor interactie met AWS-services, terwijl django-storages Django’s bestandsopslagmogelijkheden uitbreidt om te integreren met cloudopslagproviders zoals Amazon S3, waardoor u statische en mediabestanden in uw Django-toepassing eenvoudig kunt beheren en serveren:

pip install boto3 django-storages

Instellingen configureren

Om ons project in staat te stellen bestanden van S3 te serveren, moeten we een aantal wijzigingen aanbrengen in het settings.py bestand en het bijwerken met de volgende code:

# sitepoint_django/settings.py
import os  # first add an import for the os module

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

De bovenstaande instellingen creëren een STORAGES dictionary die fungeert als een geconcentreerde configuratiecontainer voor het definiëren van verschillende opslagbackends die binnen het project worden gebruikt.

Het is belangrijk op te merken dat deze instelling alleen beschikbaar is voor versies van Django vanaf 4.2 en hoger. Voor eerdere versies, bezoek de documentatie.

In de code hierboven hebben we een instelling voor staticfiles die de opslagconfiguratie identificeert voor het beheren van statische bestanden.

Na de STORAGES instellingen moeten we enkele AWS-specifieke instellingen toevoegen in ons instellingenbestand, dus scroll naar het deel waar je de STATIC_URL instelling vindt en maak de volgende wijzigingen:

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

Uploaden van statische bestanden naar S3

Zodra de instellingen op hun plaats zijn, is de volgende taak het uploaden van je statische bestanden naar de S3-bucket. Dat doe je door collectstatic uit te voeren:

python manage.py collectstatic  --no-input

Dit zal alle statische bestanden in onze projectapps verzamelen, ze naar de S3-bucket verplaatsen en ze in een static map plaatsen zoals gedefinieerd in de STORAGES dictionary. De --no-input vlag instrueert Django om in niet-interactieve modus te draaien, waardoor eventuele prompts voor gebruikersinvoer worden omzeild.

Wanneer gebruikt, zal Django automatisch de procedure voor het verzamelen van statische bestanden doorvoeren zonder dat de gebruiker enige handmatige tussenkomst nodig heeft.

Project uitvoeren

Zodra alle instellingen gereed zijn, kun je het project uitvoeren. Laten we het project in ontwikkeling uitvoeren en de bestanden vanuit de S3-bucket serveren:

python manage.py runserver

Om te controleren of je inderdaad bestanden vanuit S3 serveert, kun je de broncode van de startpagina bekijken:

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

Het bekijken van de HTML-elementen laat zien dat de URLs inderdaad naar de S3-bucket verwijzen.

Conclusie

Samenvattend, het beheren van statische bestanden in Django vereist het inschatten van projectvereisten, schaalbaarheidsbehoeften en beperkingen van de hostingomgeving om de meest geschikte methode te kiezen.

Bijvoorbeeld, de WhiteNoise-middleware biedt een efficiënte oplossing voor het serveren van statische bestanden in omgevingen met gedeelde hosting, waar middelenbeperkingen en beperkte servertoegang uitdagingen kunnen opleveren.

Door Django-instellingen goed te configureren en hulpmiddelen zoals WhiteNoise te gebruiken, kunnen ontwikkelaars ervoor zorgen dat het serveren van statische bestanden betrouwbaar en geoptimaliseerd is, ongeacht de hostingomgeving. Elke methode biedt zijn eigen voordelen en overwegingen, die zorgvuldig beoordeeld moeten worden om de specifieke behoeften van het project te voldoen en een soepele gebruikerservaring te leveren.

We hebben verschillende belangrijke punten behandeld:

Methoden voor het beheren van statische bestanden. We hebben verschillende benaderingen besproken, waaronder het leveren van statische bestanden lokaal, het gebruik van Django’s ingebouwde ontwikkelingsserver, het inzetten van externe opslagoplossingen zoals Amazon S3, en het leveren van bestanden met pakketten zoals WhiteNoise. Elke methode heeft haar eigen voordelen en overwegingen, afhankelijk van factoren zoals schaalbaarheid, prestaties en eenvoud van implementatie.

Algemene instellingen en commando’s:

STATIC_ROOT: specificeert de map waar verzamelde statische bestanden worden opgeslagen.
STATIC_URL: definieert de basis-URL voor toegang tot statische bestanden via de webserver.
STATICFILES_DIRS: specificeert aanvullende mappen met statische assets.
STATICFILES_STORAGE: configureert de opslagbackend voor het afhandelen van statische bestanden.
collectstatic: verzamelt alle statische assets uit alle app-mappen naar STATIC_ROOT.

Verder lezen: