Come esporre un’app demo di Django su Internet con Ngrok?

Impariamo come esporre un’app demo Django a Internet. Quello, senza distribuirlo in un servizio di hosting.

Configurare un ambiente di distribuzione di staging solo per mostrare una demo della tua app Django è terribile. Ancora di più, se hai bisogno di un URL solo per un paio di minuti, per mostrarlo a un cliente o a un compagno di squadra.

L’opzione migliore è utilizzare uno strumento per esporre il tuo attuale server locale. Esattamente! Le persone di tutto il mondo potranno vedere cosa sta succedendo sul tuo localhost.

A tale scopo, useremo Ngrok. Questo strumento ci consentirà di creare URL pubblici basati sulle porte locali dei nostri computer. Tutto questo grazie alla magia di Tunnel.

Prima di iniziare tutto il codice lavorato su questo tutorial, sarà disponibile in questo Deposito Github.

Prerequisiti

Si consiglia di conoscere tutte queste cose di base. Anche se è probabile che tu possa seguire questo tutorial, senza ulteriori problemi.

Creazione di un’app Django

Per creare un tutorial passo dopo passo, spiegherò il processo di creazione di un progetto Django. Se ne hai già uno, puoi saltare questa sezione.

Ambiente virtuale

Prima di tutto, creiamo un Ambiente virtuale Python.

  • Quindi apri il tuo terminale di sistema (o shell).
  • Se trovi troppo complicato aprire il tuo terminale di sistema, prova a utilizzare il terminale integrato dell’editor di codice.
  • Fai clic su Terminale> Nuovo terminale e dovrebbe apparire una shell nella parte inferiore dello schermo.
  • Digita il seguente comando per creare un ambiente virtuale, con lo strumento Python integrato.
python -m venv .venv

Significa sostanzialmente:

Ehi Python, crea un comando di ambiente virtuale (-m venv) con il nome di .venv

  • Ora se elenchi i file della tua directory corrente, dovresti vedere una cartella .venv.
$ ls -l
drwxr-xr-x    - daniel 30 abr 23:12 .venv
# Other files ...
  • Per attivare l’ambiente virtuale, chiamiamo il comando source.
source .venv/bin/activate

piattaforma
Guscio
Comando per attivare l’ambiente virtuale
POSIX
bash/zsh
$ fonte /bin/activate

pesce
$ fonte /bin/activate.fish

csh/tcsh
$ fonte /bin/activate.csh

Nucleo di PowerShell
$ /bin/Activate.ps1
finestre
cmd.exe
C:> Scriptsactivate.bat

PowerShell
PS C:> ScriptsActivate.ps1

Ora, se hai eseguito il comando corretto, la tua shell dovrebbe contenere il nome dell’ambiente virtuale.

$ source .venv/bin/activate.fish

(.venv) $ 

Installa Django

Dopo aver attivato il tuo ambiente virtuale, ora puoi installare qualsiasi versione di Django desideri. In questo caso, è una buona scelta installare l’ultima versione.

$ 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

Ora è il momento di creare la struttura del progetto di base dell’app Django che desideri esporre.

$ django-admin startproject mytestingproject

Questo creerà un progetto Django con il nome di mytestingproject. Dopo averlo creato vogliamo che tu voglia entrare nella directory in cui si trova la struttura del progetto. Quindi inseriamoci dentro ed eseguiamo il server Django.

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

# Listing the files inside the project
(.venv) $ ls
mytestingproject  manage.py 

Ora che ci sei, eseguiamo il server Django per vedere come appare.

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

Fondamentalmente, Django ci sta dicendo che un server locale è in esecuzione sul nostro localhost (127.0.0.1 lo punta sempre), sulla porta predefinita, 8000.

Non preoccuparti del messaggio di errore. Innanzitutto, controlliamo che tutto funzioni correttamente sul nostro server locale. Per farlo, vai al tuo browser web e incolla questa direzione:

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

Se tutto funziona correttamente, dovresti vedere un bellissimo modello Django.

Questo è tutto sulla nostra installazione di Django.

Ora entriamo nell’esporre questo progetto Django. Se stai lavorando a un progetto più complesso, funzioneranno anche i seguenti metodi per esporre le app Django.

Esporre un’app Django con Ngrok

Come ho detto prima, Ngrok è uno degli strumenti che ci permetterà di far atterrare il nostro server locale su Internet. Quindi prima di tutto Scarica Ngrok dal sito ufficiale.

Una volta installato, procediamo con i comandi necessari.

Apri un’altra shell, mantenendo il terminale attualmente in esecuzione sul tuo server Django e digita.

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

More commands ....

Questo ti darà una rapida occhiata ai comandi disponibili offerti da Ngrok e garantirà anche che il processo di installazione sia andato a buon fine.

Per creare un URL in cui le persone possono accedere al nostro server, corriamo.

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

Stiamo eseguendo l’argomento http, per creare un URL che si collegherà alla porta 8000 del nostro localhost.

Ecco il risultato che probabilmente otterrai.

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       

Come si dice, Ngrok sta inoltrando quello strano e brutto URL al nostro localhost. Ma la magia accade quando colpisci il browser con l’URL che ti ha dato Ngrok.

Modificare settings.py

Wow, cosa è appena successo 😱?

Sembra che Django stia generando un errore a causa di un’impostazione DisallowedHost. Se controlli la shell in cui stai eseguendo il server Django e quella con la sessione Ngrok, riceverai alcuni messaggi di debug.

# 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                           
                                              

Come ci dice Django, dobbiamo aggiungere il dominio che stiamo connettendo alla variabile di configurazione ALLOWED_HOSTS. Ma abbiamo un problema, ed è che il nome di dominio è troppo grande e confuso.

Quindi cambiamo un po’ le impostazioni di Django, per risolvere questo errore. Apri il file settings.py che si trova nella cartella del progetto.

# mytestingproject/settings.py

# Line 28

# Change from
ALLOWED_HOSTS = []

# To

ALLOWED_HOSTS = ["*"]

Se conosci alcune espressioni regolari, puoi apprezzare che stiamo impostando un carattere jolly, in cui saranno consentiti tutti gli host.

Ora ricarica il sito e guarda il risultato.

Tutto funziona perfettamente ora! E se inizi a creare applicazioni per il progetto e a impostare URL e visualizzazioni, tutto si rifletterà su quell’URL pubblico.

Nota: non dimenticare di modificare ALLOWED_HOSTS in produzione, poiché produrrebbe un’enorme falla di sicurezza.

Conclusioni

In questo tutorial, hai imparato come creare un URL demo per il tuo progetto Django, senza la necessità di distribuirlo.

Ti sei esercitato su come avviare un progetto Django e lavorare con il file settings.py in Django.

Infine, hai imparato come utilizzare Ngrok e come esporre qualsiasi server locale con esso.

Successivamente, esplora alcuni dei popolari framework Python per creare API.