はい、M10iです。
最近よく開発でVSCodeを使っているのでVSCodeの便利機能のネタをひとつ。
ローカルで作ったWebアプリを「ちょっと動かして見せたい」ってとき、ありませんか？
例えば、変更結果をチームメンバーやクライアントに
ちょっとだけ確認してもらいたい時とか、スマホからだとどんな感じに見えるかな？など。
わざわざクラウドにデプロイするほどでもないし、ngrokみたいなツールを入れるのも面倒…。
そんなときに便利なのが、VSCode標準のポート転送機能です。
インストール不要で、手元のローカルサーバをそのまま公開URLとして共有できます。
実践！！
では、早速。
サーバ側はfastAPIで、こんな感じのコードを用意しておきます。
from fastapi import FastAPI
app = FastAPI()
@app.get("/demo")
def demo():
return {"message": "Hello from FastAPI!", "status": "ok"}
アプリをポート8000で起動しておきます。
ではVScodeに戻って、ポートタブを選択します。
ポートの転送をクリックして、ポートの追加で8000と入力。
なんとこれだけで転送アドレスが作られちゃいます！(隠してる部分はランダム英数)
初期値は公開範囲が非公開になっているので公開範囲を変更します。
※「非公開（Private）」を選んでも実際にはクラウドにトンネルは立っています。アクセスできるのは認証している自分だけですが「ローカル専用」という意味ではないので注意してください。
詳しくは→非公開（Private）の場合
公開範囲を右クリック→ポートの表示範囲→公開
これだけで全世界に！！！！ローカルアプリが公開できちゃう！(怖っ
なのでちゃんと警告でます。
ローカルサーバ側も本当は許可ipなどを設定して万全にした方がいいですね☆
では、ブラウザからアクセスしてみましょう。
サンプルコードで作ったdemoにアクセス。簡単なjsonが返るだけのコードでしたね。
※初回は確認メッセージが表示されますので続行を選択。
結果は・・・・
ちゃんと公開されたurlからばっちりローカルにアクセスできてますね。
これでわざわざデプロイしなくともちょっとだけ公開がラクにできます。
うっかりフルアクセス許可で公開しっぱなし、なんて事にならないように注意してくださいねっ
※非公開（Private）の場合
privateの場合、ポート開放したアカウントと同じIDでログインの必要があるとの事。
ではちょっとお試しにスマホからアクセスしてみましょう☆
サインインを求められるので、違うアカウントでログインします。
Authorizeを選択して許可してみたら・・・・
真っ白な画面から動きませんｗｗｗｗ
スマホが良くなかったかな？気を取り直して別のPCからアクセスして、
同じように別のアカウントでログインします。
結果は・・・・・
別のアカウントからは覗けないってことですね。確かにPrivateです。
VSCodeの「ポート転送（Port Forwarding）」機能は
2023年8月にリリースされたバージョン 1.82で追加された比較的新しい機能だそう。
いつの間にかポートタブ増えてて、何かなポートって・・・思っていた人も多いはず。
M10iも最近知ってつい嬉しくてブログ記事にしてしまいましたｗ
M10iでした、ではでは☆
参考
https://code.visualstudio.com/updates/v1_82
https://code.visualstudio.com/docs/debugtest/port-forwarding
