テクノロジー 開発 非公開: Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Django デモ アプリをインターネットに公開する方法を学びましょう。つまり、ホスティング サービスにデプロイする必要はありません。

Django アプリのデモを表示するためだけにステージング デプロイメント環境を構成するのはひどいことです。さらに、クライアントやチームメイトに URL を表示するために数分間だけ URL が必要な場合はさらに便利です。

最善の選択肢は、ツールを使用して現在のローカル サーバーを公開することです。その通り!世界中の人々がローカルホストで何が起こっているかを見ることができるようになります。

この目的のために、 Ngrok を 使用します。このツールを使用すると、コンピューターのローカル ポートに基づいてパブリック URL を作成できます。これはすべて、 とんねるず の魔法のおかげです。

このチュートリアルで作業したすべてのコードは、開始する前にこの Github リポジトリ で利用可能になります。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

事前要件

  • システムに Python 3.6 以降がインストールされていること
  • コマンドラインインターフェイスに関する少しの経験
  • Django の基礎知識
  • Django-admin スクリプトと manage.py スクリプトについての理解

これらの基本的なことをすべて知っておくことをお勧めします。おそらく、このチュートリアルに従うだけで問題なく進めることができます。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Django アプリの作成

段階的なチュートリアルを作成するために、Django プロジェクトを作成するプロセスを説明します。すでにお持ちの場合は、このセクションをスキップしてください。

仮想環境

まずは Pythonの仮想環境 を作成しましょう。

  • したがって、システムターミナル (またはシェル) を開きます。
  • システムターミナルを開くのが複雑すぎる場合は、コードエディタの組み込みターミナルを使用してみてください。
  • [ターミナル] > [新しいターミナル] をクリックすると、画面の下部にシェルが表示されます。
  • 次のコマンドを入力して、組み込みの Python ツールを使用して仮想環境を作成します。
 python -m venv .venv

基本的には次のことを意味します。

Python さん、 .venv という名前で仮想環境 (-m venv) コマンドを作成してください

  • 現在のディレクトリのファイルを一覧表示すると、 .venv フォルダーが表示されるはずです。
 $ ls -l
drwxr-xr-x    - daniel 30 abr 23:12 .venv
# Other files ...
  • 仮想環境をアクティブ化するには、 source コマンドを呼び出します。
 source .venv/bin/activate
プラットホーム シェル 仮想環境を起動するコマンド
POSIX bash/zsh $ ソース <venv>/bin/activate
$ ソース <venv>/bin/activate.fish
csh/tcsh $ ソース <venv>/bin/activate.csh
PowerShell コア $ <venv>/bin/Activate.ps1
ウィンドウズ cmd.exe C:\> <venv>\Scripts\activate.bat
パワーシェル PS C:\> <venv>\Scripts\Activate.ps1

正しいコマンドを実行すると、シェルには仮想環境の名前が含まれるはずです。

 $ source .venv/bin/activate.fish

(.venv) $ 

ジャンゴをインストールする

仮想環境をアクティブ化すると、必要な Django バージョンをインストールできるようになります。この場合、最新のものをインストールすることをお勧めします。

 $ 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

次に、公開する Django アプリの基本的なプロジェクト構造を作成します。

 $ django-admin startproject mytestingproject

これにより、 mytestingproject という名前の Django プロジェクトが作成されます。作成後、プロジェクト構造が配置されているディレクトリに入る必要があります。それでは、 cd でアクセスして Django サーバーを実行しましょう。

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

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

これで、Django サーバーを実行して、どのように表示されるかを確認してみましょう。

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

基本的に、Django は、ローカル サーバーがローカルホスト (127.0.0.1 が常にそれを指している) でデフォルト ポート 8000 で実行されていることを伝えます。

エラー メッセージについては心配する必要はありません。まず、ローカルサーバーですべてが正常に動作していることを確認しましょう。これを行うには、Web ブラウザに移動して、次の指示を貼り付けます。

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

すべてが正常に動作している場合は、Django の美しいテンプレートが表示されるはずです。

Django のインストールについては以上です。

それでは、この Django プロジェクトを公開してみましょう。より複雑なプロジェクトに取り組んでいる場合は、Django アプリを公開する次の方法も機能します。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Ngrok を使用して Django アプリを公開する

前に述べたように、Ngrok はローカル サーバーをインターネット上に配置できるツールの 1 つです。まずは公式サイトから Ngrokをダウンロードします

インストールしたら、必要なコマンドを実行してみましょう。

Django サーバーが現在実行しているターミナルを維持したまま別のシェルを開き、次のように入力します。

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

More commands ....

これにより、Ngrok が提供する使用可能なコマンドがすぐに確認でき、インストール プロセスが正しく行われたことも確認できます。

サーバーにアクセスできる URL を作成するために、実行してみましょう。

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

http 引数を実行して、ローカルホストのポート 8000 に接続する URL を作成します。

おそらく得られる結果は次のとおりです。

 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       

書かれているように、Ngrok はその奇妙で醜い URL を localhost に転送しています。しかし、Ngrok が提供した URL をブラウザにアクセスすると、魔法が起こります。

エラーページ。
エラーページ。
エラーページ。

設定を変更する.py

うわー、何が起こったのですか😱?

DisallowedHost 設定が原因で Django がエラーをスローしているようです。 Django サーバーを実行しているシェルと、Ngrok セッションを使用しているシェルを確認すると、いくつかのデバッグ メッセージが表示されます。

 # 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                           
                                              

Django が言っているように、接続しているドメインを ALLOWED_HOSTS 構成変数に追加する必要があります。しかし、問題があります。それは、ドメイン名が大きすぎてわかりにくいことです。

このエラーを解決するために、Django の設定を少し変更してみましょう。プロジェクト フォルダーにある settings.py ファイルを開きます。

 # mytestingproject/settings.py

# Line 28

# Change from
ALLOWED_HOSTS = []

# To

ALLOWED_HOSTS = ["*"]

正規表現を知っていれば、すべてのホストが許可されるワイルドカードを設定していることが理解できるでしょう。

次に、サイトをリロードして、結果を確認します。

作業ページ
作業ページ
作業ページ

現在はすべてが完璧に機能しています。そして、プロジェクト用のアプリケーションの作成を開始し、URL とビューを設定すると、すべてがそのパブリック URL に反映されます。

注: 本番環境では ALLOWED_HOSTS を変更することを忘れないでください。これにより、大きなセキュリティ ホールが発生する可能性があります。

結論

このチュートリアルでは、Django プロジェクトをデプロイすることなく、デモ URL を作成する方法を学習しました。

Django プロジェクトを開始し、Django で settings.py ファイルを操作する方法を練習しました。

最後に、Ngrok の使用方法と、Ngrok を使用してローカル サーバーを公開する方法を学びました。

次に、API を構築するための人気のある Python フレームワークのいくつかを調べます。

「 Ngrok を使用して Django デモ アプリをインターネットに公開する方法」についてわかりやすく解説!絶対に観るべきベスト2動画

How to make Django Website Live using NGRok | FREE
Ngrok: Localhost をインターネット経由で利用できるようにする ||どこからでも localhost にアクセス

Django デモ アプリをインターネットに公開する方法を学びましょう。つまり、ホスティング サービスにデプロイする必要はありません。

Django アプリのデモを表示するためだけにステージング デプロイメント環境を構成するのはひどいことです。さらに、クライアントやチームメイトに URL を表示するために数分間だけ URL が必要な場合はさらに便利です。

最善の選択肢は、ツールを使用して現在のローカル サーバーを公開することです。その通り!世界中の人々がローカルホストで何が起こっているかを見ることができるようになります。

この目的のために、 Ngrok を 使用します。このツールを使用すると、コンピューターのローカル ポートに基づいてパブリック URL を作成できます。これはすべて、 とんねるず の魔法のおかげです。

このチュートリアルで作業したすべてのコードは、開始する前にこの Github リポジトリ で利用可能になります。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

事前要件

  • システムに Python 3.6 以降がインストールされていること
  • コマンドラインインターフェイスに関する少しの経験
  • Django の基礎知識
  • Django-admin スクリプトと manage.py スクリプトについての理解

これらの基本的なことをすべて知っておくことをお勧めします。おそらく、このチュートリアルに従うだけで問題なく進めることができます。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Django アプリの作成

段階的なチュートリアルを作成するために、Django プロジェクトを作成するプロセスを説明します。すでにお持ちの場合は、このセクションをスキップしてください。

仮想環境

まずは Pythonの仮想環境 を作成しましょう。

  • したがって、システムターミナル (またはシェル) を開きます。
  • システムターミナルを開くのが複雑すぎる場合は、コードエディタの組み込みターミナルを使用してみてください。
  • [ターミナル] > [新しいターミナル] をクリックすると、画面の下部にシェルが表示されます。
  • 次のコマンドを入力して、組み込みの Python ツールを使用して仮想環境を作成します。
 python -m venv .venv

基本的には次のことを意味します。

Python さん、 .venv という名前で仮想環境 (-m venv) コマンドを作成してください

  • 現在のディレクトリのファイルを一覧表示すると、 .venv フォルダーが表示されるはずです。
 $ ls -l
drwxr-xr-x    - daniel 30 abr 23:12 .venv
# Other files ...
  • 仮想環境をアクティブ化するには、 source コマンドを呼び出します。
 source .venv/bin/activate
プラットホーム シェル 仮想環境を起動するコマンド
POSIX bash/zsh $ ソース <venv>/bin/activate
$ ソース <venv>/bin/activate.fish
csh/tcsh $ ソース <venv>/bin/activate.csh
PowerShell コア $ <venv>/bin/Activate.ps1
ウィンドウズ cmd.exe C:\> <venv>\Scripts\activate.bat
パワーシェル PS C:\> <venv>\Scripts\Activate.ps1

正しいコマンドを実行すると、シェルには仮想環境の名前が含まれるはずです。

 $ source .venv/bin/activate.fish

(.venv) $ 

ジャンゴをインストールする

仮想環境をアクティブ化すると、必要な Django バージョンをインストールできるようになります。この場合、最新のものをインストールすることをお勧めします。

 $ 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

次に、公開する Django アプリの基本的なプロジェクト構造を作成します。

 $ django-admin startproject mytestingproject

これにより、 mytestingproject という名前の Django プロジェクトが作成されます。作成後、プロジェクト構造が配置されているディレクトリに入る必要があります。それでは、 cd でアクセスして Django サーバーを実行しましょう。

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

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

これで、Django サーバーを実行して、どのように表示されるかを確認してみましょう。

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

基本的に、Django は、ローカル サーバーがローカルホスト (127.0.0.1 が常にそれを指している) でデフォルト ポート 8000 で実行されていることを伝えます。

エラー メッセージについては心配する必要はありません。まず、ローカルサーバーですべてが正常に動作していることを確認しましょう。これを行うには、Web ブラウザに移動して、次の指示を貼り付けます。

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

すべてが正常に動作している場合は、Django の美しいテンプレートが表示されるはずです。

Django のインストールについては以上です。

それでは、この Django プロジェクトを公開してみましょう。より複雑なプロジェクトに取り組んでいる場合は、Django アプリを公開する次の方法も機能します。

Ngrok を使用して Django デモ アプリをインターネットに公開する方法
Ngrok を使用して Django デモ アプリをインターネットに公開する方法

Ngrok を使用して Django アプリを公開する

前に述べたように、Ngrok はローカル サーバーをインターネット上に配置できるツールの 1 つです。まずは公式サイトから Ngrokをダウンロードします

インストールしたら、必要なコマンドを実行してみましょう。

Django サーバーが現在実行しているターミナルを維持したまま別のシェルを開き、次のように入力します。

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

More commands ....

これにより、Ngrok が提供する使用可能なコマンドがすぐに確認でき、インストール プロセスが正しく行われたことも確認できます。

サーバーにアクセスできる URL を作成するために、実行してみましょう。

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

http 引数を実行して、ローカルホストのポート 8000 に接続する URL を作成します。

おそらく得られる結果は次のとおりです。

 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       

書かれているように、Ngrok はその奇妙で醜い URL を localhost に転送しています。しかし、Ngrok が提供した URL をブラウザにアクセスすると、魔法が起こります。

エラーページ。
エラーページ。
エラーページ。

設定を変更する.py

うわー、何が起こったのですか😱?

DisallowedHost 設定が原因で Django がエラーをスローしているようです。 Django サーバーを実行しているシェルと、Ngrok セッションを使用しているシェルを確認すると、いくつかのデバッグ メッセージが表示されます。

 # 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                           
                                              

Django が言っているように、接続しているドメインを ALLOWED_HOSTS 構成変数に追加する必要があります。しかし、問題があります。それは、ドメイン名が大きすぎてわかりにくいことです。

このエラーを解決するために、Django の設定を少し変更してみましょう。プロジェクト フォルダーにある settings.py ファイルを開きます。

 # mytestingproject/settings.py

# Line 28

# Change from
ALLOWED_HOSTS = []

# To

ALLOWED_HOSTS = ["*"]

正規表現を知っていれば、すべてのホストが許可されるワイルドカードを設定していることが理解できるでしょう。

次に、サイトをリロードして、結果を確認します。

作業ページ
作業ページ
作業ページ

現在はすべてが完璧に機能しています。そして、プロジェクト用のアプリケーションの作成を開始し、URL とビューを設定すると、すべてがそのパブリック URL に反映されます。

注: 本番環境では ALLOWED_HOSTS を変更することを忘れないでください。これにより、大きなセキュリティ ホールが発生する可能性があります。

結論

このチュートリアルでは、Django プロジェクトをデプロイすることなく、デモ URL を作成する方法を学習しました。

Django プロジェクトを開始し、Django で settings.py ファイルを操作する方法を練習しました。

最後に、Ngrok の使用方法と、Ngrok を使用してローカル サーバーを公開する方法を学びました。

次に、API を構築するための人気のある Python フレームワークのいくつかを調べます。

「 Ngrok を使用して Django デモ アプリをインターネットに公開する方法」についてわかりやすく解説!絶対に観るべきベスト2動画

How to make Django Website Live using NGRok | FREE
Ngrok: Localhost をインターネット経由で利用できるようにする ||どこからでも localhost にアクセス