Static Web Apps (SWA) CLI が GA し開発体験がさらに向上！

Posted on

Static Web Apps のリリース 1 周年のタイミングで、これまでプレビューとして提供されていた Static Web Apps CLI (以下 SWA CLI) が GA になりました。これまでも SWA のローカル開発エミュレーターとして便利に使っていましたが、GA により一気に機能が増えエミュレーターにとどまらずローカル開発環境といえる機能がラインナップされています。機能の詳細は 公式ドキュメントサイト に任せるとして、この記事では最低限おさえておけばよい典型的な使い方を試しながら紹介していきたいと思います。

セットアップ

SWA CLI 自体は基本的には npm でグローバルインストールします。

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

個人的には Node.js のバージョンマネージャである Volta を使って SWA CLI をインストールするようにしています。Node.js の環境ごとにツールを変えたい方にはおすすめです。

volta install @azure/static-web-apps-cli

SWA CLI を使うにはフロントエンドのプロジェクトが存在するディレクトリでコマンドを実行していきます。例としてここでは Vue.js のプロジェクトを作成しておくようにしてみます。

npm init vue

ちなみに最近の Vue.js ではプロジェクトの新規作成には Vue CLI ではなく、上記のように create-vue を使うことが推奨されています。

swa init

SWA CLI を便利に使うために swa init という初期化コマンドが追加されました、アプリケーションが存在するプロジェクトディレクトリで以下を実行します。

swa init

Detected configuration for your app:
- Framework(s): Vue.js, Vite
- App location: .
- Output location: dist
- API location:
- App build command: npm run build
- API build command:
- App dev server command: npm run dev
- App dev server URL: http://localhost:3000

アプリケーション構成が自動判別され（上記の場合は Vite ベースの Vue.js と判別されている）、結果として swa-cli.config.json が生成されます。swa init の実行は必須ではありませんが、SWA CLI の各種コマンドを実行する際にこの JSON があった方が便利になります。

ビルド

swa build

これも今回追加されたコマンドです。通常フロントエンドのビルドはそれぞれのフレームワークが指定する npm のコマンドを実行しますが、swa build を使うとフレームワークに影響されずに同一のコマンドでビルドができます。

swa build

これは、Vue.js の場合は npm run build を実行したのと同じ結果になります（dist 以下にデプロイ用のファイルが生成される）。

swa start

このコマンドはプレビューの時から存在していたものなので知っている方も多いと思います。ローカルで Static Web App 上のアプリケーションをエミュレートするコマンドです。

swa start

今回のように swa-cli.config.json を作っておくと、swa start に何もオプションをつけなくても適切にアプリケーションの実行ファイルの場所を識別してくれるようになります。もちろん各種オプションを付けることで dev server を起動したり API を同時に実行したりすることもできます。

たとえば、HMR(Hot Module Replacement) を効かせて dev server を動かしながら開発するなら以下コマンドを実行します（Vue.js の場合）。

swa start http://localhost:3000 -r "npm run dev"

デプロイ

今回の最大のアップデートと言ってもいいのが、デプロイのサポートではないでしょうか。これまで Static Web App にデプロイするには、GitHub などを使った CI/CD を経由する必要がありました。それはそれで DevOps を推進する観点ではでは良いのですが、開発の初期段階でローカル環境から試しにデプロイしたい場合などには少し手間がかかっていたことも事実です。今回 CLI でのデプロイがサポートされたことでローカル環境から直接 Azure にデプロイすることができるようになり選択肢が増えたのは良いことです。

swa login

デプロイする前にまず Azure にログインしておく必要があります。従来通り Azure CLI を使ってログインすることもできますが、以下を実行することで SWA CLI 単独で Azure へのログインがサポートされています。

swa login

コマンドから指示されるようにブラウザで Azure へのログインが完了すると、Azure AD の テナント ID やサブスクリプションを選択するように促され、ログインが完了すると以下のように Azure への接続に必要な環境変数が登録された .env ファイルが生成されます。

AZURE_SUBSCRIPTION_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx
AZURE_TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx

これで Static Web App をデプロイする Azure のテナントとサブスクリプションを特定できるようになりました。

swa deploy

ここまで紹介した方法では swa-cli.config.json が作成されているので以下のようにオプション無しの swa deploy コマンドで Azure 上に Static Web App のインスタンスを新規作成することができます。

swa deploy

? Choose your Static Web App › - Use arrow-keys. Return to submit.
❯   >> Create a new application
✔ Choose your Static Web App › >> Create a new application
✔ Choose a project name: … swa-cli-vue
✔ Project created successfully!
✔ Successfully setup project!

Deploying to environment: preview

Deploying project to Azure Static Web Apps...
Could not find StaticSitesClient local binary
[swa] ✔ Downloading https://swalocaldeploy.azureedge.net/downloads/1.0.019361/macOS/StaticSitesClient@1.0.019361
✔ Project deployed to https://green-tree-0665d221e-preview.westus2.1.azurestaticapps.net 🚀

上記のように初回の実行時には StaticSitesClient local binary がインストールされます。これがローカルから Azure にデプロイするためのツールになっているようです。

デプロイ先はプロダクションではなく preview という名前のプレビュー環境にデプロイされます（環境変数 SWA_CLI_DEPLOY_ENV で変更可能）。リージョンはデフォルトで West US 2 になるので、変更したい場合はデプロイコマンドを実行する前に環境変数 AZURE_REGION_LOCATION で変更しておきましょう。

リソース名やリソースグループ名も、デフォルトでは自動生成されてしまうので、名称を自分で指定したい場合は、swa-cli.config.json であらかじめ以下のようの設定しておきます。

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "swa-cli-vue": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:3000",
      "appName": "stapp-xxx",
      "resourceGroupName": "rg-xxx"
    }
  }
}

SWA CLI を使うことで開発中に Azure ポータルや GitHub を行ったり来たりする必要がなくなりました。Azure にあまり慣れていない方や開発の初期段階ではコードに集中したいという方にはぜひおすすめしたいと思います。

また、SWA CLI は完全に OSS として開発されており、ドキュメントサイトも含めて OSS の流儀に従って運用されている点も個人的にとても気に入ってます。メンテナーの @manekinekko 氏にはとても感謝をしています。