はじめに
先日、Azure Static Web Apps CLIという存在を知りました。2022年6月にGAになったもののようです。
これを使ってローカル開発環境を設定するという記事があったので試してみました。
サンプルアプリ
簡単なHTMLとAzure FunctionsによるAPIから構成されるアプリを動かしてみます。上記の記事ではstaticwebdev/vanilla-apiというGitHubリポジトリをforkすることが提案されていますが、今回は自分で作ってみることにしました。
といっても元ネタは、Static Web Appsのドキュメントにある以下の記事のものをなぞっただけです。
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にブラウザでアクセスすると動作確認が取れます。
swa startが動いている間は、ソースコードを修正すると自動的に読み込まれるようです。このため、HTMLファイルやAzure Functionsの関数を修正すると再度swa startコマンドを終了→起動ということはしなくても良いのが地味に嬉しい点かなと思います。
