Zenn
🎃

Dev Tunnelsを使ってテナント内からのみアクセス可能なWebAppをホストする方法

に公開
Azure
development
hosting
webapp
devtunnels
tech

この記事では、Microsoft Dev Tunnelsを使用して、特定のテナント内のユーザーのみがアクセスできるWebアプリケーションをホストする方法を解説します。

前提条件

  • Windows環境（他のOSでも利用可能）
  • Microsoft Azure アカウント
  • ホストしたいWebアプリケーション

注意: この記事内で <> で囲まれているコマンドの値（例：<Tunnel ID>、<Port>）は、ご自身の環境に合わせて適切な値に置き換えてください。

作業の流れ

テナント内限定のWebAppをホストするために、以下の3ステップで作業を進めます：

環境準備

  • Dev Tunnels CLI ツールのインストール - 必要なツールを環境にセットアップ
  • ログイン - Microsoftアカウントで認証を行う

トンネルの構成

  • トンネルの作成と確認 - 新しいトンネルを作成し、設定状況を確認
  • アクセス制御の設定 - テナント内のユーザーのみがアクセスできるよう権限を設定
  • ポートの設定 - WebAppが使用するポートをトンネルに関連付け

運用開始

  • ホスティングの開始 - 実際にWebAppの公開を開始

1. Dev Tunnels CLI ツールのインストール

Microsoft Learn の公式ガイドを参考にして、Dev Tunnels CLI ツールをインストールしてください。

注意: コマンド実行時に以下のエラーが表示される場合がありますが、数回再試行することで解決することが多いです。

The SSL connection could not be established, see inner exception.

2. ログイン

以下のコマンドでMicrosoftアカウントにログインします。

devtunnel user login

実行するとブラウザダイアログが表示されるので、使用したいテナントのアカウントを選択してログインしてください。

3. トンネルの作成と確認

既存トンネルの確認

現在作成されているトンネルを確認します。

devtunnel show

新規トンネルの作成

何も表示されない場合は、新しいトンネルを作成します。

devtunnel create

作成後、再度 devtunnel show を実行して、トンネルの詳細を確認してください。

4. アクセス制御の設定

アクセス権限の確認

devtunnel show の結果で以下の項目を確認します：

  • Access control: テナントのみが表示されているか
  • Port: 使用するポートが設定されているか

テナントアクセス権限の付与

テナント内のユーザーのみがアクセスできるように設定します。

devtunnel access create <Tunnel ID> --tenant

注意: <Tunnel ID> は devtunnel show で表示されたトンネルIDに置き換えてください。

5. ポートの設定

使用するポートをトンネルに追加します。

devtunnel port create <Tunnel ID> -p <Port>

例：ポート3000を使用する場合

devtunnel port create <Tunnel ID> -p 3000

6. ホスティングの開始

設定が完了したら、トンネルをホストします。

devtunnel host <Tunnel ID>

成功すると以下のようなメッセージが表示されます：

Ready to accept connections for tunnel: <Tunnel ID の.以前の部分>

2つのリンクが表示されますが、どちらからでもアクセス可能です（違いについては詳細が不明）。

トラブルシューティング

ホスト端末以外でバックエンドデータが受信できない場合

この問題は、アプリケーション内でのパス指定が localhost になっていることが原因の可能性があります。

解決方法:

  • アプリケーション内のAPI呼び出しやリソースアクセスで localhost を使用している箇所を相対パスに変更する
  • 例：http://localhost:3000/api/data → /api/data または ./api/data

その他の一般的な問題

  • SSL接続エラー: コマンドを数回再実行する
  • 認証エラー: devtunnel user login を再実行して認証を更新する
  • ポートエラー: 指定したポートがアプリケーションで実際に使用されているか確認する

まとめ

Dev Tunnelsを使用することで、開発中のWebアプリケーションを安全にテナント内で共有できます。特に以下のような場面で有用です：

  • 社内での開発アプリのデモ
  • テスト環境での限定公開
  • クライアントへの進捗共有（同一テナント内）

設定は一度行えば、devtunnel host <Tunnel ID> コマンドだけで簡単にホスティングを開始できます。

Discussion