Ngrokを使用してWebプロジェクトのプレビューを共有するみんなに!

状況
だから、あなたは非常にクールなウェブサイトを構築しますが、唯一の問題は、それはあなたのローカルWebサーバー、またはlocalhost . ドメインを購入し、簡単なWebサーバーを設定し、SSL証明書を取得し、コードの設定方法を理解できます.しかし、もしあなたがちょうどあなたのウェブサイトの迅速なプレビューを友人に共有したり、モバイルデバイス上で、それをテストしたり、展開することなく何か?
それはトンネルが来るところです!トンネルは、あなたの間の安全な、しかし、一時的な接続をセットすることができますlocalhost そして、インターネット.このポストでは、あなたのウェブプロジェクトのプレビューをngrokを使用して皆に共有する方法を示します!

始める

Note: In here I am assuming you are using Linux or MacOS. If you use Windows or another OS, then this tutorial is maybe not for you.

インストール
まず、ngrokアカウントを作成する必要があります.これを使ってサインアップできますlink , またはngrok.com , をクリックしてGet Started For Free .
サインアップした後、次のようなダッシュボードがあるはずです.

さて、Download for Linux , zipファイルをインストールする必要があります.
デフォルトに移動Download そして、zipファイルを解凍しますunzip .
解凍した後、実行可能ファイルをngrok . この実行可能ファイルを実行するには、次のように表示します.

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

DESCRIPTION:
    ngrok exposes local networked services behinds NATs and firewalls to the
    public internet over a secure tunnel. Share local websites, build/test
    webhook consumers and self-host personal services.
    Detailed help for each command is available with 'ngrok help <command>'.
    Open http://localhost:4040 for ngrok's web interface to inspect traffic.

[bla bla bla ...]

これはngrokをインストールしたことを意味します.

ngrokエージェントを認証する
さて、私たちがインストールしたNGRKエージェントを認証する必要があります.
タブで、タブでGetting Started , クリックYour Authtoken . これをクリックすると、次のようになります.

さて、クリックCopy AuthTokenをコピーして、これを認証するために端末に入力します.

./ngrok authtoken <YOUR_AUTHTOKEN>

その後、ngrok 出力は以下のようになります:

Authtoken saved to configuration file: path/to/ngrok/config/file/ngrok.yml

これは、我々が我々を認証したことを意味しますngrok エージェント.

火をつける
さて、我々はngrokを設定して、それを起動しましょう!
我々がそれに入る前に、我々は固まりますngrok 我々の中で$PATH 都合よく走るngrok 我々のシェルの至る所で、経路を覚えていなければならないことなく.
これは使用しているシェルによって異なります.On fish (私が現在使っているシェル)ngrok インマイ$PATH このように.config/fish/config.fish :

export PATH="/path/to/ngrok/:$PATH"

それから、あなたの端末を再起動してくださいngrok 使用ngrok シェルでコマンド.
今、我々は使用を開始しますNgrok 我々のウェブプロジェクトで.このチュートリアルの目的では、簡単なWebサーバーを使用してBottle Framework .
最初にcd Webプロジェクトに

cd /path/to/your/project

次に、ローカルWebサーバーを起動します.これはあなたのプロジェクト次第です.私のプロジェクトのために、私は私のプロジェクトのために一つのファイルだけを使うのでmain.py ), このようなプロジェクトのローカルWebサーバーを起動できます.

π python3 main.py
Bottle v0.12.19 server starting up (using WSGIRefServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.

Webサーバーを起動したら、別の端末とタイプを開きます

π ngrok http <PORT>

With <PORT> ローカルWebサーバのポートです.私の場合は8080 , そこで端末に入力します.

π ngrok http 8080

Enterキーを押すと、次のようなインターフェイスが表示されます.

ngrok by @inconshreveable                                                                                                                                (Ctrl+C to quit)

Session Status                online
Account                       Wumi4 (Plan: Free)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080
Forwarding                    https://b0be-2001-ee0-4bab-5020-5343-d3ed-89bc-e519.ngrok.io -> http://localhost:8080

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

ご覧の通り、2つの異なるリンクがありますForwarding 一部はhttp そして一つはhttps . これらのリンクのいずれかをクリックしてあなたのウェブサイトにつながるでしょう.

終わり
そうですね.NGRKを使用して、誰にでもプレビューとしてそれを共有するために使用できる一時的なリンクを設定する方法を学びました!
私はこのチュートリアルをお楽しみください!これは7月からの私の最初のブログ記事です.
を、それはすべてのです!さようなら!😄