開発中の Blazor アプリを、手元のスマホでちゃちゃっと動作確認したいとき

## 開発トンネルを使えば、スマホからインターネット経由で開発中のアプリにアクセスできる

開発中の Blazor アプリケーションを、手元のスマホ実機で動作確認したいときがあります。

もっとも、レイアウトの確認などの程度であれば、デスクトップ向け各種 Web ブラウザでも、開発者ツールからデバイスエミュレーションを使って動作確認可能です。

とはいえ、さっさと実機で動作確認したほうが早かったり、どうしても実機じゃないと動作確認が難しいブラウザ API を使っていたりする場合もあります。

そのようなときに取り得る選択肢として、Windows 上で Visual Studio を使って開発をしている場合は、Visual Studio の "開発トンネル" (Dev Tunnels) という機能を使う方法があります。開発トンネルを使うと、localhost で待ち受けしている Blazor アプリケーションへの HTTP 通信を、一時的にインターネットに中継・公開することが可能になります。もう少し説明すると、開発トンネルを使っての実行を Visual Studio 上で指示すると、公開用のユニークな URL がインターネット上に発行され、その URL を (インターネットにアクセスできる) スマホのブラウザで開くと、そのインターネット上の URL への HTTP 要求が、localhost で稼働中の Blazor アプリケーションに中継される、という動きになります。"開発トンネル" というトンネルをくぐって、インターネットから localhost にアクセスできる、そういう仕組みです。

なお、開発トンネルの利用にあたっては、GitHub アカウントか、Microsoft アカウントのいずれかが必要になりますのでご注意ください。

## 開発トンネルの利用手順の実際

実際の開発トンネルの利用手順は以下のとおりです。

### 開発トンネルの作成と有効化

まず Visual Studio を起動して、対象の Blazor アプリケーションプロジェクトを開きます。

続けて、デバッグ実行のツールボタン横のドロップダウンリストを開き、[Dev Tunnels] の項目を確認します。まだいちども開発トンネルの機能を使ったことがなければ、下図のように表示されますので、下図赤丸の [トンネルを作成(C)...] を選択します。もしも既に開発トンネルを作ったことがあれば、作成した開発トンネルの名前がここに並んでいるはずですので、新たに開発トンネルを作成せずに、その既存の開発トンネル名をクリックして選択することでも構いません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/5904dff7-e526-fe50-9fc8-a7a08e7e79d8.png)

[トンネルを作成(C)...] をクリックした場合は、新しいトンネルの作成ダイアログが開きます。ここでは、以下の設定を指定します。

- トンネル作成に使用する GitHub アカウントか Microsoft アカウントを指定
- Visual Studio 上での作業において個々のトンネルを区別できるよう、トンネルの名前を指定 (下図では "default" というトンネル名を指定しています)、
- トンネルの URL の有効期限を選択 (下図では、Visual Studio を起動しなおすたびに新しい URL が発行される "一時的" を選択しています)、
- 公開されたトンネルの URL にアクセスしたときに認証を求めるかどうかを選択 (下図では、認証不要でアクセスできる "公開用" を選択しています)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/c634c8f7-e116-3680-4e06-17ad69c5a597.png)

以上をひととおり指定したら [OK] をクリックします。

すると、"開発トンネル" (Dev Tunnel) が新たに 1 つ作成できたこと、および、この Blazor アプリケーションプロジェクトの実行において、この開発トンネルが使われるよう設定されたことが、メッセージ表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/60456ba9-808f-efd5-0ab9-3bb1104e27af.png)

### 開発トンネルのアクティブ状況の確認と実行

改めて Visual Studio 上で、デバッグ実行のツールボタン横ドロップダウンリストを開いて確認すると、下図のように確かに、先ほど作成した開発トンネル "default" が選択されてアクティブになっていることがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/fedfd5a3-2711-33de-4156-60e2c7e5fbbc.png)

この状態で、Ctrl + F5、またはデバッグなし実行のツールボタンをクリックして、この Blazor アプリケーションを実行してみましょう (※もちろん、デバッグ実行しても構わないです)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/7236541d-dda1-03b1-e7af-f2b2bae2fad8.png)

しばし待たされたあと、ブラウザが起動して、開発トンネルに発行された URL が開きます。開発トンネル作成時に、[アクセス] で [非公開] を選択していた場合は、自身の GitHub アカウントか Microsoft アカウントでの認証が求められるので、適宜認証を済ませます。

なお、初回アクセス時は、本当にアクセスしてよいか確認のメッセージが表示されます。もちろん今回は、自分で作成した開発トンネルへのアクセスであることは間違いないので、[Continue] をクリックして続行します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/d56b2025-e299-ccde-0997-5ec3567f20d1.png)

すると、localhost で待ち受けしているはずの、開発中の Blazor アプリケーションが、インターネットに公開された URL でアクセスできるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/6e89a5ce-db87-08a9-6dc3-416760e33e1b.png)

### スマホからインターネット経由でアクセスする

あとは、何らかの手段にて、この開発トンネルの公開 URL をスマホのブラウザで開けば目的を達成です。昨今の Web ブラウザは、今開いているページの URL を QR コードで共有する機能もありますので、それを利用してスマホで開いてもいいかもしれませんね (下図は Microsoft Edge ブラウザで、ページをマウスで右クリックして、メニューから QR コードを生成したところ)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/fc60c808-5e6e-b053-e861-9a521a4e097c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/1db61073-8d68-a849-1807-2661772d59e0.png)

### 開発トンネルの非アクティブ化

開発トンネル経由での実行を終えるには、今一度、デバッグ実行のツールボタン横ドロップダウンリストを開き、[開発トンネル] の項目から [なし] をクリックしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58450/be07bdd5-a156-beb3-1289-0fd68d4fb802.png)


## おわりに

### 振り返りと注意点

以上、Windows 上で Visual Studio を使用している場合は、開発トンネルの機能を利用することで、開発中の Blazor アプリケーションを、インターネット上の URL 経由でアクセスできるようになります。手元のスマホからもこの開発トンネルの URL 経由でアクセスできるので、手軽に動作確認ができます。もっとも、ローカル開発環境で稼働中のプログラムへの、インターネット経由での侵入・アクセスを許すことになりますから、セキュリティ的な観点からの注意は必要です。なお、開発トンネルを開設する際の指定で、アクセスを非公開とすれば、自分の GitHub アカウントないしは Microsoft アカウントでのみアクセス可とするよう保護することもできるので、一定の安全性は確保できます。

### Visual Studio は使っていない・Windows ではない場合

Visual Studio を使っていない場合は、Visual Studio Code にも同じ機能がありますので、そちらを使うとよいでしょう。また、この開発トンネルの機能の本体は、そもそもは Microsoft のパブリッククラウドサービスである Microsoft Azure の 1 サービスであるようで、そちらからも、開発トンネルの作成やアクティブ化、その他管理を行なう devtunnels という CLI ツールも提供されているようです。devtunnels CLI を用いれば、任意の環境で開発トンネルが利用できそうですね。もちろん、Windows に限らず、macOS や Linux 各種ディストリビューションからも利用可能な模様です。

### 他の手段と比べて

開発トンネルや類似の方法 (ngrok など) を使用する以外にも、スマホを開発 PC と同じ LAN 内に接続して、開発中の Blazor アプリケーションは localhost ではなくホスト名または外部 IP アドレスで待ち受けるように設定して、開発 PC の OS のファイヤーウォールの設定を調整して... といった方法でも、開発中の Blazor アプリケーションをスマホ実機で確認することは可能ではあります。しかし、いまここで書いている手順からしてなかなかに面倒ですよね。

その点、利用にあたっては一定の注意は必要であるものの、開発トンネルの機能を知っておけば、開発中の Blazor アプリケーションの実機での確認がぐっと気楽に、カジュアルにできるようになるのではないか、と思われます。上手に活用していきましょう。