はじめに
2023年の9月に VS Code で使えるようになった機能「built-in の port forwarding」と同じようなことを、Microsoft製の CLIツール「devtunnel」で実現する、という話の記事です。
VS Code のほうの機能の話は、その 2023年の9月（※ この後に掲載している公式のポストが行われた時）に以下の記事を書いていました。、
●VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
https://qiita.com/youtoy/items/56e48c84d6a2f0549155
今回扱う機能に関する公式説明
上記の VS Code の機能について、公式の説明・ドキュメントは例えば以下があります。
●Port Forwarding
https://code.visualstudio.com/docs/debugtest/port-forwarding
ローカルサーバーの特定のポートを、インターネット側からアクセスできるようにしてくれる機能です。
今回扱う内容と似た機能のサービス
今回扱う内容と似た機能のもので、ngrok をよく見かけたり、他にも複数の似たサービスがあります。
ちなみに、この周辺の話題で自分が過去に Qiita の記事に書いたもの（ngrok的なサービスや、ngrok を使ったお試しの話）では、以下などがあります。
- 他サービス： Cloudflare関連
- ngrok を使ったお試し関連
「devtunnel」を試してみる
それでは、CLIツールの「devtunnel」を試していきます。以下が devtunnel の公式ドキュメントの一部なのですが、使い方を見てみます。
●開発トンネルのドキュメント | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/developer/dev-tunnels/
クイックスタート
以下が、公式のドキュメントのクイックスタートです。
●トンネルを作成してホストする - Microsoft dev tunnels | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/developer/dev-tunnels/get-started?tabs=macos
devtunnel のインストール
OS ごとのインストール方法が書かれていて、自分は今回は Mac で Homebrew を使ったやり方を使います。コマンドは以下です。
brew install devtunnel
ちなみに Homebrew の devtunnel のページの説明では、関連ドキュメントなどについて、こんな感じの内容が書いてあったりします。また、devtunnel の作成元は Microsoft という記載があります。
ローカルサーバーの準備
この後の流れでローカルサーバーを用意するところは、記事の上のほうで掲載していた VS Code の「Port Forwarding」のドキュメントのやり方を使います。具体的には「serve - npm」を使ったローカルサーバーの準備です。
ローカルサーバーは、以下のコマンドで用意します。
npx serve
これを実行すると、以下のようにローカルサーバーが 3000番ポートで立ち上がります。
devtunnel のコマンドでログイン
あとは上記のローカルサーバーに、インターネット側からアクセスできるようにします。そのためのコマンドは以下に書いてるものを用います。
●開発トンネル コマンド ライン リファレンス - Microsoft dev tunnels | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/developer/dev-tunnels/cli-commands
まずは、以下のコマンドでログインをします。
devtunnel user login
上記を実行すると Microsoftアカウントのログイン画面が出るので、ログインをします。
それと、 devtunnel user login のヘルプを見ると、 -g オプションをつけた以下を使うことで、GitHubアカウントを使ったログインにもできるようです。
devtunnel user login -g
ちなみに、VS Code を使った機能のほうは、自分が試した手順では GitHubアカウントが使われていました。
devtunnel user login のヘルプのキャプチャも掲載しておきます。
認証が必要な方法を試す
そして今回、ローカルサーバーにインターネット側からアクセスできるようにするためのコマンドは2つ試すのですが、そのうちの 1つは以下になります。
# ホスト システム上のポート 3000 でリッスンしているサーバーの一時的な開発トンネルをホストします。
devtunnel host -p 3000
上記を実行すると、以下のようにインターネット側からアクセスするための URL が表示されました。
上記の URL にアクセスすると、認証が必要なやり方になるので、以下のような表示が出ます。
その後は以下のような画面が出て、そこで「続行」ボタンを押せば、先ほど用意していた 3000番ポートで立ち上がったローカルサーバーにアクセスできます。
認証が不要な方法を試す
それと、認証が不要な方法も試します。具体的には、以下のコマンドです。
# 一時的な開発トンネルをホストし、匿名クライアント アクセスを有効にします。
devtunnel host -p 3000 --allow-anonymous
こちらは、先ほど出ていた認証用のログイン画面が出ません。例えば、何らか ローカルにたてたサーバーにインターネット側から HTTPリクエストを送りたいが、そのアクセス処理で認証処理が難しいという場合は、これを使う場合が出てくると思います。
URL を知っていれば誰でもアクセスできる、という状態になるので、その点はご注意ください。
なお、以下のようなコマンドで、有効期限付きのトンネルにできるようです。
# カスタム有効期限を持つ一時的な開発トンネルをホストします。
# 最小値は 1 時間 (1h)、最大値は 30 日 (30d) です。
devtunnel host -p 8000 --expiration 2d
その他のオプション
その他にもコマンドのオプションは色々あるようなので、詳細は、コマンドのヘルプや公式ドキュメントをご参照ください。
●開発トンネル コマンド ライン リファレンス - Microsoft dev tunnels | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/developer/dev-tunnels/cli-commands