VSCode の新機能「ポート転送」が外部確認で便利！

こんにちは森田です。

VSCodeが先日アップデートされた version 1.82 にて「Built-in port forwarding」機能が追加されました。

いわゆるポート転送機能というもので、マシンの指定のポートを外部に転送（公開）する機能です。
これが、とても便利な機能が追加されたので紹介いたします。

VSCode Update version 1.82

2023年9月上旬に version 1.82 がリリースされました。
主なアップデート内容はアクセシビリティやスティッキースクロールの改善などですが、目玉の新機能は本記事のポート転送機能ではないでしょうか。

ポート転送機能とは

ポート転送機能は、ローカルの指定したポートを外部に転送する機能で、ローカルで立ち上げているサーバーを外部に公開することができます。

今まで拡張機能や ngrok コマンドなどで実現することは可能でしたが、標準機能として組み込まれたことで、パネルから簡単に利用することができ利便性が大幅に向上しますね。

主な使い方としては外部回線からスマホの実機確認をしたり、外部端末で確認したり、チームメンバーに確認してもらうなどでしょうか。
ローカルサーバーを外部公開するので、VSCodeを落とせば見れなくなりますし、あくまで一時的な確認での使用になると考えます。

使い方

ローカルサーバーを立ち上げた状態で、パネルより「PORTS」タブを選択します。
もしくは、ステータスーバーの電波塔のようなアイコンをクリックしてもパネルが表示されます。

初期表示では「Forward a Port」というボタンが表示されている状態です。

「Forward a Port」ボタンを押すとポート番号の設定となります。
今回は localhost:8000 でローカルサーバーを立ち上げていたので 8000 を指定します。

エンターを押すと処理が実行され、ポート転送の URL が発行されます。

URL が発行されました。URL はランダムの文字列で発行され指定することはできません。
このURLを共有することで外部に公開することができます。

ブラウザアクセス

ブラウザからアクセスすると初回表示は以下のような警告ページが表示されます。
「続行」を押すことで表示されます。

また、デフォルトでは公開設定が「プライベート」になっているので、閲覧するには GitHub のログインを求めれれます。すでにログイン状態の場合は表示されません。

Github 認証は挟みますが、URLを知っていれば Github ログインで誰でも見れる状態になるようです。

公開設定

右クリックで公開設定を変更できます。
「Public」にすると認証不要で表示されます。

Github アカウントを持っていない方への公開のこちらになります。

まとめ

ポート転送機能により VSCode がより便利になりましたね。
簡単な外部確認で多用することになりそうです。

関連リンク

• Visual Studio Code August 2023
• Port forwarding local services with VS Code