Azure Static Web Apps CLI

はじめに

Azure Static Web Apps をローカルソースから直接デプロイする

Azure Static Web Apps は通常、Github か Azure DevOps 上のリポジトリからデプロイをすると思いますが、 Azure Static Web Apps CLI というコマンドラインツールを使ってローカルのソースを直接デプロイすることもできます。更に、ローカルで Azure 環境をエミューレートすることもできるので、開発効率上がります。

こちらのページを参考に Azure Static Web Apps CLI を使ってみました。
ここでは CLI を使って Vite + React プロジェクトを Azure の静的 Web サイトにデプロイする手順を紹介します。

前提条件

Azure に静的 Web サイトを作成済みであること
Visual Studio で作成した Vite + React プロジェクトを使用

手順

1Vite + React プロジェクトを開く

新規作成 or 既存のプロジェクトを開きます。

2Azure Static Web Apps CLI をインストール

ターミナルを開いて、以下のコマンドを実行します。
※ターミナルを開いた時、カレントディレクトリはソリューションフォルダになっているので、プロジェクトフォルダに移動

# プロジェクトルートで実行
npm install --save-dev @azure/static-web-apps-cli

3設定ファイルの作成

ターミナルで以下のコマンドを実行します。

# プロジェクトルートで実行
npx swa init

以下のように入力を求められるのでエンターキーで確定します。

npx swa init 

Welcome to Azure Static Web Apps CLI (2.0.1)

√ Choose a configuration name: ... reactapp  ★設定の名前（デフォルト値が表示されるので、そのままエンターキー）

Detected configuration for your app:
- Framework(s): Vite
- App location: reactapp
- Output location: dist
- API location:
- API language:
- API version:
- Data API location:
- App build command: npm run build
- API build command:
- App dev server command: npm run dev
- App dev server URL: http://localhost:5173

- API dev server URL:

√ Are these settings correct? ... yes ★エンターキー

Configuration successfully saved to swa-cli.config.json.

Get started with the following commands:
- Use swa start to run your app locally.
- Use swa build to build your app.
- Use swa deploy to deploy your app to Azure.

プロジェクトルート配下に swa-cli.config.json というファイルが作成されます。

// swa-cli.config.json

{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173"
    }
  }
}

4設定ファイルの編集

作成された設定ファイルに以下を追加します。

appName: 静的 Web サイトの名前
resourceGroup: リソースグループ

// swa-cli.config.json
{
  "$schema": "https://aka.ms/azure/static-web-apps-cli/schema",
  "configurations": {
    "reactapp": {
      "appLocation": ".",
      "outputLocation": "dist",
      "appBuildCommand": "npm run build",
      "run": "npm run dev",
      "appDevserverUrl": "http://localhost:5173",
      "appName": "static-web-app",
      "resourceGroup": "hoge"
    }
  }
}

5Azure へのデプロイ

ターミナルで以下のコマンドを実行してログインします。

npx swa login --no-use-keychain

ブラウザが起動してログインを求められたら Azure の認証情報を入力してログインします（「Auth code was successfully acquired. You can close this window now.」と表示されればOK）。
デフォルトブラウザで Azure にログイン済みであれば新規タブに「Auth code was successfully acquired. You can close this window now.」と表示されまる
アカウントが複数テナントに紐づいている場合はテナントの一覧が表示されるので、上下の矢印キーで選択してエンターキーを押します。

以下のような実行結果になります。

npx swa login --no-use-keychain

Welcome to Azure Static Web Apps CLI (2.0.1)

Using configuration "reactapp" from file:
  C:\hoge\ReactSample\reactapp\reactapp\swa-cli.config.json

Checking Azure session...
✔ Successfully logged into Azure!
? Choose your tenant » - Use arrow-keys. Return to submit.
>   hoge09f8-hoge-4b28-8bf4-732335a1ddfb
    3310hoge-6770-hoge-9d84-4fc7badadf0a
    hogefe8e-hoge-44c3-hoge-eb49f7d79e26
    b93choge-189f-hoge-8f05-hogeaecd41f9

次に、以下のコマンドでプロジェクトをビルドします。

npx swa build

dist フォルダにデプロイするリソースが生成されます。

ターミナルで以下のコマンドを実行してデプロイします。

アカウントが複数テナントに紐づいている場合はテナントの一覧が表示されるので、上下の矢印キーで選択してエンターキーを押します。

npx swa deploy --env production --no-use-keychain

以下のようなメッセージが表示されればOKデプロイ完了です。

Deploying to environment: production

Deploying project to Azure Static Web Apps...
√ Project deployed to https://purple-river-09bd36a00.5.azurestaticapps.net 🚀

目次