編集

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>"
  }
}

Settings defined in the Values property can be referenced from code as environment variables. In Node.js functions, for example, they're available in the process.env object.

const connectionString = process.env.DATABASE_CONNECTION_STRING;

The local.settings.json file isn't tracked by the GitHub repository because sensitive information, like database connection strings, are often included in the file. Since the local settings remain on your machine, you need to manually configure your settings in Azure.

Generally, configuring your settings is done infrequently, and isn't required with every build.

アプリケーション設定の構成

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

Azure portal を使用する

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"

Tip

You can add or update multiple settings by passing multiple name-value pairs to --setting-names.

View application settings with the Azure CLI

In a terminal or command line, execute the following command. Make sure to replace the placeholder <YOUR_APP_ID> with your value.

az staticwebapp appsettings list --name <YOUR_APP_ID>

Delete application settings with the Azure CLI

In a terminal or command line, execute the following command to delete a setting named message. Make sure to replace the placeholder <YOUR_APP_ID> with your value.

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

Tip

Delete multiple settings by passing multiple setting names to --setting-names.

関連するコンテンツ