ポートフォワーディング

Visual Studio Codeには、Microsoft dev tunnelsを介したポートフォワーディング機能が組み込まれており、拡張機能は不要です。ローカルWebサービスを実行しているときに、[ポート]ビューを使用して、インターネット経由で他のユーザーがそのサービスにアクセスできるようにすることができます。

ポートフォワーディングの使用方法

まず、フォワーディングするサービスを用意する必要があります。まだサービスがない場合でNode.jsがインストールされていれば、以下のコマンドを実行してポート3000でサーバーを起動できます。

npx serve

次に、パネル領域にある[ポート]ビューに移動し（[Ports: Focus on Ports View]コマンドを使用）、[ポートの転送]を選択します。

GitHubでログインしていない場合は、サインインを求められます。次に、転送したいポート番号を入力します（上記のコマンドを使用した場合のデフォルトはポート3000です）。これが完了するとポートフォワーディングが開始され、[ポート]ビューが更新されて、転送されたポートとその[転送先アドレス]が表示されます。

[転送先アドレス]にマウスカーソルを合わせると、インラインアクションを使用してアドレスのコピー、ブラウザでの表示、またはエディタ内でのプレビューを行うことができます。

デフォルトでは、転送されたポートは[プライベート]になっています。URLにアクセスする際は、VS Codeでポートフォワーディングを開始した際と同じGitHubアカウントでのサインインが必須となります。ポートを右クリックして[ポートの可視性] > [パブリック]を選択することで、公開範囲を変更できます。[パブリック]に設定されたポートは、サインイン不要でアクセス可能です。

よくある質問

リモートマシンに接続している場合、ローカルサービスをフォワーディングするにはどうすればよいですか？

現在、ポートフォワーディングで公開できるのはローカルで実行されているサービスのみです。リモート接続はまだサポートされていませんが、将来的にこの機能を追加する予定です。

利用状況に応じて、VS CodeのRemote - Tunnels拡張機能を使用してリモートマシンへトンネル接続することも可能です。詳細については、Remote - Tunnelsのドキュメントを参照してください。

転送されたポートはどのように保護されていますか？

デフォルトでは、トンネルのホスティングと接続の両方において、それぞれの側で同じGitHubまたはMicrosoftアカウントによる認証が必要です。いずれの場合も、VS CodeはAzureでホストされているサービスへのアウトバウンド接続を行うため、通常ファイアウォールの変更は必要なく、VS Codeがネットワークリスナーをセットアップすることもありません。

基盤となるdev tunnelsサービスのセキュリティについて詳しく学びましょう。

ポートフォワーディングに制限はありますか？

ポートフォワーディングで使用できる帯域幅およびアクティブなマシンの数には制限があり、これらは時間の経過とともに変更される可能性があります。トンネルの使用制限に関する詳細をお読みください。

組織全体でポリシーを設定することはできますか？

ポートフォワーディングへのアクセスを制御したい組織に所属している場合は、ドメイン global.rel.tunnels.api.visualstudio.com へのアクセスを許可または拒否することで設定可能です。

Windowsデバイスを使用しているユーザーは、dev tunnelsのグループポリシー設定を構成して展開することもできます。詳細については、dev tunnelsのドキュメントを参照してください。