Tailscaleでローカルウェブアプリに安全にアクセスする

機能開発の真っ最中。デザイナーが自分のマシンでレビューする必要がある。選択肢は、未完成のブランチをステージングサーバーにプッシュするか、ポートフォワーディングと格闘するか、ngrokを起動してトンネルが生き続けることを祈るか。どれもしっくりこない。

Tailscaleは、よりクリーンな方法を提供します。この記事では、Tailscale Serveを使用して、ファイアウォールポートを開いたりリバースプロキシを設定したりすることなく、デバイスやチームメイト間でローカルウェブアプリに安全にアクセスする方法を説明します。

Tailnetとは何か、そしてローカル開発においてなぜ重要なのか

デバイスにTailscaleをインストールすると、それらはtailnetと呼ばれるプライベート暗号化ネットワークに参加します。すべてのデバイスは、接続しているWi-Fiネットワークに関係なく、一貫して機能する安定したIPアドレスとDNSホスト名を取得します。

これが基盤です。カフェにいるあなたのラップトップと自宅のデスクトップは同じtailnet上にあり、暗号化されたWireGuardトンネルを介して直接相互に到達できます。静的IP、VPN設定、ファイアウォールルールは不要です。

Tailscale Serve: 安全なローカル開発サーバーのための適切なツール

Tailscale Serveは、ローカルサービス(例えばlocalhost:3000で実行されている開発サーバー)をtailnet内の他のデバイスに公開します。対象がチームであり、パブリックインターネットではない場合に適したツールです。

ローカルウェブアプリをチームメイトと共有するには、次のコマンドを実行します:

tailscale serve 3000

これだけです。TailscaleはMagicDNSを介してHTTPS証明書を自動的にプロビジョニングし、次のような安定したURLでアプリを利用可能にします:

https://your-device-name.your-tailnet.ts.net

Tailscaleがインストールされ、適切なアクセス権限を持つチームメイトは、異なる都市、異なるネットワークからでも、そのURLを開いてローカル開発サーバーに直接アクセスできます。

Serveが処理すること

• 自動HTTPS — TailscaleがTLS証明書を管理します。自己署名証明書の警告はありません。
• 安定したホスト名 — URLはセッション間で変更されません。
• ポートを開かない — ローカルサービスはlocalhostにバインドされます。パブリックインターネットには何も公開されません。
• ID伝播 — Tailscaleは、認証されたユーザーのIDをリクエストヘッダー(Tailscale-User-Login、Tailscale-User-Name)を介してバックエンドに転送できます。これは開発環境での軽量なアクセス制御に便利です。

セキュリティのため、開発サーバーはlocalhostにバインドしたままにしてください(ほとんどのフレームワークのデフォルト)。Tailscale Serveは安全なプロキシレイヤーとして機能し、アプリはパブリックインターフェースでリッスンする必要がありません。

Tailscale ServeとFunnel: 違いを理解する

この違いは重要であり、明確にする価値があります。

すでにTailscaleを持っているチームメイトと共有する場合はServeを使用してください。tailnet外の誰か(クライアント、ステークホルダー、Webhookプロバイダー)がローカルサービスに到達する必要がある場合は**Tailscale Funnelを使用**してください。

Funnelでアプリを公開するには:

tailscale funnel 3000

URL形式は同じですが、トラフィックはオープンインターネットからルーティング可能になります。これは慎重に、必要な場合にのみ使用してください。

このワークフローが輝く実際のシナリオ

• レスポンシブデザインレビュー — 何もデプロイせずに、異なるネットワーク上のデザイナーとNext.js開発サーバーを共有します。
• リモートペアプログラミング — コーディング中に、チームメイトがブラウザでローカルアプリを開きます。
• ステークホルダープレビュー — ステージング環境を立ち上げることなく、Funnelを使用して期限付きのデモリンクを提供します。
• モバイルテスト — tailnet上にあるスマートフォンからlocalhost開発サーバーにアクセスします。

始め方

1. 各デバイスにTailscaleをダウンロードしてインストールします。
2. サインインし、管理コンソールでMagicDNSが有効になっていることを確認します。
3. localhost:3000(または任意のポート)で開発サーバーを起動します。
4. ホストマシンでtailscale serve 3000を実行します。
5. 他のtailnetデバイスから提供されたhttps:// URLを開きます。

配信を停止するには、次のコマンドを実行します:

tailscale serve reset

まとめ

Tailscale Serveは、ローカル開発作業を共有する際の摩擦を取り除きます。チームは安定した暗号化されたHTTPSリンクを取得します。サービスはlocalhost上に留まります。内部レビューのためにステージングサーバーを完全にスキップできます。本当にパブリックアクセスが必要な場合、Funnelは1つのコマンドで利用できます。セットアップ全体は数分で完了し、インフラストラクチャの変更は不要です。Tailscaleをインストールし、1つのコマンドを実行し、URLを共有するだけです。

よくある質問

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.