Zenn
😽

ngrokを使ってローカル環境を公開する方法

に公開
開発環境
webアプリ
tech

こんにちは！今回はローカル環境を簡単に外部公開できる「ngrok」について解説します。開発中のウェブアプリをクライアントにデモしたい、webhookのテストをしたい、といった場面で非常に便利なツールです。

ngrokとは？

ngrokは、ローカル環境で動作しているサーバーを一時的にインターネット上に公開するためのツールです。複雑なネットワーク設定やファイアウォールの設定変更なしに、ローカルサーバーに外部からアクセスできるようにしてくれます。

簡単に言うと、「localhost:3000」などでアクセスできるローカルサーバーに対して、「https://1a2b3c4d.ngrok.io」のようなパブリックURLを割り当て、外部からアクセス可能にするサービスです。

インストール方法

ngrokのインストールは非常に簡単です。主なインストール方法を紹介します。

1. 公式サイトからのダウンロード

  1. ngrokの公式サイトにアクセスし、アカウントを作成
  2. ダウンロードページからお使いのOSに合ったバージョンをダウンロード&インストール
  3. インストール方法を選択し、インストールする。

例)

初期設定

インストール後、ngrokのアカウントと連携するためのセットアップが必要です。

  1. ngrokのダッシュボードにログイン
  2. 「Your Authtoken」セクションからAuthトークンを取得
  3. 以下のコマンドでAuthトークンを設定
ngrok config add-authtoken YOUR_AUTH_TOKEN

基本的な使い方

HTTPサーバーの公開

ローカルで動作しているウェブサーバー（例：ポート3000）を公開するには：

ngrok http 3000

実行すると、以下のような出力が表示されます：

Session Status                online
Account                       yourname@example.com (Plan: Free)
Version                       3.3.1
Region                        United States (us)
Latency                       23ms
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://a1b2c3d4.ngrok.io -> http://localhost:3000

これで https://a1b2c3d4.ngrok.io というURLでローカルのサーバーにアクセスできるようになります。

その他のプロトコル

ngrokは他のプロトコルにも対応しています：

TCPの公開:

ngrok tcp 22

UDPの公開:

ngrok udp 53

より詳細な設定

設定ファイルを使用して、より複雑な設定ができます。~/.ngrok2/ngrok.ymlを作成または編集：

authtoken: YOUR_AUTH_TOKEN
tunnels:
  webapp:
    proto: http
    addr: 8080
    subdomain: myapp
  websocket:
    proto: http
    addr: 8000
    bind_tls: true

この設定を読み込むには：

ngrok start --all

または特定のトンネル名を指定：

ngrok start webapp

ngrokのメリット

  1. 簡単なセットアップ: インストールと設定が非常に簡単で、数分でローカル環境を公開できます。

  2. 一時的なパブリックURL: 開発中のアプリケーションを簡単に共有できます。

  3. HTTPSサポート: 自動的にHTTPS対応のURLが生成されるため、セキュアな接続のテストが可能です。

  4. Webhookのテストが容易: GitHub、Stripe、PayPalなどのWebhookをローカル環境で簡単にテストできます。

  5. リクエストの検査: 組み込みのWeb UIで全てのリクエストとレスポンスを確認できます（http://localhost:4040にアクセス）。

  6. マルチプラットフォーム対応: Windows、macOS、Linuxなど、主要なOSで利用可能です。

  7. 複数のプロトコルをサポート: HTTP、TCP、TLS、UDPなど、様々なプロトコルに対応しています。

ngrokのデメリット・制限事項

  1. 無料プランの制限:

    • セッション時間が制限されている（定期的に再起動が必要）
    • ランダムなサブドメイン名が割り当てられる（固定サブドメインは有料プラン）
    • 同時接続数に制限がある

  2. セキュリティリスク:

    • 公開したサーバーに誰でもアクセスできるため、認証機能が必須
    • 機密データを扱う場合は注意が必要

  3. パフォーマンス:

    • プロキシを経由するため、若干のレイテンシが発生
    • 大規模なトラフィックには不向き

  4. 安定性:

    • インターネット接続に依存するため、接続が不安定な場合はサービスも不安定に

  5. 有料プランが必要な機能:

    • カスタムドメイン
    • IP制限
    • 固定サブドメイン
    • 長時間稼働

主な利用シーン

  1. 開発中のWebアプリケーションの共有・デモ
  2. モバイルアプリなどからのAPIテスト
  3. Webhookの受信とデバッグ
  4. クロスデバイステスト（異なるデバイスからのアクセス）
  5. 一時的な環境での展示・プレゼンテーション

まとめ

ngrokは開発者にとって非常に便利なツールで、特にローカル環境のテストや共有が必要な場面で大活躍します。無料プランでも基本的な機能は十分に使えますが、本番環境や長期的な利用には向いていないことを理解しておくとよいでしょう。

特に、Webhookを利用するサービスの開発や、クライアントへのデモンストレーション、複数デバイスでのテストなど、ローカル環境を一時的に外部公開したいシチュエーションで非常に重宝するツールです。

ぜひ一度試してみてください！

この記事が役に立ったら、いいねやコメントをお願いします。質問があればコメント欄でお待ちしています。

Discussion