はじめに
VSCode にポートフォワード機能が増えていました！
皆さんご存じですか？
httpsのみ動作するAPIや、モバイル端末などの確認を行うには、ngrok などの外部公開サービスを使用することがたまにありました。
しかし、無料アカウントにはいつの間にかレート制限が設けられていました...。
PHP には Expose というセルフホスト可能な ngrok がありますが、準備までがちょっと大変...。
そこで VSCode に付随する、ポートフォワード機能はどうか、という流れです。
ポート転送は、外部にリソースが公開されるため、
セキュリティリスクに十分気を付けてください。
用意するもの
- Windows + WSL (任意のOS)
- VSCode
- GitHub アカウント
起動方法
WSL で開発している想定で記載します。
Windows ネイティブの場合は、(1) を飛ばして下さい。
(1) WSLでアプリを起動する
例では Nuxt アプリケーションを通常起動します。
基本的に、他のフレームワーク、なんでもOKです。
WSL の場合、自動的に使用したポートが、ホスト側へ転送されます。
（ホストPCから localhost などで閲覧できる）
(2) ホスト側でポートを外部へ転送する
「ファイル > 新しいウインドウ」から、ホスト側のVSCodeを開く。
先ほどのポートタブを開いて、「ポートの転送」を選択し、公開したいポート番号を入力する。
すると、GitHubアカウントとの連携確認のページが開く。
どうやらこの仕組みは、GitHubを使用しているみたい。
よしなにOKとする。
公開されたみたい。
(3) 接続したい端末でURLにアクセスする
先ほど「転送されたアドレス」に記載されたURLを、端末で開く。
すると GitHub の認証画面が表示されます。
先ほどログインしたアカウントで、ログインします。
ログインに成功すると確認画面が表示されます。
不正なリンクに誘導されないための確認画面かと。
せつぞく！！ 
ポート転送している VSCode を落とせば、公開は終了します。
認証が面倒くさい！
ポート画面にて、公開したい接続を右クリックし、表示範囲を「公開」にします。
すると、誰でもアクセス可能なページとなります。
終わりに
サーバー要らずでお手軽すぎる...
「Dev Tunnel」は Microsoft が構築している開発ツールの一種。
公開時、接続時にアカウント認証を挟むため、基本的に外部に漏れることはない。
簡易的に公開したい用途にはもってこいだろう。
セキュリティを気にする場合は以下リンクを参照のこと。
一応使用リミットがあるみたいなので要注意。
動作確認程度なら問題にならないかと。
