ローカル開発 · 実機でテスト

localhostを共有：スマホ確認とWebhookテスト

パソコンで動くサイトに、スマホ、クライアント、Webhookサービスからアクセスできる一時的なHTTPSリンクを作りましょう。デプロイは不要です。

共有前にローカルアドレスを確認する

開発サーバーが表示するURLを確認します。プロトコルとポートは重要です。http://localhost:5173 と https://localhost:7143 は別の接続先です。その正確なアドレスをパソコンで開き、通常の操作を一度試してからトンネルを作成します。

1つのアプリ、1つのポート

ページとAPIが同じローカルアドレスを使うなら、1つのトンネルで両方に届きます。パスは維持され、公開URLの /contact へのリクエストはローカルアプリの /contact に届きます。トンネルはファイルをコピーしたりデプロイしたりしません。

フロントエンドとAPIのポートが異なる場合

フロントエンドへのトンネルは、別ポートのAPIまで自動公開しません。ブラウザーがlocalhost:3000を呼ぶと、訪問者自身の端末に接続します。開発サーバーのAPIプロキシ、またはアクセス可能なAPIのテストURLを使い、フロントエンドを合わせて設定してください。

公開リンクを作る

サイトやAPIを起動し、ローカルで開くことを確認します。GhostlyShareは動作中のローカルWebアプリを自動検出します。Go Publicをクリックすると公開HTTPSリンクを作成できます。

  1. テスト中はアプリとGhostlyShareを起動したままにします。
  2. 共有前にプライベートブラウジングのウィンドウでリンクを開きます。
  3. テスト用データを使います。クライアント限定のプレビューには必要に応じてパスワードを設定します。

Windows・Linux対応。アカウント、メールアドレス、サブスクリプションなしで使える無料の一時リンク。

GhostlyShareをダウンロード ↗

GhostlyShareの全機能を見る →

公開プレビューと共有操作を表示するGhostlyShare

公開アドレスをパソコンと別の端末で開きます。ローカルだけが動く場合は両方のURLを比較し、アプリの問題とトンネルやホスト設定の問題を切り分けます。

スマホからlocalhostにアクセスする

スマホのlocalhostはパソコンではなく、そのスマホ自身を指します。公開リンクを開くか、GhostlyShareのQRコードを読み取ってください。

  1. モバイルデータ通信に切り替え、Wi-Fiの外からアクセスできるか確認します。
  2. 実機でメニュー、フォーム、キーボード、ファイルアップロードを試します。
  3. 下層ページを直接開いて再読み込みします。画像とAPIの応答も確認します。

同じWi-Fi内だけで試す場合は、開発サーバーとファイアウォールが許可していればパソコンのLANアドレスで足りることがあります。公開トンネルは別のネットワークや外部サービスからのアクセスに役立ちます。

スマホでプレビューを開くためのGhostlyShareのQRコード

5分でできる実用的なスマホテスト

ナビゲーションとレイアウト
メニューを開き、スマホを回転させ、長いページを表示します。横スクロール、隠れたボタン、固定ヘッダーに覆われた内容を確認してください。ブラウザーのエミュレーションは便利ですが、実機のすべての操作を再現できるわけではありません。
フォームとログイン状態
各入力欄をタップし、不正な値と正しい値を順に送信します。エラー表示がキーボードの上に見えるか確認します。ログインがパソコンでしか動かない場合は新しいセッションで試し、コールバックURLとCookie設定を確認してください。
リクエストと読み込み
画像の多いページやデータを取得する操作を試します。自宅回線経由の遅さは、本番環境の性能指標ではありません。問題のページ、端末、操作を記録し、ローカルで再現できるようにします。

クライアントに制作中のサイトを見せる

確認してほしいページを直接送ります。試す内容とプレビューを閉じる時刻も伝えてください。

送る前に

テスト用アカウントとサンプルの内容を使います。自分のCookieやログイン状態がなくてもリンクが機能するか確認します。

確認してほしい操作を具体的に伝える

お問い合わせフォームの入力、スマホメニューの確認、テスト決済での購入など、明確な作業を依頼すると役立つ意見を得られます。

本日の確認用プレビューです。スマホのメニューとお問い合わせフォームをご確認ください。通話終了後にリンクを閉じます。

再現できるフィードバックを集める

ページURL、端末、ブラウザー、問題直前の操作を聞きます。「Xを期待したがYになった」という説明と画面画像は「動かない」より有用です。確認中にアプリを編集するなら伝えてください。設定によっては変更や再読み込みがすぐに反映されます。

Webhookをローカルで受信する

Webhookサービスはパソコンのlocalhostにアクセスできません。トンネルの公開アドレスにコールバックのパスを付けて指定します。この例では、アプリがすでに /api/webhooks/demo でPOSTを処理する前提です。

http://localhost:5173/api/webhooks/demohttps://YOUR-TUNNEL.trycloudflare.com/api/webhooks/demo
  1. YOUR-TUNNELを実際のホスト名に置き換え、コールバックURL全体をサービスのテスト設定に入力します。
  2. 署名検証は有効のままにします。Webhookのシークレットをローカルに保存し、サービスからテストイベントを送信します。
  3. 配信状態とローカルログを確認します。サービスが期待する成功応答を返し、再配信でも処理が重複しないようにします。

ブラウザーのパスワード画面はWebhook送信元をブロックすることがあります。サービスがアクセスできるエンドポイントを使い、署名付きリクエストを検証してください。CORSはブラウザーのリクエストに適用され、サーバー間のWebhook配信には適用されません。

例：GitHub Webhookの署名を検証する ↗

ブラウザー表示だけでなくWebhookの応答を確認する

コールバックURLをブラウザーで開くと通常はGETになります。多くのWebhookはPOSTを受け付けるため、ブラウザーのエラーだけでは配信失敗とは判断できません。サービスのテストイベントを送り、時刻と配信IDをローカルログと照合してください。

404 / 405
パスとHTTPメソッドを確認します。必ずしもフロントエンドではなくAPIのポートを使ってください。トップページが開いても、コールバックのエンドポイントが存在するとは限りません。
401 / 403
プレビューのパスワード、アプリ認証、署名検証のどこで拒否されたかを確認します。署名付きデータはサービスが指定する元のリクエスト本文を使ってください。検証前に解析して書き直すと署名が無効になる場合があります。
5xx / Timeout
アプリが動作し、リクエストを受け取ったか確認します。処理が長い場合はサービスの応答期限を守り、必要に応じてバックグラウンド処理を使います。再配信でも注文やメッセージが重複しないか試してください。

サービスのテストモードを使い、シークレットや個人情報を含む本文全体をログに残さないでください。成功したテストが確認するのは配信とアプリの処理であり、サービスの連携要件に代わるものではありません。

リンクは開くのに一部が動かない場合

公開リンクからアプリに接続できない

まずローカルURLを開きます。ポート、HTTPとHTTPSの違い、アプリとトンネルが動作中かを確認してください。

画像やAPI呼び出しが失敗する

コードに固定されたlocalhost URLを探します。可能なら相対パスを使ってください。別ポートのAPIには独自のアクセス可能な経路が必要です。

localhostにリダイレクトされる

公開ベースURL、信頼するプロキシ、ログインのコールバックを確認します。ホストチェックを全体で無効にせず、実際のプレビューホストを許可してください。

ライブリロードやWebSocketsが動かない

WebSocketsが公開ホストを使い、HTTPSページではwssになっているか確認します。開発サーバーによってはHMRホストの別設定が必要です。

Webhookに成功応答が返らない

コールバックのパス、HTTPメソッド、署名シークレット、配信ログを確認します。新しい一時トンネルを起動したらコールバックURLも更新してください。

テストを終えて共有を停止する

GhostlyShareで共有を停止するか、ターミナルでCtrl+Cを押してトンネルを止めます。有効期限を使えば予定したプレビューを自動終了できます。終了後はサービス側の一時コールバックURLも削除してください。

継続利用する固定アドレスが必要ですか？

一時プレビューはデプロイの代わりではありません。自宅ホスティングのガイドでは、名前付きトンネル、ドメイン、Windowsサービス、運用コストを解説しています。

常設のCloudflare Tunnelを設定する →

ローカルプレビューのよくある質問

よくある質問

スマホでlocalhostが動かないのはなぜ？

Localhostはアドレスを開いている端末を指します。パソコンのアプリへスマホからアクセスするには公開プレビューリンクを使ってください。

パソコンは起動したままにする必要がありますか？

はい。パソコン、ローカルアプリ、トンネルを動作させ続ける必要があります。スリープやトンネルの停止でプレビューは利用できなくなります。

プレビューにドメインは必要ですか？

不要です。一時トンネルが公開HTTPSアドレスを提供します。アドレスが変わったら、共有リンクとWebhookの設定を更新してください。