Express.js アプリで PortPreview を使用するには、0.0.0.0 (または localhost のみにバインドしない app.listen(PORT)) でリッスンし、npx portpreview PORT を実行して、Webhook、OAuth コールバック、API デモ用の HTTPS URL を登録します。
エクスプレスをトンネルする理由
Express は、ノード API および BFF のデフォルトの HTTP レイヤーのままです。ミドルウェアの注文と raw-body 解析をローカルでデバッグする際、決済プロバイダー、CRM Webhook、OAuth サーバーにはパブリック HTTPS エンドポイントが必要です。
- Webhook。
express.json()の前に Webhook パスにexpress.raw()をマウントします。詳細は Express webhook local testing をご覧ください。 - OAuth。 リダイレクト URI をトンネル起点に設定します。 OAuth callback testing を参照してください。
- API の共有。 モバイル チームやフロントエンド チームが VPN なしでローカル API を使用できるようにします。 share local dev server を参照してください。
クイックスタート
<オル>node server.js または npm run dev npx portpreview 3000 を実行します。GET https://your-tunnel.portpreview.dev/health をテストします。POST https://your-tunnel.portpreview.dev/api/webhooks/... に設定します。最小限の Express サーバー
import express from 'express';
const app = express();
const PORT = process.env.PORT ?? 3000;
app.get('/health', (_req, res) => res.json({ ok: true }));
app.listen(PORT, () => {
console.log(`Listening on http://localhost:${PORT}`);
});Express はデフォルトですべてのインターフェイスをリッスンします。明示的にバインドする場合は、'0.0.0.0' を使用して、トンネル プロセスがトラフィックを転送できるようにします。
信頼プロキシ ヘッダー
PortPreview の後ろには、アプリには X-Forwarded-Proto: https が表示されます。絶対 URL またはセキュア Cookie を生成するときに信頼プロキシを有効にします:
app.set('trust proxy', 1);分割フロントエンド用の CORS
別のポート上の React または Vue 開発サーバーが別のトンネル経由で Express API を呼び出す場合は、CORS を明示的に設定します。
import cors from 'cors';
app.use(cors({ origin: process.env.FRONTEND_TUNNEL_URL }));セキュリティチェックリスト
- JSON を解析する前に Webhook 署名を検証します。
- 認証されていない管理ルートを共有トンネル上に公開しないでください。
- 終了したらトンネルを停止します。 tunnel security を参照してください。
Express documentation では、ミドルウェアとルーティングについて説明します。 Start PortPreview free.