はじめに

VSCode にポートフォワード機能が増えていました！
皆さんご存じですか？

httpsのみ動作するAPIや、モバイル端末などの確認を行うには、ngrok などの外部公開サービスを使用することがたまにありました。
しかし、無料アカウントにはいつの間にかレート制限が設けられていました...。

PHP には Expose というセルフホスト可能な ngrok がありますが、準備までがちょっと大変...。

そこで VSCode に付随する、ポートフォワード機能はどうか、という流れです。

ポート転送は、外部にリソースが公開されるため、
セキュリティリスクに十分気を付けてください。

用意するもの

WSL で開発している想定で記載します。
Windows ネイティブの場合は、(1) を飛ばして下さい。

例では Nuxt アプリケーションを通常起動します。
基本的に、他のフレームワーク、なんでもOKです。

WSL の場合、自動的に使用したポートが、ホスト側へ転送されます。
（ホストPCから localhost などで閲覧できる）

「ファイル > 新しいウインドウ」から、ホスト側のVSCodeを開く。
先ほどのポートタブを開いて、「ポートの転送」を選択し、公開したいポート番号を入力する。

すると、GitHubアカウントとの連携確認のページが開く。
どうやらこの仕組みは、GitHubを使用しているみたい。
よしなにOKとする。

公開されたみたい。

先ほど「転送されたアドレス」に記載されたURLを、端末で開く。
すると GitHub の認証画面が表示されます。
先ほどログインしたアカウントで、ログインします。

ログインに成功すると確認画面が表示されます。
不正なリンクに誘導されないための確認画面かと。

せつぞく！！

ポート転送している VSCode を落とせば、公開は終了します。

ポート画面にて、公開したい接続を右クリックし、表示範囲を「公開」にします。
すると、誰でもアクセス可能なページとなります。

サーバー要らずでお手軽すぎる...

「Dev Tunnel」は Microsoft が構築している開発ツールの一種。
公開時、接続時にアカウント認証を挟むため、基本的に外部に漏れることはない。
簡易的に公開したい用途にはもってこいだろう。

セキュリティを気にする場合は以下リンクを参照のこと。

一応使用リミットがあるみたいなので要注意。
動作確認程度なら問題にならないかと。

ref: https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/azure-subscription-service-limits#dev-tunnels-limits