VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス

## はじめに
この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。

https://twitter.com/code/status/1699869087071899669

![リリースノート](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9d50abd7-7769-1cc4-62ec-766368f49d3d.png)

この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。
同様のことを実現するものには、有名どころの 1つに「[ngrok（エングロック）](https://ngrok.com/)」があったり、[その他にもたくさんの類似サービスがあります](https://github.com/anderspitman/awesome-tunneling)。

## 実際に VSCode の built-in port forwarding を試してみる
それでは、VSCode の built-in port forwarding を試してみます。
自分が試す際に参考にした情報は、以下の公式ページです。

●Port forwarding local services with VS Code
https://code.visualstudio.com/docs/editor/port-forwarding

### GitHubアカウント関連の準備
今回の機能を使うためには、GitHubアカウントが必要です。
以下の公式ページにも書かれているのですが、GitHubアカウントでログインしておきましょう。
![GitHubアカウントの利用について](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f8f875e4-05dc-346b-10bc-a2f3d85d3f43.png)

### ローカルサーバーとコンテンツを用意する
まず、built-in port forwarding を試すため、ローカルサーバーとそこで表示するコンテンツを準備します。

色々なやり方はありますが、今回は「[VSCode の拡張機能の1つの Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)」を使います。
有名な拡張機能なので、既にお使いの方も多いかと思いますが、この機能を使うとローカルサーバーを簡単に立ち上げられます。

とりあえず、適当なフォルダに適当な HTML ファイルを用意し、上記の Live Server の機能でローカルサーバーを立ち上げます。そうすると、localhost などの URL でサーバーにアクセスできます。
以下が実際にアクセスした例です。5500番ポートで立ち上がったローカルサーバーを使って、test.html を表示できていることが分かります。

![ローカルサーバーにアクセス](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ccf81cb7-7773-b40f-5612-1f75b3bfdce0.png)

今回は、これをインターネット側からアクセス可能な状態にします。

### VSCode の「built-in port forwarding」を使う 【その1】
それではローカルサーバーが立ち上がった状態で、[上で紹介していた公式ページ](https://code.visualstudio.com/docs/editor/port-forwarding)に書かれていた、「built-in port forwarding」を使うための手順を試します。

VSCode のターミナルなどが利用できるパネルを開くと、「PORTS（日本語化していると "ポート"）」というタブがあります（※ これは「built-in port forwarding」が実装された「version 1.82」にアップデートした後で試してください）。
![パネルのタブ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c74e1cf5-2abc-8af3-16e9-a9303ad3d503.png)

そして、「Forward a Port」というボタンがあるので、これを押します。
そして、上の手順で立ち上げたローカルサーバーのポート番号を入力してください（自分の場合は 5500番ポート）。
![ポートの指定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f7aa064f-47f6-b06e-a0e1-05efa8dd2ac6.png)

その後、初回利用時はブラウザ上でパーミッションを求められるページが表示されます。
内容を確認して許可をして、先へ進みます。
![パーミッションの要求1](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/64405e49-df39-a838-4a0e-15e5c7932bfc.png)

そうすると、VSCode側でインターネット側からアクセス可能な URL が発行されたという表示が出るので、こちらにアクセスします。
![URLが発行される](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/2c371315-c924-169d-53cc-ccc86ba9d8e8.png)

そして、初回利用時は、先ほどとは別のパーミッションを求められるページがブラウザ上で表示されます。こちらも、内容を確認して許可をし、先へ進みます。
![パーミッションの要求2](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/046ee2a2-ad0d-cd35-de95-7a0ddabcef35.png)

それと、さらにもう 1段階、以下の画面が出てきます。
内容を確認して許可をして、さらに先へ進みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/4e6aff38-96f4-91df-abe9-ccf7dffc3f7f.png)

その後、先ほど発行されていた URL にブラウザでアクセスした結果が表示されます。
以下を見ると、上でローカルサーバーを使ってアクセスしていた HTMLファイルに、「○○.devtunnels.ms」という URL経由でアクセスできていることが分かります。
![インターネット側からアクセスした状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/f22200d9-42bb-50a8-f821-3ef553255fa3.png)

### 【追記】 VSCode の「built-in port forwarding」を使う 【その2】
上の手順で、ブラウザから「○○.devtunnels.ms」という URL でアクセスしてましたが、上の手順だと GitHubアカウントにログインした状態であればアクセス可能、という状態のようです。

スマホから、「○○.devtunnels.ms」という URL にアクセスしたら、以下の画面が表示されました。
![別端末でアクセスした場合（Private）](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/1d9ac6a6-d295-9044-94ed-49abd65f5d44.jpeg)

これを、ログインなしでアクセスできるようにするには、もう少し操作が必要になるようです。
具体的には、以下の右クリックメニューから「Port Visibility > Public（（日本語化していると "ポートの表示範囲 > Public"）」という設定変更を行う必要があります。
![Portをパブリックにする](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/18217165-c6d2-6502-6091-dfb69fdd1aff.png)

これを行った後は、GitHubアカウントにログインしていない状態でも、「○○.devtunnels.ms」という URL にアクセスできるようになりました。
（これについては、URL が分かれば誰でもアクセス可能な状態になったということなので、利用時はご注意ください）

## まとめ
VSCodeの「built-in port forwarding」を使うことで、ローカルでしかアクセスできなかったファイルにインターネット側からアクセスするということを、VSCode上で簡単に実行できることが確認できました。

## 【追記】 Node.js でローカルサーバーを立てて試す
[上で紹介していた公式ページ](https://code.visualstudio.com/docs/editor/port-forwarding)の手順では、ローカルサーバーを用意するのに「[Vercel が提供しているパッケージの serve](https://www.npmjs.com/package/serve)」が使われていました。
そちらも追加で、簡単に試してみます。

まず、VSCode のターミナル上で「`npx serve`」を実行します。
そうすると、以下のようにパッケージのダウンロードと処理が行われ、標準では 3000番ポートでローカルサーバーが立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/53dd5d1d-bc73-134d-65cf-b3bbdcea8308.png)

ローカルサーバーが立ち上がったら、ブラウザでアクセスができることを確認します（上記の例だと、localhost に 3000番ポートでアクセスする）。
その後、上で書いた「PORTS」タブを開いて、「Forward a Port」と書かれたボタンを押し、URL が発行されるのを確認します。
![3000番ポート用のURLが発行された状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ca3dd4eb-db3c-7faf-85dc-5f0b6edee9dd.png)

あとは、発行された「○○.devtunnels.ms」という URL にブラウザでアクセスできるのを確認してみます。

## 【追記】 公式記事の「How are forwarded ports secured?」という項目の記載
[はてなブックマークでの記事へのコメント](https://b.hatena.ne.jp/entry/s/qiita.com/youtoy/items/56e48c84d6a2f0549155)でも書かれている方がいらっしゃる、[公式の記事内の「How are forwarded ports secured?」という項目](https://code.visualstudio.com/docs/editor/port-forwarding#_how-are-forwarded-ports-secured)の内容を追記しておきます。

公式記事内で「If you're part of an organization that wants to control access to port forwarding, you can do so by allowing or denying access to the domain `global.rel.tunnels.api.visualstudio.com`.」と書かれていて、この機能のアクセスを管理したい場合は、アクセス許可／拒否するドメインとして `global.rel.tunnels.api.visualstudio.com` を使うということになるようです。
![アクセス制御](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/0dce5854-0dea-0136-b3f7-d7fb86bd0013.png)

## 【追記】 その他の余談
### ngrok に関する記事を書いている途中だった話
今回の「built-in port forwarding」を知ったタイミングで、ちょうど ngrok の無料版で新しくできるようになったドメイン・サブドメイン固定という話を試してた途中だったのですが、VSCode の新機能のほうが気になって、そちらを先に試しきっていまいましたｗ
（ngrok のほうも、記事を書く準備をしつつ試してたところだったりして、別途記事を公開できれば ← [書きかけていた記事も仕上げて公開しました](https://qiita.com/youtoy/items/8a79d6954bb37f935f1b)）

https://twitter.com/youtoy/status/1700400249179963423

### Codespaces では既に使えていた話
[Codespaces では、この機能が既に使えていたらしいです](https://qiita.com/n0bisuke/items/0d279fccd6f62db37587https://qiita.com/n0bisuke/items/0d279fccd6f62db37587)。（自分は初めて知りました）。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">ローカル版にもついたんですね！！<br>便利そうです！<br><br>最近だとCodeSpacesについてるやつ使ってましたがたまにローカルでやりたいときあるんですよね</p>&mdash; 菅原のびすけ （プロトアウト9期募集中) (@n0bisuke) <a href="https://twitter.com/n0bisuke/status/1700421538355564802?ref_src=twsrc%5Etfw">September 9, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>