2022-11-20 14:42 Temps de lecture : 12 min

Comment exposer une application de démonstration Django à Internet avec Ngrok ?

Partager votre application Django en ligne sans hébergement

Découvrons comment rendre accessible une application Django de démonstration sur Internet, sans pour autant la déployer sur un service d'hébergement.

Il est fastidieux de mettre en place un environnement de déploiement temporaire juste pour montrer une démo de votre application Django. C'est encore pire si vous avez seulement besoin d'une URL pendant quelques instants, pour la présenter à un client ou à un collaborateur.

La meilleure solution consiste à utiliser un outil permettant d'exposer votre serveur local actuel. Et oui, grâce à cela, des personnes du monde entier pourront voir ce qui se passe sur votre machine !

Pour réaliser cela, nous utiliserons Ngrok. Cet outil nous permettra de générer des URLs publiques basées sur les ports locaux de vos ordinateurs, le tout grâce à la technique des tunnels.

Le code source utilisé dans ce tutoriel sera disponible dans ce référentiel GitHub.

Prérequis

Il est recommandé d'avoir des connaissances de base en développement web. Toutefois, il est fort probable que vous puissiez suivre ce tutoriel sans trop de difficultés.

Création d'une application Django

Pour proposer un tutoriel étape par étape, je vais vous guider à travers la création d'un projet Django. Si vous en possédez déjà un, vous pouvez ignorer cette section.

Environnement virtuel

Tout d'abord, mettons en place un environnement virtuel Python.

  • Ouvrez votre terminal système (ou shell).
  • Si ouvrir votre terminal vous semble compliqué, utilisez le terminal intégré de votre éditeur de code.
  • Cliquez sur Terminal > Nouveau Terminal, et un shell devrait apparaître en bas de votre écran.
  • Tapez la commande suivante pour créer un environnement virtuel à l'aide de l'outil intégré de Python.
python -m venv .venv

Cette commande signifie :

"Hey Python, crée un environnement virtuel (-m venv) nommé .venv"

  • Maintenant, si vous listez les fichiers de votre répertoire actuel, vous devriez voir un dossier .venv.
$ ls -l
drwxr-xr-x    - daniel 30 abr 23:12 .venv
# Autres fichiers ...
  • Pour activer l'environnement virtuel, nous utilisons la commande source.
source .venv/bin/activate

Plateforme
Shell
Commande pour activer l'environnement virtuel
POSIX
bash/zsh
$ source /bin/activate

fish
$ source /bin/activate.fish

csh/tcsh
$ source /bin/activate.csh

PowerShell Core
$ /bin/Activate.ps1
Windows
cmd.exe
C:> Scriptsactivate.bat

PowerShell
PS C:> ScriptsActivate.ps1

Une fois la bonne commande exécutée, le nom de l'environnement virtuel devrait apparaître dans votre shell.

$ source .venv/bin/activate.fish

(.venv) $

Installation de Django

Après avoir activé votre environnement virtuel, vous pouvez installer la version de Django de votre choix. Il est généralement conseillé d'installer la dernière version stable.

$ pip install django
Collecting django
  Using cached Django-3.2-py3-none-any.whl (7.9 MB)
Collecting pytz
  Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB)
Collecting asgiref<4,>=3.3.2
  Using cached asgiref-3.3.4-py3-none-any.whl (22 kB)
Collecting sqlparse>=0.2.2
  Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB)
Installing collected packages: pytz, asgiref, sqlparse, django
Successfully installed asgiref-3.3.4 django-3.2 pytz-2021.1 sqlparse-0.4.1

Il est temps de créer la structure de base de projet de votre application Django.

$ django-admin startproject mytestingproject

Cette commande créera un projet Django nommé 'mytestingproject'. Une fois créé, entrez dans le répertoire où se trouve la structure du projet. Ensuite, lançons le serveur Django.

# Entrer dans le répertoire du projet
(.venv)$ cd mytestingproject/

# Lister les fichiers à l'intérieur du projet
(.venv) $ ls
mytestingproject  manage.py 

Maintenant que vous y êtes, lançons le serveur Django pour voir à quoi il ressemble.

 (.venv) $python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
May 01, 2021 - 04:34:25
Django version 3.2, using settings 'mytestingproject.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

En résumé, Django nous informe qu'un serveur local fonctionne sur votre localhost (127.0.0.1 y pointe toujours), sur le port par défaut 8000.

Ne vous inquiétez pas du message d'erreur. Avant tout, vérifions que tout fonctionne correctement sur votre serveur local. Pour cela, ouvrez votre navigateur web et collez cette adresse :

http://localhost:8000/
# Notez que localhost et 127.0.0.1 sont identiques ?

Si tout fonctionne comme prévu, vous devriez voir un modèle de base Django.

Voilà pour l'installation de Django.

Passons à présent à l'exposition de ce projet Django. Si vous travaillez sur un projet plus complexe, les méthodes suivantes fonctionneront également.

Exposer une application Django avec Ngrok

Comme je l'ai mentionné précédemment, Ngrok est l'un des outils qui nous permettront de rendre notre serveur local accessible sur Internet. Par conséquent, commençons par télécharger Ngrok à partir du site officiel.

Une fois installé, passons aux commandes nécessaires.

Ouvrez un autre shell, tout en laissant tourner le terminal où votre serveur Django s'exécute, et tapez :

$  ngrok help
NAME:
   ngrok - tunnel local ports to public URLs and inspect traffic

More commands ....

Cela vous donnera un aperçu des commandes disponibles et confirmera que l'installation s'est correctement déroulée.

Pour générer une URL où les utilisateurs pourront accéder à votre serveur, exécutez la commande suivante :

    $ ngrok http 8000 
# URL publique sécurisée pour le serveur web du port 8000

L'argument 'http' indique que nous souhaitons créer une URL qui se connectera au port 8000 de votre localhost.

Voici le résultat que vous devriez obtenir :

ngrok by @inconshreveable                                                                      (Ctrl+C to quit)

Session Status                online
Session Expires               1 hour, 59 minutes
Update                        update available (version 2.3.39, Ctrl-U to update)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://cac2165aa7f8.ngrok.io -> http://localhost:8000
Forwarding                    https://cac2165aa7f8.ngrok.io -> http://localhost:8000

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Comme indiqué, Ngrok transmet une URL un peu étrange à votre hôte local. La magie opère quand vous cliquez sur l'URL fournie par Ngrok dans votre navigateur web.

Modification de settings.py

Oups, que s'est-il passé 😱 ?

Il semblerait que Django génère une erreur due à un paramètre "DisallowedHost". Si vous vérifiez le shell où vous exécutez le serveur Django et celui avec la session Ngrok, vous verrez des messages de débogage.

# Messages de Django
Invalid HTTP_HOST header: 'cac2165aa7f8.ngrok.io'. You may need to add 'cac2165aa7f8.ngrok.io' to ALLOWED_HOSTS.
Bad Request: /
[01/May/2021 05:07:46] "GET / HTTP/1.1" 400 65196
Invalid HTTP_HOST header: 'cac2165aa7f8.ngrok.io'. You may need to add 'cac2165aa7f8.ngrok.io' to ALLOWED_HOSTS.

# Messages de Ngrok
HTTP Requests
-------------

GET /favicon.ico               400 Bad Request
GET /                          400 Bad Request

Comme le précise Django, nous devons ajouter le domaine auquel nous nous connectons à la variable de configuration `ALLOWED_HOSTS`. Toutefois, le nom de domaine est un peu long et complexe.

Afin de résoudre cette erreur, modifions légèrement les paramètres de Django. Ouvrez le fichier `settings.py` situé dans le dossier du projet.

# mytestingproject/settings.py

# Ligne 28

# Remplacer
ALLOWED_HOSTS = []

# Par
ALLOWED_HOSTS = ["*"]

Si vous connaissez les expressions régulières, vous comprendrez que nous utilisons un caractère générique, autorisant ainsi tous les hôtes.

Rechargez maintenant la page et observez le résultat.

Tout fonctionne parfaitement ! Et si vous commencez à développer des applications pour le projet, et à définir des URLs et des vues, tout cela sera visible via cette URL publique.

Important : N'oubliez pas de modifier `ALLOWED_HOSTS` en production, car cela créerait une importante faille de sécurité.

Conclusion

Dans ce tutoriel, vous avez appris à créer une URL de démonstration pour votre projet Django, sans avoir à le déployer.

Vous avez vu comment démarrer un projet Django et comment modifier le fichier `settings.py`.

Enfin, vous avez appris à utiliser Ngrok pour rendre accessible n'importe quel serveur local.

Poursuivez votre apprentissage en explorant des frameworks Python populaires pour la création d'APIs.

Auteur
France

Rédacteur tech, guides pratiques et astuces numériques.