はじめに

先日、Azure Static Web Apps CLIという存在を知りました。2022年6月にGAになったもののようです。

azure.microsoft.com

これを使ってローカル開発環境を設定するという記事があったので試してみました。

learn.microsoft.com

サンプルアプリ

簡単なHTMLとAzure FunctionsによるAPIから構成されるアプリを動かしてみます。上記の記事ではstaticwebdev/vanilla-apiというGitHub リポジトリをforkすることが提案されていますが、今回は自分で作ってみることにしました。

github.com

といっても元ネタは、Static Web Appsのドキュメントにある以下の記事のものをなぞっただけです。

learn.microsoft.com

CLIのインストールと実行

CLIのインストールは、npm install -g @azure/static-web-apps-cliを実行すればインストールされました。今回試したところ、swaコマンドのバージョンは1.0.3が返ってきました。

その後、swa initコマンドを実行します。これにより、フォルダ内の中身をみてswa-cli.config.jsonというファイルが自動生成されます。中身は以下のようなもの。

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "azure-static-web-apps-local": {
      "appLocation": "src",
      "apiLocation": "api",
      "outputLocation": ".",
      "apiBuildCommand": "npm run build --if-present"
    }
  }
}

ドキュメントにはswa initコマンドの実行は書かれていませんが、その場合はのちに実行するswa startのオプションにて似たような情報を与える必要があります。

あとはswa startコマンドを実行するだけ...と思っていたのですが、どうもうまく動きません。自分はapiフォルダに移動して一度func startでAPIだけを起動した後にswa startコマンドを実行するとうまく動くようになりました。Azure Functionsのローカル開発環境では、初回起動時にかなり時間がかかるのでその影響があるのかもしれません。

うまく動いたら、localhost:4280にブラウザでアクセスすると動作確認が取れます。