Azure Static Web Apps CLI を使用して静的 Web アプリをデプロイする

Azure Static Web Apps CLI (SWA CLI) には、現在のプロジェクトを Azure Static Web Apps にデプロイするための deploy コマンドが用意されています。

一般的なデプロイ シナリオには次が含まれます。

• API なしのフロントエンド アプリ
• API ありのフロントエンド アプリ
• Blazor アプリ

デプロイ トークン

SWA CLI では、CI/CD 環境でのセットアップを可能にするデプロイ トークンを使用したデプロイがサポートされています。

デプロイ トークンは、次の場所から取得できます。

• Azure portal: [ホーム] → [Static Web Apps] → <自分のインスタンス> → [概要] → [デプロイ トークンの管理]

• Azure CLI: secrets list コマンドを次のように使用します。

  az staticwebapp secrets list --name <APPLICATION_NAME> --query "properties.apiKey"
  

• Azure Static Web Apps CLI: deploy コマンドを次のように使用します。

  swa deploy --print-token
  

その後、そのトークン値を --deployment-token <TOKEN> で使うか、SWA_CLI_DEPLOYMENT_TOKEN という環境変数を作成してデプロイ トークンに設定することができます。

API なしでフロントエンド アプリをデプロイする

API なしのフロントエンド アプリケーションを Azure Static Web Apps にデプロイできます。 フロントエンド アプリケーションでビルド ステップが必要な場合は、swa build を実行するか、お使いのアプリケーションのビルド手順をご覧ください。

ニーズに最も適したオプションを選択してデプロイを構成する

• オプション 1: デプロイするビルド フォルダーから、deploy コマンドを実行します。

  cd build/
  swa deploy
  

  Note

  build フォルダーには、デプロイするアプリの静的コンテンツが含まれている必要があります。

• オプション 2: 特定のフォルダーをデプロイすることもできます。

  1. フロントエンド アプリケーションでビルド ステップが必要な場合は、swa build を実行するか、お使いのアプリケーションのビルド手順をご覧ください。

  2. アプリをデプロイします。

  swa deploy ./my-dist
  

API ありでフロントエンド アプリをデプロイする

API エンドポイントを持つアプリケーションをデプロイするには、次の手順に従います。

1. フロントエンド アプリケーションでビルド ステップが必要な場合は、swa build を実行するか、お使いのアプリケーションのビルド手順をご覧ください。

2. staticwebapp.config.json ファイルの API 言語ランタイムのバージョンが正しく設定されていることを確認します。次に例を示します。

   {
     "platform": {
       "apiRuntime": "node:16"
     }
   }
   

   Note

   プロジェクトに staticwebapp.config.json ファイルがない場合は、outputLocation フォルダーの下に追加します。

3. アプリをデプロイします。

   swa deploy ./my-dist --api-location ./api
   

Blazor アプリをデプロイする

Blazor アプリは、次の手順を使ってデプロイできます。

1. Blazor アプリをリリース モードでビルドします。

   dotnet publish -c Release -o bin/publish
   

2. プロジェクトのルートから、deploy コマンドを実行します。

   swa deploy ./bin/publish/wwwroot --api-location ./Api
   

構成ファイルを使ってデプロイする

1 つの構成エントリを持つプロジェクトで swa-cli.config.json 構成ファイルを使用している場合は、次の手順を実行してアプリケーションをデプロイできます。

参考として、1 つの構成エントリの例を次のコード スニペットに示します。

{
  "configurations": {
    "my-app": {
      "appLocation": "./",
      "apiLocation": "api",
      "outputLocation": "frontend",
      "start": {
        "outputLocation": "frontend"
      },
      "deploy": {
        "outputLocation": "frontend"
      }
    }
  }
}

1. フロントエンド アプリケーションでビルド ステップが必要な場合は、swa build を実行するか、お使いのアプリケーションのビルド手順をご覧ください。

2. アプリを展開します。

swa deploy

複数の構成エントリがある場合は、エントリ ID を指定して、使うものを指定できます。

swa deploy my-otherapp

オプション

swa deploy で使用できるオプションを次に示します。

• -a, --app-location <path>: フロントエンド アプリケーションのソース コードが含まれるフォルダー (規定は ".")
• -i, --api-location <path>: API アプリケーションのソース コードが含まれるフォルダー
• -O, --output-location <path>: フロントエンド アプリケーションのビルドされたソースが含まれるフォルダー。 パスは、--app-location に対する相対パスです (規定は ".")
• -w, --swa-config-location <swaConfigLocation>: staticwebapp.config.json ファイルが存在するディレクトリ
• -d, --deployment-token <secret>: Static Web Apps での認証に使用されるシークレット トークン
• -dr, --dry-run: 実際に実行せずにデプロイ プロセスをシミュレートします (既定値: false)
• -pt, --print-token: デプロイ トークンを出力します (規定値: false)
• --env [environment]: プロジェクトを配置するデプロイ環境の種類 (既定値: "preview")
• -S, --subscription-id <subscriptionId>: このプロジェクトで使われる Azure サブスクリプション ID (規定値: process.env.AZURE_SUBSCRIPTION_ID)
• -R, --resource-group <resourceGroupName>: このプロジェクトで使用される Azure リソース グループ
• -T, --tenant-id <tenantId>: Azure テナント ID (規定値: process.env.AZURE_TENANT_ID)
• -C, --client-id <clientId>: Azure クライアント ID
• -CS, --client-secret <clientSecret>: Azure クライアント シークレット
• -n, --app-name <appName>: Azure Static Web App のアプリケーション名
• -cc, --clear-credentials: ログインの前に、永続化されている資格情報をクリアします (規定値: false)
• -u, --use-keychain: 永続的な資格情報には、オペレーティング システムのネイティブ キーチェーンの使用を有効化します (規定値: true)
• -nu, --no-use-keychain: オペレーティング システムのネイティブ キーチェーンの使用を無効にします
• -h, --help: コマンドのヘルプを表示します

使用方法

デプロイ トークンを使ってデプロイします。

swa deploy ./dist/ --api-location ./api/ --deployment-token <TOKEN>

環境変数からのデプロイ トークンを使ってデプロイします。

SWA_CLI_DEPLOYMENT_TOKEN=123 swa deploy ./dist/ --api-location ./api/

swa-cli.config.json ファイルを使用したデプロイ

swa deploy
swa deploy myconfig

デプロイ トークンを出力します。

swa deploy --print-token

特定の環境にデプロイします。

swa deploy --env production

次のステップ