次の方法で共有

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

  • [アーティクル]

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

一般的な展開シナリオは次のとおりです。

  • API を使用しないフロントエンド アプリ
  • API を使用したフロントエンド アプリ
  • Blazor アプリ

デプロイ トークン

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

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

  • Azure portal: ホーム →静的 Web アプリ → インスタンス →の概要 → デプロイ トークンの管理

  • 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

次のステップ

デプロイを構成する