👻

最近の Azure Static Web Apps CLI の更新のウォッチとお試し

Kazuki Ota

2021/06/16に公開

.NET

Azure

Blazor

Azure Static Web Apps

tech

2021 年 5 月に一般提供開始したての Azure Static Web Apps が個人的に気になってる今日この頃です。

お手軽に SPA をデプロイしつつバックエンドの API までセットでホストしてくれる点が魅力ですが、個人的に気に入ってる点がやっぱりローカルでの開発エクスペリエンスまでトータルで見てくれるという点です。それを支えるのが Azure Static Web Apps CLI です。

Azure Static Web Apps CLI 自体はまだプレビューで GitHub 上で活発に開発が行われています。

この記事を書いている時点で、8 時間前に v0.6.1 が出ていたりしています。こういう動きのあるものを見るのが個人的に好きなので楽しくウォッチしています。

さて Azure Static Web Apps CLI v0.5 が 14 日前に出てたのですが、ここでルーティングエンジンが新しくなって、過去のバージョンで若干クラウドにデプロイしたときに挙動が異なってた点などの改善がされてると思われます。

implement the routes engine (#208) 16990e8

more closely matches routing engine in Azure

apply config when running dev server #176

早速試してみよう

とりあえず試してみます。個人的に SWA (Static Web Apps) CLI だけに集中できるように使うアプリは Blazor WebAssembly で行きます。他の Vue や React でも同じノリでいけるはずです。私のマシンには .NET 6 のプレビュー版を入れているので .NET 6 のプロジェクトとかが作られます。

--run オプション

さて、SWA CLI の新機能の 1 つとして開発サーバーの起動コマンドを渡すことが出来るようになりました。--run "コマンド" というオプションを付けるだけです。.NET 6 の Blazor WebAssembly では dotnet watch でホットリロードつきで起動できるようになってるので試してみましょう。

> dotnet new blazorwasm -o HelloWasm
> cd HelloWasm
> swa start http://localhost:5000 --run "dotnet watch"

ブラウザーで SWA CLI で起動してエミュレーターの待ち受けポートの 4280 をブラウザで開いてみて編集してみたところ、以下のようにホットリロード行けました。

開発サーバー + staticwebapp.config.json

開発サーバーと staticwebapp.config.json を同時に指定することがすこし前まで出来ませんでした。なので staticwebapp.config.json を使いたかったらビルドした最終成果物のフォルダーを指定して swa start してあげる必要があったのですが、開発サーバーを指定した状態でもいけるようになりました。--swa-config-location オプションで staticwebapp.config.json のあるフォルダーを指定するだけで大丈夫です。

試しに以下のような staticwebapp.config.json を作ってみました。

staticwebapp.config.json

{
    "navigationFallback": {
        "rewrite": "/index.html"
    },
    "routes": [
        {
            "route": "/fetchdata",
            "allowedRoles": [ "authenticated" ]
        }
    ],
    "responseOverrides": {
        "401": {
            "statusCode": 302,
            "redirect": "/.auth/login/aad"
        }
    }
}

そして、以下のコマンドで実行します。今回は staticwebapp.config.json のあるフォルダーでコマンドをうってるので --swa-config-location . を指定しています。

> swa start http://localhost:5000 --run "dotnet watch" --swa-config-location .

では、認証かけた URL の /fetchdata に対してブラウザからリクエストを掛けてみましょう。クライアントサイドの画面遷移にはチェックをかけるコードを書いてないので、クライアントサイドの画面遷移で /fetchdata に遷移すると認証エラーにならない点には注意してください。あくまでサーバーサイドのチェックが行われる点に注意してください。

そうすると以下のように staticwebapp.config.json で指定したログイン画面にリダイレクトされます。ばっちり staticwebapp.config.json で設定した内容が効いてますね。

適当にサインインしてから /fetchdata を開くとするっと表示されます。完璧。

クライアントサイドの画面遷移にも認証関連のチェックを入れたい場合は前にやり方を書いたので、そちらを参照してください。
基本的には各々の SPA フレームワークのルーティング機能の画面遷移前の処理に /.auth/me エンドポイントからとってこれる認証情報をもとにチェックをするような感じになります。

まとめ

ということで、そろそろ使ってても基本的なユースケースでは困らないくらいには仕上がってきてるようには感じます。ですが、まだプレビューなので使う場合は GitHub の Issue もあわせてチェックして使うのがお勧めです。私が試した範囲では問題に当たりませんでしたが、実際に本格的に使うと踏んでしまうバグとかがあるかもしれないので。

その場合でも OSS で開発されているので Issue 立てて PR 送ってとか出来ます。興味のある人はチャレンジしてみてもいいかもしれません。

ということで Azure Static Web Apps を今後も推していこうと思います。

Microsoft (有志)Publication

Microsoft Azureをはじめとする最新技術情報をお届けします。 ※このPublicationは日本マイクロソフトまたは米Microsoft所属社員による個人の見解であり、所属する組織の公式見解ではありません。 ※Publicationに参加希望の社員は @07JP27までご連絡ください。

早速試してみよう

--run オプション

開発サーバー + staticwebapp.config.json

まとめ

Discussion