ローカル Web 開発用の ngrok のセットアップ

ローカル Web 開発用の ngrok のセットアップ

場合によっては、コンピューターで実行されているローカル サーバーをインターネットに公開する必要があります。これは、Web アプリケーションをリモート サーバーにデプロイする前にテストする場合に役立ちます。

ローカル Web サーバーをインターネットに公開するための一般的なツールである ngrok の使用方法を確認します。

ローカル Web 開発に ngrok を使用する

ngrok は、2015 年以来、インターネット上でローカル Web サーバーを実行するためのトンネリング ソリューションです。

ngrok を使用すると、ローカル サーバーにマップされるパブリック URL を作成できるため、他のユーザーが世界中のどこからでも自分の作品に簡単にアクセスできるようになります。その後、さまざまなデバイスや Web ブラウザーからアプリケーションをテストし、ngrok の要求と応答のログを使用してトラブルシューティングを行うことができます。

公共のトンネルを扱う場合、セキュリティ上の懸念があるかもしれません。ngrok は SSL 暗号化による安全なトンネルをサポートしているため、機密データやアプリケーションに安全に使用できます。これらすべての機能により、ngrok は、個人的なプロジェクトに取り組んでいる開発者や他のユーザーと共同作業している開発者にとって価値があり、人気のあるツールになっています。

コンピューターに ngrok をインストールする

ngrok の主な機能を使い始めるのは完全に無料で、非常に簡単です。より多くの機能を提供する ngrok の有料版がありますが。コンピューターに ngrok をインストールしてセットアップする方法を学びましょう。

コンピューターに ngrok をインストールするには、公式のngrok ダウンロード ページにアクセスしてください。

ダウンロード オプションを含む ngrok のダウンロード Web ページのスクリーンショット

次に、ZIP ファイルをダウンロードして解凍するか、Chocolatey や Homebrew などのパッケージ マネージャーを使用してインストールすることにより、特定の OS (オペレーティング システム) 用の ngrok をダウンロードする必要があります。

Windows および macOS で Chocolatey または Homebrew を使用して ngrok をインストールするには、いずれかのパッケージ マネージャーがインストールされている必要があります。

Chocolatey を Windows にインストールするには、Windows PowerShell 管理者内で次のコマンドを実行します。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

macOS に Homebrew をインストールするには、ターミナルで次のコマンドを実行します。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

これで、適切なパッケージ マネージャーが用意されました。いずれかを使用してコンピューターに ngrok をインストールできます。

アカウントで新しいローカル ngrok トンネルを作成する

ngrok トンネルを作成してローカル サーバーを公開するには、ngrok アカウントにサインアップして認証トークンを作成する必要があります。

ステップ 1: サインアップ

ngrokのサインアップ ページに移動し、フォームに必要な詳細を入力して、[サインアップ] をクリックします。

サインアップ フォームを含む ngrok サインアップ Web ページのスクリーンショット

ステップ 2: トークンを構成に追加する

これでアカウントが作成されました。自動生成された認証トークンをngrok.yml 構成ファイルに追加する必要があります。このトークンはアカウントに固有であるため、安全に保管する必要があります。認証トークンを追加するには、サイド ナビゲーション バーの [認証トークン] ページに移動します。

ngrok Web サイト認証トークン Web ページのスクリーンショット

認証トークンをコピーし、ターミナルでデモのコマンドを実行して構成ファイルを設定できます。

ngrok config add-authtoken YOUR_AUTH_TOKEN

ステップ 3: ngrok を実行する

前の手順を完了すると、ngrok トンネルを作成してサーバーを実行できます。

これを行うには、優先ポート番号を指定して次のコマンドを実行します。

例えば:

ngrok http 3000

これで、コンピューターでローカル ngrok トンネルが実行されました。

一般的なセットアップの問題の処理

  • ファイアウォールの制限: コンピューターがファイアウォールの背後にある場合、ngrok がインターネットに接続できるように設定を調整する必要がある場合があります。
  • 認証トークンが正しくない: ngrok の起動時に間違った認証トークンを入力すると、トークンが無効であることを示すエラー メッセージが表示される場合があります。[認証トークンのリセット] ボタンをクリックして、トークンを確認するか、Web サイトでトークンをリセットします。
    authtoken のリセット ボタンが表示された ngrok auth トークン Web ページのスクリーンショット
  • 許可が拒否されました: ngrok の起動時に「許可が拒否されました」というエラーが表示された場合は、管理者として、または昇格された特権で ngrok コマンドを実行する必要がある場合があります。

ローカル Web 開発に ngrok を使用する利点

個人的なプロジェクトに取り組んでいる場合でも、チームと共同作業している場合でも、ngrok は Web 開発ツールキットで価値があります。さまざまなプラットフォームおよびプログラミング言語との互換性により、Web アプリケーションのテスト、コラボレーション、またはクライアントへのプロジェクトのデモに適しています。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です