Visual Studio で Blazor Web Assembly と Azure Functions をマルチスタートアップで起動する

方法は以下を参考にしてください。

www.gunshi.info
コンソールから CLI を立ち上げる

以下コマンドで起動できます。

swa start http://localhost:5030 --api-location http://localhost:7071 --verbose

この時指定する二つのポートですが、最初の 5030 が Blazor Web Assembly のポートで、7071 が Azure Functions のポートとなりますが、Blazor Web Assembly の方は実は https と http で起動していることが手順1.で開くコンソールでわかります。

このうち、http の方を指定しないとエラーとなりますので注意が必要です。起動が成功すると成功すると、以下のようなメッセージがコンソールに表示されます。
```
 [swa] - Waiting for http://localhost:7071 to be ready
 [swa] √ http://localhost:7071 validated successfully
 [swa]
 [swa] Using dev server for static content:
 [swa]   http://localhost:5030
 [swa]
 [swa] Using dev server for API:
 [swa]   http://localhost:7071
 [swa]
 [swa] Azure Static Web Apps emulator started at http://localhost:4280. Press CTRL+C to exit.
 [swa]
 [swa]
```
表示されている http://localhost:4280 にブラウザでアクセスすると、Azure Static Web Apps にデプロイされた風のエミュレータが起動します。
認証を試してみる。

ブラウザで、http://localhost:4280/.auth/login/aad にアクセスしてみます。そうすると以下のような画面に遷移します。

この画面で認証を通すユーザーを作ってそのままログインするイメージです。Login ボタンを押すと、Web アプリケーションに戻ります。ここで、http://localhost:4280/.auth/me にアクセスしてみると、以下のような json を取得できます。
```
 {"clientPrincipal":{"userId":"1fbf62934cb3d4d0493fdf8025a0c42b","userRoles":["anonymous","authenticated"],"identityProvider":"aad","userDetails":"aaaaaa","claims":[]}}
```
ログインしたユーザーやロールを識別したりできるわけです。なお、http://localhost:4280/.auth/logout にアクセスするとログアウトとなり、http://localhost:4280/.auth/me にアクセスしても、
```
 {"clientPrincipal":null}
```
という返答を受け取ることになります。

まとめ

これでローカル開発環境で Azure Static Web Apps の認証と認可を試すことができるようになります。便利ですね！

実はかつて Blazor Web Assembly の記事を量産していた頃にこの Azure Static Web Apps CLI は試していたはずなのですが、記事にするのをすっかり忘れていたようで、再度一から調べなおすことになってしまいました。いやぁ、やっぱり記事にしてアウトプットしておくというのは非常に大事ですねぇ。みんなも忘れないようにレッツアウトプット！ですよ！