【VSCode Port Forwarding】ローカルホストのサーバーに外部から簡単にアクセスしたい！

https://code.visualstudio.com/docs/editor/port-forwarding


## はじめに

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

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

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

https://laravel-news.com/expose-an-ngrok-alternative-written-in-php

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

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

## 用意するもの

- Windows + WSL (任意のOS)
- VSCode
- GitHub アカウント


## 起動方法

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

### (1) WSLでアプリを起動する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/f87b5e88-fc70-6b85-db95-ea396164476b.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/32682050-f8bc-cd5b-fb77-054fe2ea4ebf.png)  



### (2) ホスト側でポートを外部へ転送する

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/91633cee-de44-4de2-0650-90870f528b93.png)  

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/d6d4d0c7-062b-0113-9b90-515f09b36cd6.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/6d3f7036-c47e-1358-7554-8fef96234d01.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/fce11c03-59c1-956c-b986-37ad659e737b.png)

公開されたみたい。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/c124296e-4eeb-b430-c41c-c01aa34fc11f.png)



### (3) 接続したい端末でURLにアクセスする

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/73358202-1022-f764-d99d-21a75199ffd0.png" width="200"> 

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

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/f119c542-e411-e9b3-141d-ff842ba177c8.png" width="400"> 


せつぞく！！ :raised_hands:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/ffeec2f4-6f50-10cd-5869-de3f87c1bcf0.png" width="400"> 

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



## 認証が面倒くさい！

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/81ffc249-2733-dfd2-68fa-87cf76ebf0b9.png)



## 終わりに

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

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

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

https://learn.microsoft.com/ja-jp/azure/developer/dev-tunnels/security

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

> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3833190/22ad37be-a9e9-72aa-1d46-6ae523322ba3.png)
> ref: https://learn.microsoft.com/en-us/azure/azure-resource-manager/management/azure-subscription-service-limits#dev-tunnels-limits