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

Apprenons à exposer une application de démonstration Django sur Internet. Cela, sans le déployer dans un service d’hébergement.

Configurer un environnement de déploiement intermédiaire juste pour montrer une démo de votre application Django est horrible. Encore plus, si vous n’avez besoin d’une URL que pendant quelques minutes, pour la montrer à un client ou à un coéquipier.

La meilleure option consiste à utiliser un outil pour exposer votre serveur local actuel. Exactement! Les gens du monde entier pourront voir ce qui se passe sur votre hôte local.

Pour cela, nous utiliserons Ngrok. Cet outil nous permettra de créer des URL publiques basées sur les ports locaux de nos ordinateurs. Tout cela grâce à la magie de Tunnels.

Avant de commencer tout le code travaillé sur ce tutoriel, sera disponible dans ce Référentiel Github.

Pré-requis

Il est recommandé de connaître toutes ces choses de base. Bien qu’il soit probable que vous puissiez suivre ce tutoriel, sans plus de problèmes.

Créer une application Django

Afin de créer un didacticiel pas à pas, je vais vous expliquer le processus de création d’un projet Django. Si vous en avez déjà un, vous pouvez ignorer cette section.

Environnement virtuel

Tout d’abord, créons un Environnement virtuel Python.

  • Ouvrez donc votre terminal système (ou shell).
  • Si vous trouvez trop compliqué d’ouvrir votre terminal système, essayez d’utiliser le terminal intégré de l’é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, avec l’outil Python intégré.
python -m venv .venv

Cela signifie essentiellement :

Hé Python, créez une commande d’environnement virtuel (-m venv) avec le nom de .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
# Other files ...
  • Pour activer l’environnement virtuel, nous appelons la commande source.
source .venv/bin/activate
  • Si vous rencontrez des problèmes, veuillez vous reporter au tableau suivant extrait du rapport officiel documentation python.

Plateforme
Coquille
Commande pour activer l’environnement virtuel
POSIX
bash/zsh
$source /bin/activate

poisson
$source /bin/activate.fish

csh/tcsh
$ source /bin/activate.csh

Noyau PowerShell
$ /bin/Activate.ps1
les fenêtres
cmd.exe
C :> Scriptsactivate.bat

PowerShell
PS C :> ScriptsActivate.ps1

Maintenant, si vous avez exécuté la bonne commande, votre shell devrait contenir le nom de l’environnement virtuel.

$ source .venv/bin/activate.fish

(.venv) $ 

Installer Django

Après avoir activé votre environnement virtuel, vous pouvez maintenant installer la version de Django que vous souhaitez. Dans ce cas, c’est un bon choix d’installer la dernière version.

$ 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 maintenant temps de créer la structure de projet de base de l’application Django que vous souhaitez exposer.

$ django-admin startproject mytestingproject

Cela créera un projet Django avec le nom de mytestingproject. Après l’avoir créé, nous voulons que vous souhaitiez entrer dans le répertoire où se trouve la structure du projet. Alors allons-y et lançons le serveur Django.

# Enter to the project directory
(.venv)$ cd mytestingproject/

# Listing the files inside the project
(.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 gros, Django nous dit qu’un serveur local s’exécute sur notre localhost (127.0.0.1 pointe toujours vers lui), sur le port par défaut, 8000.

Ne vous inquiétez pas du message d’erreur. Tout d’abord, vérifions que tout fonctionne correctement sur notre serveur local. Pour ce faire, accédez à votre navigateur Web et collez cette direction :

http://localhost:8000/
# Do you note that localhost and 127.0.0.1 are the same?

Si tout fonctionne bien, vous devriez voir un beau modèle Django.

C’est tout à propos de notre installation Django.

Passons maintenant à l’exposition de ce projet Django. Si vous travaillez sur un projet plus complexe, les méthodes suivantes d’exposition des applications Django fonctionneront également.

Exposer une application Django avec Ngrok

Comme je l’ai déjà dit, Ngrok est l’un des outils qui nous permettra d’installer notre serveur local sur Internet. Alors tout d’abord Télécharger Ngrok du site officiel.

Une fois que vous l’avez installé, procédons aux commandes nécessaires.

Ouvrez un autre shell, en gardant le terminal que votre serveur Django est en train d’exécuter, et tapez.

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

More commands ....

Cela vous donnera un aperçu rapide des commandes disponibles proposées par Ngrok et garantira également que le processus d’installation s’est déroulé correctement.

Afin de créer une URL où les gens peuvent accéder à notre serveur, exécutons.

    $ ngrok http 8000 
# secure public URL for port 8000 web server

Nous exécutons l’argument http, pour créer une URL qui se connectera au port 8000 de notre localhost.

Voici le résultat que vous obtiendrez probablement.

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 il est dit, Ngrok transmet cette URL étrange et laide à notre hôte local. Mais la magie opère lorsque vous cliquez sur le navigateur avec l’URL que Ngrok vous a donnée.

Modification de settings.py

Wow, que vient-il de se passer 😱 ?

Il semble que Django génère une erreur à cause d’un paramètre DisallowedHost. Si vous vérifiez le shell dans lequel vous exécutez le serveur Django et celui avec la session Ngrok, vous obtiendrez des messages de débogage.

# Django messages
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.

# Ngrok messages
HTTP Requests                                                            
-------------                                                            
                                                                         
GET /favicon.ico               400 Bad Request                           
GET /                          400 Bad Request                           
                                              

Comme Django nous le dit, nous devons ajouter le domaine que nous connectons à la variable de configuration ALLOWED_HOSTS. Mais nous avons un problème, et c’est que le nom de domaine est trop grand et déroutant.

Modifions donc un peu les paramètres de Django, pour résoudre cette erreur. Ouvrez le fichier settings.py situé dans le dossier du projet.

# mytestingproject/settings.py

# Line 28

# Change from
ALLOWED_HOSTS = []

# To

ALLOWED_HOSTS = ["*"]

Si vous connaissez des regex, vous pouvez comprendre que nous définissons un joker, où tous les hôtes seront autorisés.

Rechargez maintenant le site et voyez le résultat.

Tout fonctionne parfaitement maintenant ! Et si vous commencez à créer des applications pour le projet et à définir des URL et des vues, tout sera reflété sur cette URL publique.

Remarque : N’oubliez pas de modifier ALLOWED_HOSTS en production, car cela créerait une énorme faille de sécurité.

conclusion

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

Vous avez appris à démarrer un projet Django et à travailler avec le fichier settings.py dans Django.

Enfin, vous avez appris à utiliser Ngrok et à exposer n’importe quel serveur local avec.

Ensuite, explorez certains des frameworks Python populaires pour créer une API.