ServBayにおけるNgrokリバースプロキシサービス設定ガイド

Ngrokは、ローカルで稼働しているWebサービスを安全にパブリックインターネットへ公開できる強力なツールです。ServBayにNgrokを統合することで、ローカル開発サイトへ確実なパブリックアクセス用トンネルを簡単に作成でき、プロジェクトデモ、Webhookテスト、またはチーム外のメンバーと成果物を共有するのに最適です。本ガイドでは、ServBayでのNgrokリバースプロキシサービスの設定および利用手順を分かりやすく解説します。

概要

ServBayはNgrokへのネイティブサポートを提供しており、インストールや設定作業を大幅に簡素化します。ServBayのグラフィカルインターフェイスでNgrokトンネルを直感的に管理でき、ローカルでホストしている任意のWebサイトを一時的なパブリックURLへマッピング可能です。

利用シーン

• クライアント向けデモ: ローカル開発環境で動作中のWebサイトを顧客にリアルタイムで見せる際に活用できます。
• Webhook開発: 公開コールバックURLが必要なPayゲートウェイやAPIなど、サードパーティサービスのテストに最適です。
• モバイルアプリ検証: モバイルデバイスからパブリックURL経由でローカルバックエンドAPIへアクセスできます。
• 共同開発: チームメンバーと一時的にローカル開発環境を共有したい場合にも役立ちます。

前提条件

1. ServBayのインストール済み: macOS上にServBayがインストールされ、正常に動作していることを確認してください。
2. Ngrokアカウント: Ngrokアカウントの取得が必要です。Ngrok公式サイト で無料または有料プランを登録できます。
3. ローカルサイト: ServBay上で少なくとも1つのローカルサイトが追加・稼働中である必要があります（例： servbay.demo など）。

操作手順

1. ServBayでNgrokパッケージをインストール

初めてNgrokを利用する場合、まずServBay上でインストールを行います。

1. ServBayアプリを起動します。
2. 左側のナビゲーションバーから パッケージ (Packages) をクリック。
3. パッケージ一覧から Ngrok を検索または見つけます。
4. Ngrok の右側にあるインストールボタンをクリック。
5. インストール完了後、Ngrok の右の起動スイッチを試しに押します。まだ設定を行っていないため、サービスが失敗または異常な表示になる場合がありますが問題ありません。以降の手順で設定を完了させます。

2. Ngrok Authtokenの取得

NgrokはAuthtokenによってアカウント認証と利用許可を管理しています。

1. Ngrokダッシュボード にアクセスし、Ngrokアカウントでログインします。

2. ログイン後、左ナビゲーションの Your Authtoken（"Getting Started" -> "Your Authtoken"）を選択。

3. Authtokenをコピーします。長い文字列のため安全に管理してください。

   

3. ServBayでNgrokを設定

Authtokenを取得したら、ServBayに戻って設定を行います。

1. ServBayの左ナビゲーションで トンネル (Tunnel) をクリック。

2. Tunnelサービス一覧から ngrok を選択。

   

3. Auth Token（認証トークン）:

   • Auth Token 入力欄に、コピーしたNgrok Authtokenを貼り付けます。

4. トンネル設定（Local Domain・External Domain）: ServBayでは複数のローカルサイトにNgrokトンネルを作成できます。

   • Local Domain（ローカルサイト）:
     • ドロップダウンから公開したいローカルサイトを選びます。この一覧はServBayで追加済みのサイト（例： servbay.test や servbay.demo ）が自動的に表示されます。
   • External Domain（外部ドメイン）:
     • Ngrok無料ユーザーの場合： この欄は空欄のままにしてください。 Ngrokが.ngrok-free.app（または他の無料サブドメイン）で終わるランダムなパブリックURLを自動生成します。トンネル起動成功後に自動でそのURLが表示されます。
     • Ngrok有料ユーザーの場合： Ngrokアカウントでカスタムドメインやリザーブドメインを設定している場合、ここに希望する外部ドメインを入力します。

5. トンネル追加:

   • 複数サイト用のトンネルが必要な場合、既存トンネル項目の右側 +（プラス）ボタンで新たな設定項目を追加し、4の手順を各トンネルに適用します。

6. 設定の保存:

   • 全ての設定が完了したら、右下の 保存（Save） ボタンをクリックします。

4. Ngrokサービスの起動と確認

1. 設定を保存後、ServBayは新しい設定内容でNgrokサービスの起動を試みます。
2. ngrok サービス項目横のステータスランプを確認。正しく設定・接続できていれば緑色となり、サービス稼働中であることを示します。
3. 成功した各トンネルの External Domain 欄（空欄にしていた場合）に、Ngrokから割り当てられたパブリックURLが表示されるようになります。
4. アクセス検証:
   • 外部ドメインの右にある コピーアイコン をクリックしてURLをコピーできます。
   • ブラウザアイコン（通常はコンパスや地球儀アイコン）を押すと、標準ブラウザでパブリックURLが直接開きます。
   • 正常であれば、このNgrok URLからローカルサイトへアクセスできているのが確認できます。

5. Ngrokトンネルの管理

ServBayのNgrok設定画面では以下の操作が可能です。

• 外部ドメインをコピー: コピーアイコンで素早くURL共有。
• ブラウザで開く: ブラウザアイコンで即テスト。
• トンネル追加: + アイコンで新規トンネル追加。
• トンネル削除: -（マイナス）アイコンで不要なトンネル設定を削除。
• サービス停止: ngrok サービス行のスイッチで一括停止。もう一度クリックで再起動を試みます。

注意事項

• Ngrok無料版の制限: 無料版は外部ドメインが毎回ランダムに生成され、サービスやトンネルの再起動時に変更されます。また、同時接続数や帯域、使用時間にも制限があります。固定ドメインや高度な機能が必要な場合、有料プランの利用をご検討ください。
• ローカルサービスの稼働: Local Domain で選択したローカルサイト（および指定されたPHPバージョン、Nginx/ApacheなどのWebサーバー）が正常に動作中であることを必ず確認してください。Ngrokはトラフィック転送のみ担当し、ローカルサービス自体の起動や修復はできません。
• ファイアウォール: macOS標準のファイアウォールや、他のセキュリティソフトがServBayやNgrokの通信を阻害していないかご注意ください。
• HTTPS: NgrokはトンネルにHTTPSをデフォルトで付与します。これは現代のWeb開発やテストに非常に便利です。

よくある質問（FAQ）

• Q: Ngrokサービスが起動しない、ステータスランプが赤やオレンジの場合は？
  • A: まずNgrok Authtokenの入力ミスを確認してください。次にインターネット接続やNgrok公式サイトへのアクセス確認を。詳しいエラーはサービス右のログアイコンから取得できます。
• Q: Ngrok無料ユーザーですが、External Domain欄が空または「無料ユーザーは空欄にしてください」と表示されるのは？
  • A: 正常な仕様です。無料ユーザーはこの欄を埋める必要はありません。トンネル起動後、ServBayがNgrokから割り当てられたパブリックURLを自動的に取得し表示します。
• Q: Ngrokと他のトンネルサービス（frpやCloudflaredなど）は同時利用できる？
  • A: ServBayでは複数のトンネルサービスのインストール・設定が可能です。基本は用途に応じて一つまたは複数を併用できますが、複数のサービスで同一ローカルサイトを同時公開する場合は設定競合等にご注意ください。

まとめ

ServBayのNgrok連携を活用することで、Web開発者はmacOSローカル開発環境を手間なく安全にパブリック公開できます。デモ・Webhook連携テスト・共同作業など、さまざまなシーンで柔軟にご利用いただけます。Ngrokアカウント種別（無料/有料）に応じて外部ドメイン設定を正しく行い、常にローカルサービスの安定稼働を心がけてください。