introduction
DigitalOcean Spaces est une solution de stockage d’objets, idéale pour les données non structurées telles que l’audio, la vidéo, les images ou de grandes quantités de texte. Pour en savoir plus sur les espaces et le stockage d'objets, vous pouvez lireAn Introduction to DigitalOcean Spaces.
Dans ce didacticiel, nous expliquerons comment configurer votre application Django pour qu’elle fonctionne avec Spaces.
Conditions préalables
Afin de commencer ce didacticiel, vous devez configurer quelques éléments:
-
Un compte utilisateur non root avec les privilèges
sudo
configuré sur un serveur Debian ou Ubuntu Linux. Si vous ne l’avez pas encore configuré, suivez le didacticielinitial server setup for Ubuntu 16.04 ouDebian. -
De plus, vous devez créer un espace DigitalOcean et générer une clé API. Pour obtenir des conseils à ce sujet, vous pouvez suivre cetutorial to create a Space and set up the API key.
Avec la configuration initiale du serveur, l’espace DigitalOcean et la clé API, vous êtes prêt à commencer.
[[step-1 -—- set-up-a-virtual-environment]] == Étape 1 - Configurer un environnement virtuel
Si ce n’est déjà fait, commencez par mettre à jour et mettre à niveau votre serveur.
sudo apt-get update && sudo apt-get -y upgrade
Votre serveur doit être livré avec Python 3, mais vous pouvez exécuter la commande suivante pour vous assurer qu'il est installé:
sudo apt-get install python3
Ensuite, installez pip pour gérer les packages logiciels pour Python:
sudo apt-get install -y python3-pip
Enfin, nous pouvons installer le modulevirtualenv afin de pouvoir l'utiliser pour mettre en place un environnement de programmation:
sudo pip3 install virtualenv
Pour obtenir des conseils et des informations supplémentaires sur les environnements de programmation, vous pouvez en savoir plus sursetting up a virtual environment.
[[step-2 -—- create-django-app-and-install-dependencies]] == Étape 2 - Créer l'application Django et installer les dépendances
Nous allons maintenant passer à la création de l'application Django qui utilisera notre espace DigitalOcean.
Dans le répertoire de base du serveur, exécutez la commande suivante pour créer un répertoire (dans ce cas, nous le nommeronsdjango-apps
) pour contenir le projet et accéder au répertoire:
mkdir django-apps
cd django-apps
Dans ce répertoire, créez un environnement virtuel avec la commande suivante. Nous l'appelleronsenv
, mais vous pouvez l'appeler comme vous le souhaitez.
virtualenv env
Vous pouvez maintenant activer l’environnement et vous recevrez des commentaires indiquant que vous êtes dans cet environnement en modifiant le préfixe de votre ligne de commande.
. env/bin/activate
Vous recevrez des informations indiquant que vous vous trouvez dans l’environnement en modifiant le préfixe de votre ligne de commande. Cela ressemblera à ceci, mais changera en fonction du répertoire dans lequel vous vous trouvez:
Dans l'environnement, installez le package Django avec pip afin de pouvoir créer et exécuter une application Django. Pour en savoir plus sur Django, lisez notre série de tutoriels surDjango Development.
pip install django
Créez ensuite le projet avec la commande suivante, dans ce cas nous l'appelleronsmysite
.
django-admin startproject mysite
Ensuite, nous installerons Boto 3, qui est unAWS SDK for Python qui permettra à notre application d'interagir avec des éléments tels que S3, EC2 et DigitalOcean Spaces. Etant donné que DigitalOcean Spaces est interopérable avec Amazon S3, Spaces peut facilement interagir avec des outils tels que Boto 3. Pour plus de détails sur la comparaison entre S3 et Spaces, veuillez consulter lesSpaces docs.
sudo pip install boto3
Une autre bibliothèque cruciale pour notre projet est django-storages, qui esta collection of custom storage backends for Django. Nous allons également installer ceci avec pip.
sudo pip install django-storages
Vous avez configuré vos dépendances dans l'environnement de votre application Django et êtes maintenant prêt à configurer des répertoires statiques et modèles.
[[step-3 -—- add-directory-and-assets]] == Étape 3 - Ajouter des répertoires et des actifs
Avec notre environnement configuré avec toutes les dépendances, vous pouvez maintenant basculer vers le répertoiremysite/mysite
,
cd ~/django-apps/mysite/mysite
Dans le répertoiremysite/mysite
, exécutez les commandes suivantes pour créer les répertoires statique et modèle.
mkdir static && mkdir templates
Nous allons ensuite créer les sous-répertoires pour les images et le CSS à vivre dans le répertoirestatic
.
mkdir static/img && mkdir static/css
Une fois les répertoires créés, nous téléchargerons un fichier de test que nous ajouterons éventuellement à notre stockage d’objets. Basculez vers le répertoireimg
car nous allons télécharger une image.
cd ~/django-apps/mysite/mysite/static/img
Dans ce répertoire, nous téléchargerons l'image du logo DigitalOcean à l'aide de la commandewget
de Wget. Il s'agit d'un programme GNU couramment utilisé, préinstallé sur les distributions Ubuntu, permettant de récupérer le contenu des serveurs Web.
wget http://assets.digitalocean.com/logos/DO_Logo_icon_blue.png
Vous verrez la sortie semblable à la suivante:
OutputResolving www.digitalocean.com (www.digitalocean.com)... 104.16.24.4, 104.16.25.4
Connecting to www.digitalocean.com (www.digitalocean.com)|104.16.24.4|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1283 (1.3K) [image/png]
Saving to: ‘DO_Logo_icon_blue.png’
DO_Logo_icon_blue-6edd7377 100%[=====================================>] 1.25K --.-KB/s in 0s
2017-11-05 12:26:24 (9.60 MB/s) - ‘DO_Logo_icon_blue.png’ saved [1283/1283]
À ce stade, si vous exécutez la commandels
, vous remarquerez qu’une image nomméeDO_Logo_icon_blue.png
existe maintenant dans le répertoirestatic/img/
.
Avec ces répertoires configurés et l’image stockée téléchargée sur le serveur, nous pouvons passer à la modification des fichiers associés à notre application Django.
[[step-4 -—- edit-css-and-html-files]] == Étape 4 - Modifier les fichiers CSS et HTML
Nous allons commencer par éditer la feuille de style. Vous devez vous déplacer dans le répertoirecss
afin que nous puissions ajouter une feuille de style de base pour notre application Web.
cd ~/django-apps/mysite/mysite/static/css
Utilisez nano ou un autre éditeur de texte de votre choix pour modifier le document.
nano app.css
Une fois le fichier ouvert, ajoutez le CSS suivant:
app.css
body {
margin: 0;
background-color: #f1f1f1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 80%;
border: 1px solid #ddd;
background-color: #fff;
padding: 20px;
margin: 40px auto;
}
form {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ff9900;
width: 350px;
}
table {
border-collapse: collapse;
width: 100%;
}
table td,
table th {
border: 1px solid #eceeef;
padding: 5px 8px;
text-align: left;
}
table thead {
border-bottom: 2px solid #eceeef;
}
Une fois que vous avez terminé, vous pouvez enregistrer et fermer le fichier. De là, accédez au répertoiretemplates
.
cd ~/django-apps/mysite/mysite/templates
Nous devons ouvrir un fichier appeléhome.html
et y ajouter du HTML pour savoir comment notre application Web de base sera affichée. Avec nano, ouvrez le fichier pour qu’il soit prêt à être édité:
nano home.html
Dans le document, ajoutez ce qui suit:
home.html
{% load static %}
Spaces + Django Tutorial
Spaces + Django Tutorial
Congratulations, you’re using Spaces!
Enregistrez et fermez le fichier. Le dernier fichier que nous mettrons à jour est le fichierurls.py
afin qu'il pointe vers votre fichierhome.html
nouvellement créé. Nous devons nous déplacer dans le répertoire suivant:
cd ~/django-apps/mysite/mysite
Utilisez nano pour modifier le fichier urls.py.
nano urls.py
Vous pouvez supprimer tout le contenu du fichier puis ajouter les éléments suivants:
urls.py
from django.conf.urls import url
from django.views.generic import TemplateView
urlpatterns = [
url(r'^$', TemplateView.as_view(template_name='home.html'), name='home'),
]
Une fois ces fichiers configurés, nous pouvons passer à l'édition de notre fichiersettings.py
afin de l'intégrer au stockage d'objets.
[[step-5 -—- update-settings]] == Étape 5 - Mettre à jour les paramètres
Il est maintenant temps de mettre à jour votre fichier de paramètres avec vos informations d’identification Spaces, afin que nous puissions tirer parti de la page que nous avons configurée pour afficher l’image.
Gardez à l'esprit que, dans cet exemple, nous allons coder en dur nos informations d'identification par souci de brièveté, mais cela n'est pas suffisamment sécurisé pour une configuration de production. Il est recommandé d'utiliser un package commePython Decouple quelque chose comme pour masquer vos informations d'identification Spaces. Ce paquet séparera les paramètres de paramètres de votre code source, ce qui est nécessaire pour une application Django de production.
Nous allons commencer par naviguer jusqu'à l'emplacement de votre fichier de paramètres.
cd ~/django-apps/mysite/mysite
Ouvrez le fichier pour l’éditer, en utilisant nano:
nano settings.py
Ajoutez l'adresse IP de votre serveur en tant qu'hôte autorisé.
settings.py
...
ALLOWED_HOSTS = ['your-server-ip']
...
Ajoutez ensuitestorages
à la section des applications installées du fichier de paramètres et supprimezdjango.contrib.admin
car nous ne l'utiliserons pas dans ce didacticiel. Cela devrait ressembler à ce qui suit.
settings.py
...
# Application definition
INSTALLED_APPS = [
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'storages'
]
...
Remplacez et ajoutez le texte en surbrillance à la sectionTEMPLATES
du fichier de paramètres, afin que le projet sache où trouver votre fichier home.html.
settings.py
...
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'mysite/templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
...
Enfin, mettons à jour vos paramètres en bas du fichier. Nous ajouterons ce qui suit sous la section# Static files
. Assurez-vous d’ajouter vos propres clés d’accès, votre nom de compartiment et le répertoire dans lequel vous souhaitez faire vivre vos fichiers. Vous pouvez ajouter un répertoire via votre navigateur dans l'interface Spaces. Au moment de la rédaction de cet article, NYC3 est la seule région dans laquelle les espaces se trouvent actuellement. Elle est donc transmise en tant qu'URL de noeud final.
settings.py
...
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
AWS_ACCESS_KEY_ID = 'your-spaces-access-key'
AWS_SECRET_ACCESS_KEY = 'your-spaces-secret-access-key'
AWS_STORAGE_BUCKET_NAME = 'your-storage-bucket-name'
AWS_S3_ENDPOINT_URL = 'https://nyc3.digitaloceanspaces.com'
AWS_S3_OBJECT_PARAMETERS = {
'CacheControl': 'max-age=86400',
}
AWS_LOCATION = 'your-spaces-files-folder'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'mysite/static'),
]
STATIC_URL = 'https://%s/%s/' % (AWS_S3_ENDPOINT_URL, AWS_LOCATION)
STATICFILES_STORAGE = 'storages.backends.s3boto3.S3Boto3Storage'
Notre fichier de paramètres est maintenant prêt à intégrer notre application Django au stockage d'objets.
[[step-6 -—- collect-static-files]] == Étape 6 - Collecte de fichiers statiques
Nous allons maintenant exécutercollectstatic
et vous remarquerez que les fichiers sont en cours de transfert, y compris l'image que nous avons enregistrée dans notre répertoire statique. Il sera transféré à l’emplacement Spaces que nous avons identifié dans le fichier de paramètres.
Pour ce faire, accédons à~/django-apps/mysite/
:
cd ~/django-apps/mysite
Dans le répertoire, exécutez la commande suivante:
python manage.py collectstatic
Vous verrez la sortie suivante et devriez répondre oui lorsque vous y êtes invité.
OutputYou have requested to collect static files at the destination
location as specified in your settings.
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel:
Ensuite, vous verrez une sortie supplémentaire vous indiquant que le fichier a été copié dans Spaces.
OutputCopying '/root/django-apps/mysite/mysite/static/css/app.css'
1 static file copied, 1 unmodified.
À ce stade, si vous revenez à votre compartiment à partir de votre compte DigitalOcean Cloud, vous verrez les répertoirescss
etimg
ajoutés au dossier vers lequel vous les avez pointés, avecapp.css
dans le le répertoirecss
et l'imageDO-Logo_icon_blue-.png
dans le répertoireimg
.
[[step-7 -—- test-the-application]] == Étape 7 - Test de l'application
Avec tout configuré et nos fichiers dans notre stockage d'objets, nous pouvons maintenant tester notre application en naviguant jusqu'à la page dans laquelle notre fichier statique est servi.
Premièrement, assurons-nous que notre pare-feu permettra au trafic de transiter par le port 8000 en lançant la commande suivante:
sudo ufw allow 8000
Nous pouvons maintenant exécuter notre serveur en consultant l’adresse IP de notre serveur et en utilisant le port 8000.
python manage.py runserver your-server-ip:8000
Dans un navigateur Web, accédez auxhttp://your-server-ip:8000
pour voir le résultat de l'application Django que vous avez créée. Vous verrez la sortie suivante dans votre navigateur:
Lorsque vous avez terminé de tester votre application, vous pouvez appuyer surCTRL
+C
pour arrêter la commanderunserver
. Cela vous ramènera à votre environnement de programmation.
Lorsque vous êtes prêt à quitter votre environnement Python, vous pouvez exécuter la commandedeactivate
:
deactivate
La désactivation de votre environnement de programmation vous ramènera à l'invite de commande du terminal.
Conclusion
Dans ce tutoriel, vous avez créé avec succès une application Django qui sert des fichiers à partir de DigitalOcean Spaces. Au cours du processus, vous avez appris à propos des fichiers statiques, de la gestion des fichiers statiques et de leur traitement à partir d’un service cloud.
Vous pouvez continuer à apprendre le développement Web avec Python et Django en lisant notre série de tutoriels surDjango Development.