Azure Static Web Apps CLI - 後編

Posted on

前回の記事 に続いて Static Web Apps CLI を紹介したいと思います。今回は、 API 連携とビルトイン認証/認可機構について取り上げます。

Static Web Apps CLI は活発に開発が続けられており、前回の記事以降にもかなりのアップデートがありました。私もいくつか Issue を出しましたが、開発チームが迅速に対応してくれました。OSS の運営としても健全なライブラリだと思います。

また、Azure Static Web Apps 本体の公式ドキュメントでもこの CLI についての記載が追加されています。

API 統合のエミュレート

Azure Static Web Apps には API を同一ホストに統合できる機能がありますが、これもきちんと SWA CLI でエミュレートされています。

SWA 本体の API の統合の考え方については 公式ドキュメント: API support in Azure Static Web Apps Preview with Azure Functions に任せたいと思いますが、以下のように api 等のディレクトリに Azure Functions を追加することで簡単に API を統合できます。以下の例では Node.js + TypeScript で Function App を作成していますが、現在は C# と Python もサポートしています。

SWA CLI で API も含めたビルド済のサイト一式をエミュレートするには、Function App についても事前に以下のようにビルドしておく必要があります。

cd api
npm install
npm run build

あとは以下のように SWA CLI に --api オプションで API のディレクトリを指定して実行します（ dist はフロントエンドのビルド出力先）。

swa start ./dist --api ./api

すると以下のようにフロントエンドとバックエンド API がまとめて起動します。API は内部的に Azure Functions Core Tools で自動的に起動するようになっています。

[swa] Serving static content:
[swa]     /<PROJECT DIRECTORY>/dist/
[swa]
[swa] Serving API:
[swa]     /<PROJECT DIRECTORY>/api/
[swa]
[swa] Available on:
[swa]     http://172.28.234.227:4280
[swa]     http://0.0.0.0:4280
[swa]
[swa] Azure Static Web Apps emulator started. Press CTRL+C to exit.

SWA CLI は API もプロキシ経由でアクセスできるので、API へのアクセスはフロントエンドと同じホストで問題ありません（Azure Functions Core Tools の 7071 ポートにアクセスする必要はない）。

API も dev server を起動して開発しながら SWA をエミュレートすることができます。この場合は、事前にフロントエンドとバックエンドの dev server を起動しておき、以下のコマンドで SWA を両方に紐づけます。

swa start http://localhost:3000/ --api http://localhost:7071

これで、フロントエンド / バックエンドともに HMR (Hot Module Replacement) の恩恵を受けながら開発できるという素晴らしい Developer Experience を手に入れることができます。

認証/認可のエミュレート

個人的にはこの機能が一番 SWA CLI で気に入ってます。API エミュレートの方は dev server と Azure Functions Core Tools を組み合わせればほぼ同じことができましたたが、認証/認可のエミュレートの方は代替手段がなかったためとても重宝しそうです。

Static Web App に認証/認可を追加するのは非常に簡単で、基本的には設定ファイルの routes セクションに認証させたいルートを定義するだけです。

{
  "routes": [
    {
      "route": "/admin/*",
      "allowedRoles": ["admin"]
    },
    {
      "route": "/login",
      "rewrite": "/.auth/login/github"
    }
  ]
}

この例では、 /admin 以下は認証が必要になるので、ローカル開発であっても、未認証の状態でアクセスすると以下のような画面が表示されます。

401

なお、従来は認証が必要なルートを routes.json で定義していましたが、 staticwebapp.config.json で他の構成情報と合わせて定義する形が推奨されるようになりました。詳細は、 公式ドキュメント - Configure Azure Static Web Apps を確認して下さい。

Azure Portal では、これに加えて利用する認証プロバイダー毎のユーザー招待が必要ですが、エミュレーターでは専用のモック用ユーザー登録画面から行います。たとえば、GitHub を認証プロバイダーに使う場合は以下の URL にアクセスしてモックユーザーを登録します（上記例のように /login を GitHub 認証ページにリライトしておくこともできます）。

ここでユーザー名やアプリ内のロール名などを入力するとブラウザ内に資格情報が発行されます。以下の URL から資格情報を確認できます。

一通りの機能を試せるように以下の構成のサンプルプロジェクトを GitHub 上に置きました。

ここに書いている以外の機能もいろいろ試せるようにしているので、興味がある方はぜひ Clone して試してみて下さい。