次の方法で共有

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

重要

Static Web Apps CLI からのデプロイのセキュリティを向上させるために、2025 年 1 月 15 日までに Static Web Apps CLI の最新バージョン (2.0.2) にアップグレードする必要がある破壊的変更が導入されました。

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

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

Note

outputLocation のパスは、appLocation を基準にして指定する必要があります。

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

次のステップ

デプロイを構成する

  • Last updated on