Azure Static Web Apps CLI - 前編

Posted on

Azure Static Web Apps は、いつかの GA に向けて地道な改善が続けられているようです。ここでは Microsoft Ignite などの大規模イベントをガン無視して同時期に実施された Azure Functions Live - Mar 2021 で突然アナウンスされた Static Web Apps CLI を紹介したいと思います。

Static Web Apps CLI の全体像

Static Web Apps CLI は名前の通り、Static Web Apps 用の CLI です。おおよそのことは GitHub のリポジトリ を確認すればわかるのですが、ざっと以下のような機能を持っています。

  • Static Web Apps(以下 SWA)をローカルで起動できる
  • SWA に統合した API(Azure Functions) もエミュレートできる
  • ビルトインの認証/認可機構もエミュレートできる
  • フレームワークの dev server と組み合わせて起動することも可能

ローカルではフレームワークの dev server で動作確認できたものの、いざデプロイしてみると動かなかったという経験をした人は多いのではないでしょうか。特に API や 認証機構を使うとローカルでは再現できないことが多いため、つまらないことでハマるパターン多いと思います。

SWA CLI を使うことによって、ほぼデプロイした状態と同じ挙動を確認できるので、これまで以上にデプロイ前後での差異を意識することなく開発できるようになるはずです。ちなみに、この Static Web Apps CLI(以下 SWA CLI)は OSS で開発されており、ソースコードは TypeScript で書かれています。Issue や release の管理も本体より透明性が高く、チームのスタンスにとても好感が持てます。

なお、執筆時点で SWA CLI は developer preview なのでご注意下さい。

SWA CLI の導入

SWA CLI は npm パッケージのコマンドラインツールなので、 npm か yarn で SWA CLI をグローバルインストールして使います。

npm install -g @azure/static-web-apps-cli

npx を使うとグローバルインストールせずに SWA CLI を実行することもできます。

npx @azure/static-web-apps-cli start ./dist/

エミュレーターの実行

まず Azure にデプロイした状態に近いビルド済の静的なアプリをエミュレートしてみます。SWA CLI を実行する前にアプリケーションをビルドしておきます。

なお、この記事では、 Vite を使った Vue.js 3.x を使って説明していきます。Vite が気になる方はぜひサイトを覗いてみて下さい。ビルドが非常に高速で快適に開発ができます！

yarn build

SWA としてエミュレートする場合は、フレームワークによって指定した出力ディレクトリをターゲットにして SWA CLI を実行します。Vue のアプリはデフォルトでは dist に出力されるので、以下のコマンドになります。

swa start ./dist

コマンドの出力にも表示されますが、SWA のエミュレーターは http://localhost:4280 で起動します（ポートは変更可）。dist に出力された結果で動作確認できるので、良く使う Live Server などのツール不要で動作確認ができて便利です。

dev server との併用

フレームワークの dev server を起動しながらエミュレートすることもできます。この方法だと HMR(Hot Module Replacement) で変更を反映しながら開発できます。

dev server を使う場合は、まずフレームワークで指定された開発用のコマンドで dev server を起動します。

yarn dev

Vite で実行している場合、 http://localhost:3000/ で dev server が起動するので、続けて別のターミナルから ターゲットを dev server の URL にして swa start を実行します。

$ swa start http://localhost:3000/
[ app] using app dev server at http://localhost:3000/
[ app] echo 'using app dev server at http://localhost:3000/' exited with code 0
[auth] Auth server listening on http://0.0.0.0:4242
[ swa] SWA listening on http://0.0.0.0:4280

エミュレータが http://localhost:4280 で起動しているので、ブラウザで確認すると dev server で実行したものと同じ画面が表示されるはずです。厳密には SWA が持つ機能（カスタムルートや認証など）を付加して起動する形になります。

記事が長くなりそうなので、API や認証/認可については次回に書きたいと思います。