jpskill.com
🛠️ 開発・MCP コミュニティ

ngrok

ngrokは、ローカル環境で開発中のウェブサービスなどを、セキュアなトンネルを通じてインターネットに公開し、開発サーバーの共有やウェブフックのテスト、顧客へのデモなどを手軽に行えるようにするSkill。

📜 元の英語説明(参考)

Expose local services to the internet through secure tunnels. Use ngrok to share development servers, test webhooks locally, demo applications to clients, and create temporary public URLs for any local port.

🇯🇵 日本人クリエイター向け解説

一言でいうと

ngrokは、ローカル環境で開発中のウェブサービスなどを、セキュアなトンネルを通じてインターネットに公開し、開発サーバーの共有やウェブフックのテスト、顧客へのデモなどを手軽に行えるようにするSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o ngrok.zip https://jpskill.com/download/15169.zip && unzip -o ngrok.zip && rm ngrok.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/15169.zip -OutFile "$d\ngrok.zip"; Expand-Archive "$d\ngrok.zip" -DestinationPath $d -Force; ri "$d\ngrok.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して ngrok.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → ngrok フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

ngrok

概要

セキュアな ngrok トンネルを通じて、ローカルサービスをインターネットに公開します。開発サーバーをクライアントと共有したり、Stripe/GitHub/Telegram からの webhook をローカルでテストしたり、任意のローカルポートに対して一時的なパブリック URL を作成したり、すべての受信トラフィックをリアルタイムで検査したりできます。

前提条件

  • ngrok CLI がインストールされていること (brew install ngroksnap install ngrok、または https://ngrok.com/download からダウンロード)
  • authtoken が設定された ngrok アカウント (ngrok config add-authtoken <token>)
  • 公開したいポートでローカルサービスが実行されていること

手順

基本的な HTTP トンネル

ローカルのウェブサーバーをインターネットに公開します。

# ローカルポート 3000 を公開 (例: Next.js、React 開発サーバー)
ngrok http 3000

https://abc123.ngrok-free.app のようなパブリック URL が作成され、localhost:3000 に転送されます。カスタムドメインを使用しない限り、URL は再起動ごとに変更されます。

カスタムドメイン

静的なドメインを使用して、セッション間で URL が維持されるようにします。

# 無料の静的ドメイン (アカウントごとに 1 つ)
ngrok http --domain=your-app.ngrok-free.app 3000

# 所有しているカスタムドメイン (有料プラン)
ngrok http --domain=dev.yourcompany.com 3000

Webhook テスト

Webhook 開発用にローカルエンドポイントを公開します。

# ポート 8080 で webhook レシーバーのトンネルを開始
ngrok http 8080

# http://127.0.0.1:4040 で webhook ペイロードを検査

localhost:4040 のインスペクターには、ヘッダー、本文、タイミングを含むすべてのリクエストが表示されます。Webhook を再トリガーせずに、リクエストを再生してデバッグします。

構成ファイル

複数のサービス設定のために、ngrok.yml でトンネルを定義します。

# ~/.config/ngrok/ngrok.yml
version: "3"
agent:
  authtoken: your-authtoken-here

tunnels:
  webapp:
    addr: 3000
    proto: http
    domain: your-app.ngrok-free.app
    inspect: true
  api:
    addr: 8080
    proto: http
    inspect: true
  ssh:
    addr: 22
    proto: tcp
ngrok start --all       # すべてのトンネルを開始
ngrok start webapp api  # 特定のトンネルを開始

TCP および TLS トンネル

HTTP 以外のサービス (データベース、SSH、ゲームサーバー) を公開します。

ngrok tcp 22    # SSH
ngrok tcp 5432  # PostgreSQL
ngrok tls 443   # ngrok エッジでの TLS 終端

リクエストの検査と再生

ngrok http 3000
# http://127.0.0.1:4040 を開くか、API を使用:
curl http://127.0.0.1:4040/api/requests/http

インスペクターを使用して、リクエストの表示、再生、ステータス/メソッドによるフィルタリング、およびデータのエクスポートを行います。

認証とセキュリティ

# 基本認証
ngrok http 3000 --basic-auth="user:password"

# IP 制限 (有料プラン)
ngrok http 3000 --cidr-allow="203.0.113.0/24"

# Webhook 署名検証
ngrok http 3000 --verify-webhook=stripe --verify-webhook-secret=whsec_xxx

トラフィックポリシー

トラフィックがサービスに到達する前に、ミドルウェアルールを適用します。

# traffic-policy.yml
on_http_request:
  - actions:
      - type: rate-limit
        config:
          name: global
          algorithm: sliding_window
          capacity: 100
          rate: 60s
          bucket_key:
            - conn.client_ip
  - expressions:
      - req.url.path.startsWith('/api/webhooks')
    actions:
      - type: verify-webhook
        config:
          provider: stripe
ngrok http 3000 --traffic-policy-file=traffic-policy.yml

ngrok API

プログラムでトンネルを管理します。

const response = await fetch('https://api.ngrok.com/tunnels', {
  headers: { 'Authorization': `Bearer ${NGROK_API_KEY}`, 'Ngrok-Version': '2' }
});
const { tunnels } = await response.json();

Docker 統合

# docker-compose.yml
services:
  app:
    build: .
    ports:
      - "3000:3000"
  ngrok:
    image: ngrok/ngrok:latest
    restart: unless-stopped
    command: "http app:3000 --domain=your-app.ngrok-free.app"
    environment:
      - NGROK_AUTHTOKEN=${NGROK_AUTHTOKEN}
    ports:
      - "4040:4040"
    depends_on:
      - app

一般的なパターン

クライアント向けのローカルデモ:

ngrok http 3000 --basic-auth="demo:clientname2025"

Telegram/Slack ボット開発:

node bot.js  # :8443 でリッスン
ngrok http 8443 --domain=your-bot.ngrok-free.app
# Webhook を設定: https://api.telegram.org/bot<token>/setWebhook?url=https://your-bot.ngrok-free.app/webhook

CI/CD プレビュー環境:

ngrok http 3000 --domain=pr-${PR_NUMBER}.ngrok-free.app &

クライアントレビュー用に Next.js 開発サーバーを公開する

ポート 3000 で Next.js アプリを構築しており、レビューのためにクライアントと共有する必要があります。安定した URL と基本認証で ngrok をセットアップして、クライアントのみがアクセスできるようにします。

Stripe webhook をローカルでテストする

Stripe 決済を統合しています。Stripe 署名検証を使用して、ローカルサーバー (ポート 8080) で webhook を受信するように ngrok をセットアップし、インスペクターを使用して受信イベントをデバッグする方法を示してください。

複数サービス開発環境

ポート 3000 にフロントエンド、ポート 8080 に API、ポート 3001 に WebSocket サーバーがあります。安定したドメインとリクエスト検査が有効になっている状態で、これらすべてを公開する ngrok 構成を作成します。

ガイドライン

  • 安定した URL にはカスタムドメインを使用します。無料アカウントでは 1 つの静的ドメインを取得できます
  • トンネルを外部関係者と共有する場合は、常に --basic-auth を使用してください
  • ハンドラーコードを記述する前に、localhost:4040 のインスペクターを使用して webhook ペイロードをデバッグしてください
  • 本番環境の webhook レシーバーの場合は、--verify-webhook を使用してリクエスト署名を検証してください
  • 複数の CLI コマンドを実行するのではなく、ngrok.yml でマルチトンネル設定を定義してください
  • TCP トンネルは生のポートを公開します。キー認証を使用した SSH などの信頼できるサービスでのみ使用してください
  • 無料プランにはレート制限と接続制限があります。有料プランではこれらの制限が解除されます
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

ngrok

Overview

Expose local services to the internet through secure ngrok tunnels. Share development servers with clients, test webhooks from Stripe/GitHub/Telegram locally, create temporary public URLs for any local port, and inspect all incoming traffic in real time.

Prerequisites

  • ngrok CLI installed (brew install ngrok, snap install ngrok, or download from https://ngrok.com/download)
  • ngrok account with authtoken configured (ngrok config add-authtoken <token>)
  • A local service running on a port you want to expose

Instructions

Basic HTTP Tunnel

Expose a local web server to the internet:

# Expose local port 3000 (e.g., Next.js, React dev server)
ngrok http 3000

Creates a public URL like https://abc123.ngrok-free.app forwarding to localhost:3000. The URL changes on each restart unless you use a custom domain.

Custom Domain

Use a static domain so the URL persists between sessions:

# Free static domain (one per account)
ngrok http --domain=your-app.ngrok-free.app 3000

# Custom domain you own (paid plan)
ngrok http --domain=dev.yourcompany.com 3000

Webhook Testing

Expose a local endpoint for webhook development:

# Start tunnel for webhook receiver on port 8080
ngrok http 8080

# Inspect webhook payloads at http://127.0.0.1:4040

The inspector at localhost:4040 shows every request with headers, body, and timing. Replay requests to debug without retriggering the webhook.

Configuration File

Define tunnels in ngrok.yml for multi-service setups:

# ~/.config/ngrok/ngrok.yml
version: "3"
agent:
  authtoken: your-authtoken-here

tunnels:
  webapp:
    addr: 3000
    proto: http
    domain: your-app.ngrok-free.app
    inspect: true
  api:
    addr: 8080
    proto: http
    inspect: true
  ssh:
    addr: 22
    proto: tcp
ngrok start --all       # Start all tunnels
ngrok start webapp api  # Start specific tunnels

TCP and TLS Tunnels

Expose non-HTTP services — databases, SSH, game servers:

ngrok tcp 22    # SSH
ngrok tcp 5432  # PostgreSQL
ngrok tls 443   # TLS termination at ngrok edge

Request Inspection and Replay

ngrok http 3000
# Open http://127.0.0.1:4040 or use the API:
curl http://127.0.0.1:4040/api/requests/http

Use the inspector to view requests, replay them, filter by status/method, and export data.

Authentication and Security

# Basic auth
ngrok http 3000 --basic-auth="user:password"

# IP restriction (paid plan)
ngrok http 3000 --cidr-allow="203.0.113.0/24"

# Webhook signature verification
ngrok http 3000 --verify-webhook=stripe --verify-webhook-secret=whsec_xxx

Traffic Policy

Apply middleware rules to traffic before it reaches your service:

# traffic-policy.yml
on_http_request:
  - actions:
      - type: rate-limit
        config:
          name: global
          algorithm: sliding_window
          capacity: 100
          rate: 60s
          bucket_key:
            - conn.client_ip
  - expressions:
      - req.url.path.startsWith('/api/webhooks')
    actions:
      - type: verify-webhook
        config:
          provider: stripe
ngrok http 3000 --traffic-policy-file=traffic-policy.yml

ngrok API

Manage tunnels programmatically:

const response = await fetch('https://api.ngrok.com/tunnels', {
  headers: { 'Authorization': `Bearer ${NGROK_API_KEY}`, 'Ngrok-Version': '2' }
});
const { tunnels } = await response.json();

Docker Integration

# docker-compose.yml
services:
  app:
    build: .
    ports:
      - "3000:3000"
  ngrok:
    image: ngrok/ngrok:latest
    restart: unless-stopped
    command: "http app:3000 --domain=your-app.ngrok-free.app"
    environment:
      - NGROK_AUTHTOKEN=${NGROK_AUTHTOKEN}
    ports:
      - "4040:4040"
    depends_on:
      - app

Common Patterns

Local demo for clients:

ngrok http 3000 --basic-auth="demo:clientname2025"

Telegram/Slack bot development:

node bot.js  # listening on :8443
ngrok http 8443 --domain=your-bot.ngrok-free.app
# Set webhook: https://api.telegram.org/bot<token>/setWebhook?url=https://your-bot.ngrok-free.app/webhook

CI/CD preview environments:

ngrok http 3000 --domain=pr-${PR_NUMBER}.ngrok-free.app &

Examples

Expose a Next.js dev server for client review

I'm building a Next.js app on port 3000 and need to share it with a client for review. Set up ngrok with a stable URL and basic auth so only they can access it.

Test Stripe webhooks locally

I'm integrating Stripe payments. Set up ngrok to receive webhooks on my local server (port 8080) with Stripe signature verification, and show me how to use the inspector to debug incoming events.

Multi-service development environment

I have a frontend on port 3000, API on port 8080, and a WebSocket server on port 3001. Create an ngrok config that exposes all three with stable domains and request inspection enabled.

Guidelines

  • Use custom domains for stable URLs — free accounts get one static domain
  • Always use --basic-auth when sharing tunnels with external parties
  • Use the inspector at localhost:4040 to debug webhook payloads before writing handler code
  • For production webhook receivers, use --verify-webhook to validate request signatures
  • Define multi-tunnel setups in ngrok.yml rather than running multiple CLI commands
  • TCP tunnels expose raw ports — only use for trusted services like SSH with key auth
  • The free plan has rate limits and connection limits; paid plans remove these