Azure Static Web Apps のアプリケーション設定を構成する

アプリケーション設定には、データベース接続文字列など、変更される可能性のある構成値が保持されます。 アプリケーション設定を追加すると、アプリケーション コードを変更せずに、アプリへの構成入力を変更できます。

アプリケーション設定:

  • 静的 Web アプリのバックエンド API で、環境変数として使用できます
  • 認証構成で使用されるシークレットを格納するために使用できます
  • 保存時に暗号化される
  • ステージング環境と運用環境にコピーされる
  • 英数字、.、および _ のみ使用可能

重要

この記事で説明しているアプリケーション設定は、Azure Static Web App のバックエンド API にのみ適用されます。

フロントエンド Web アプリケーションの構築に必要な環境変数を構成するには、「ビルドの構成」を参照してください。

前提条件

  • Azure Static Web Apps アプリケーション
  • Azure CLI — コマンド ラインを使用する場合に必要です

ローカル開発用に API アプリケーション設定を構成する

Azure Static Web Apps の API では Azure Functions の機能が利用されています。これにより、アプリケーションをローカル環境で実行するときに、local.settings.json ファイルでアプリケーションの設定を定義できます。 このファイルは、構成の Values プロパティでアプリケーション設定を定義します。

Note

local.settings.json ファイルは、ローカル開発にのみ使用されます。 運用環境用のアプリケーション設定を構成するには、Azure portal を使用します。

次のサンプル local.settings.json は、DATABASE_CONNECTION_STRING の値を追加する方法を示しています。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "DATABASE_CONNECTION_STRING": "<YOUR_DATABASE_CONNECTION_STRING>"
  }
}

Values プロパティで定義されている設定は、環境変数としてコードから参照できます。 たとえば Node.js 関数では、process.env オブジェクトで使用できます。

const connectionString = process.env.DATABASE_CONNECTION_STRING;

local.settings.json ファイルは GitHub リポジトリで追跡されていません。このファイルには、データベース接続文字列などの機密情報が含まれていることが多いためです。 ローカル設定はコンピューター上に残っているため、Azure では設定を手動で構成する必要があります。

一般に、設定の構成は頻繁には行われず、ビルドのたびに行う必要はありません。

Azure で API アプリケーション設定を構成する

アプリケーション設定を構成するには、Azure portal または Azure CLI を使用します。

Azure ポータルの使用

Azure portal には、アプリケーション設定を作成、更新、および削除するためのインターフェイスが用意されています。

  1. Azure ポータルにアクセスします。

  2. 静的 Web アプリを開きます。

  3. サイドバーで [構成] を選択します。

  4. アプリケーション設定を適用する環境を選択します。 ステージング環境は pull request が生成されると自動的に作成され、pull request がマージされると、運用環境に昇格されます。 アプリケーション設定は、環境ごとに設定できます。

  5. [+ 追加] を選択して新しいアプリ設定を追加します。

    Azure Static Web Apps の構成ビュー

  6. [名前][値] を入力します。

  7. [OK] を選択します。

  8. [保存] を選択します。

Azure CLI の使用

az staticwebapp appsettings コマンドを使用して、Azure の設定を更新できます。

  • ターミナルまたはコマンド ラインで、次のコマンドを実行して、message という名前の設定を Hello world の値 で追加または更新します。 プレースホルダー <YOUR_APP_ID> は、必ず実際の値に置き換えてください。

    az staticwebapp appsettings set --name <YOUR_APP_ID> --setting-names "message=Hello world"
    

    ヒント

    複数の名前と値のペアを --setting-names に渡して、複数の設定を追加または更新できます。

Azure CLI を使用してアプリケーション設定を表示する

アプリケーション設定は、Azure CLI を使用して表示できます。

  • ターミナルまたはコマンド ラインで、次のコマンドを実行します。 プレースホルダー <YOUR_APP_ID> は、必ず実際の値に置き換えてください。

    az staticwebapp appsettings list --name <YOUR_APP_ID>
    

Azure CLI を使用してアプリケーション設定を削除する

アプリケーション設定を Azure CLI から削除できます。

  • ターミナルまたはコマンド ラインで、次のコマンドを実行して message という名前の設定を削除します。 プレースホルダー <YOUR_APP_ID> は、必ず実際の値に置き換えてください。

    az staticwebapp appsettings delete --name <YOUR_APP_ID> --setting-names "message"
    

    ヒント

    複数の設定名を --setting-names に渡して、複数の設定を削除できます。

次のステップ