Azure Static Web Apps (プレビュー) のアプリケーション設定を構成するConfigure application settings for Azure Static Web Apps Preview

アプリケーション設定には、データベース接続文字列など、変更される可能性のある値の構成設定が保持されます。Application settings hold configuration settings for values that may change, such as database connection strings. アプリケーション設定を追加すると、アプリケーション コードを変更せずに、アプリへの構成入力を変更できます。Adding application settings allows you to modify the configuration input to your app, without having to change application code.

アプリケーション設定は次のようになります。Application settings are:

  • 保存時に暗号化されるEncrypted at rest
  • ステージング環境と運用環境にコピーされるCopied to staging and production environments

アプリケーション設定は、環境変数と呼ばれることもあります。Application settings are also sometimes referred to as environment variables.

重要

この記事で説明しているアプリケーション設定は、Azure Static Web App のバックエンド API にのみ適用されます。The application settings described in this article only apply to the backend API of an Azure Static Web App.

フロントエンド Web アプリケーションでの環境変数の使用については、JavaScript フレームワークまたは静的サイト ジェネレーターのドキュメントを参照してください。For information on using environment variables with your frontend web application, see the docs for your JavaScript framework or Static site generator.

前提条件Prerequisites

  • Azure Static Web Apps アプリケーションAn Azure Static Web Apps application
  • Azure CLIAzure CLI

アプリケーション設定の種類Types of application settings

Azure Static Web Apps アプリケーションには、通常、2 つの側面があります。There are typically two aspects to an Azure Static Web Apps application. 1 つ目は、Web アプリケーション、すなわち HTML、CSS、JavaScript、およびイメージで表される静的コンテンツです。The first is the web application, or static content, which is represented by HTML, CSS, JavaScript, and images. 2 つ目は、Azure Functions アプリケーションの機能を使用するバックエンド API です。The second is the back-end API, which is powered by an Azure Functions application.

この記事では、Azure Functions でバックエンド API のアプリケーション設定を管理する方法について説明します。This article demonstrates how to manage application settings for the back-end API in Azure Functions.

この記事で説明しているアプリケーション設定は、静的 Web アプリケーションでは使用および参照できません。The application settings described in this article cannot be used or referenced in static web applications. ただし、多くのフロントエンド フレームワークおよび静的サイト ジェネレーターでは、開発時に環境変数を使用できます。However, many front-end frameworks and static site generators allow the use of environment variables during development. これらの変数は、ビルド時に、生成された HTML または JavaScript で値に置き換えられます。At build time, these variables are replaced by their values in the generated HTML or JavaScript. HTML および JavaScript のデータはサイト訪問者が簡単に検出できるため、フロントエンド アプリケーションには機密情報を入れないようにしてください。Since data in HTML and JavaScript is easily discoverable by site visitor, you want to avoid putting sensitive information in the front-end application. 機密データを保持する設定は、アプリケーションの API 部分に配置することをお勧めします。Settings that hold sensitive data are best located in the API portion of your application.

JavaScript フレームワークまたはライブラリで環境変数を使用する方法の詳細については、次の記事を参照してください。For information about how to use environment variables with your JavaScript framework or library, refer to the following articles for more detail.

リンクされた JavaScript フレームワークとライブラリJavaScript frameworks and libraries

静的サイト ジェネレーターStatic site generators

API アプリケーション設定About API App settings

Azure Static Web Apps の API は Azure Functions の機能を利用しています。これにより、local.settings.json ファイルでアプリケーション設定を定義できます。APIs in Azure Static Web Apps are powered by Azure Functions, which allows you to define application settings in the local.settings.json file. このファイルは、構成の Values プロパティでアプリケーション設定を定義します。This file defines application settings in the Values property of the configuration.

次のサンプル local.settings.json は、DATABASE_CONNECTION_STRING の値を追加する方法を示しています。The following sample local.settings.json shows how to add a value for the DATABASE_CONNECTION_STRING.

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

Values プロパティに定義された設定は、process.env オブジェクトから使用できる環境変数としてコードから参照できます。Settings defined in the Values property can be referenced from code as environment variables, available from the process.env object.

const connectionString = process.env.DATABASE_CONNECTION_STRING;

local.settings.json ファイルは GitHub リポジトリで追跡されていません。このファイルには、データベース接続文字列などの機密情報が含まれていることが多いためです。The local.settings.json file is not tracked by the GitHub repository because sensitive information, like database connection strings, are often included in the file. ローカル設定はマシン上に残っているため、設定を手動で Azure にアップロードする必要があります。Since the local settings remain on your machine, you need to manually upload your settings to Azure.

一般に、設定のアップロードは頻繁には行われず、毎回のビルドで必要となるわけではありません。Generally, uploading your settings is done infrequently, and isn't required with every build.

アプリケーション設定のアップロードUploading application settings

アプリケーション設定を構成するには、Azure portal または Azure CLI を使用します。You can configure application settings via the Azure portal or with the Azure CLI.

Azure ポータルの使用Using the Azure portal

Azure portal には、アプリケーション設定を作成、更新、および削除するためのインターフェイスが用意されています。The Azure portal provides an interface for creating, updating and deleting application settings.

  1. Azure Portal に移動します。Navigate to the Azure portal.

  2. 検索バーで Static Web Apps を検索して選択します。In the search bar, search for and select Static Web Apps.

  3. サイドバーの [構成] オプションをクリックします。Click on the Configuration option in the sidebar.

  4. アプリケーション設定を適用する環境を選択します。Select the environment that you want to apply the application settings to. ステージング環境は pull request が生成されると自動的に作成され、pull request がマージされると、運用環境に昇格されます。Staging environments are automatically created when a pull request is generated, and are promoted into production once the pull request is merged. アプリケーション設定は、環境ごとに設定できます。You can set application settings per environment.

  5. [追加] ボタンをクリックして、新しいアプリケーション設定を追加します。Click on the Add Button to add a new app setting.

    Azure Static Web Apps の構成ビュー

  6. [名前][値] を入力します。Enter a Name and Value.

  7. [OK] をクリックします。Click OK.

  8. [保存] をクリックします。Click Save.

Azure CLI の使用Using the Azure CLI

az rest コマンドを使用すると、設定を Azure に一括アップロードできます。You can use the az rest command to do bulk uploads of your settings to Azure. このコマンドは、properties という親プロパティで JSON オブジェクトとしてアプリケーション設定を受け入れます。The command accepts application settings as JSON objects in a parent property called properties.

適切な値を使用して JSON ファイルを作成する方法として最も簡単なのは、local.settings.json ファイルの変更バージョンを作成することです。The easiest way to create a JSON file with the appropriate values is to create a modified version of your local.settings.json file.

  1. 機密データを含む新しいファイルが公開されないようにするには、 .gitignore ファイルに次のエントリを追加します。To ensure your new file with sensitive data isn't exposed publicly, add the following entry into your .gitignore file.

    local.settings*.json
    
  2. 次に、local.settings.json ファイルのコピーを作成して、local.settings.properties.json という名前を付けます。Next, make a copy of your local.settings.json file and name it local.settings.properties.json.

  3. この新しいファイル内で、アプリケーション設定を除く他のすべてのデータをファイルから削除し、名前を Values から properties に変更します。Inside the new file, remove all other data from the file except for the application settings and rename Values to properties.

    これで、ファイルは次の例のようになります。Your file should now look similar to the following example:

    {
      "properties": {
        "DATABASE_CONNECTION_STRING": "<YOUR_DATABASE_CONNECTION_STRING>"
      }
    }
    

Azure CLI コマンドには、アップロードを実行するために、アカウントに固有の多数の値が必要です。The Azure CLI command requires a number of values specific to your account to run the upload. Static Web Apps リソースの [Overview](概要) ウィンドウから、次の情報にアクセスできます。From the Overview window of your Static Web Apps resource, you have access to the following information:

  1. 静的サイトの名前Static site name
  2. リソース グループ名Resource group name
  3. サブスクリプション IDSubscription ID

Azure Static Web Apps の概要

  1. ターミナルまたはコマンド ラインから、次のコマンドを実行します。From a terminal or command line, execute the following command. <YOUR_STATIC_SITE_NAME><YOUR_RESOURCE_GROUP_NAME>、および <YOUR_SUBSCRIPTION_ID> のプレースホルダーは、必ず [Overview](概要) ウィンドウの値に置き換えてください。Make sure to replace the placeholders of <YOUR_STATIC_SITE_NAME>, <YOUR_RESOURCE_GROUP_NAME>, and <YOUR_SUBSCRIPTION_ID> with your values from the Overview window.

    az rest --method put --headers "Content-Type=application/json" --uri "/subscriptions/<YOUR_SUBSCRIPTION_ID>/resourceGroups/<YOUR_RESOURCE_GROUP_NAME>/providers/Microsoft.Web/staticSites/<YOUR_STATIC_SITE_NAME>/config/functionappsettings?api-version=2019-12-01-preview" --body @local.settings.properties.json
    

重要

"local.settings.properties.json" ファイルは、このコマンドを実行するのと同じディレクトリに置かれている必要があります。The "local.settings.properties.json" file must be in the same directory where this command is run. このファイルには任意の名前を付けることができます。This file can be named anything you like. この名前は重要ではありません。The name is not significant.

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

アプリケーション設定は、Azure CLI を使用して表示できます。Application settings are available to view through the Azure CLI.

  • ターミナルまたはコマンド ラインから、次のコマンドを実行します。From a terminal or command line, execute the following command. <YOUR_SUBSCRIPTION_ID><YOUR_RESOURCE_GROUP_NAME><YOUR_STATIC_SITE_NAME> のプレースホルダーは必ず、実際の値に置き換えてください。Make sure to replace the placeholders <YOUR_SUBSCRIPTION_ID>, <YOUR_RESOURCE_GROUP_NAME>, <YOUR_STATIC_SITE_NAME> with your values.

    az rest --method post --uri "/subscriptions/<YOUR_SUBSCRIPTION_ID>/resourceGroups/<YOUR_RESOURCE_GROUP_NAME>/providers/Microsoft.Web/staticSites/<YOUR_STATIC_SITE_NAME>/listFunctionAppSettings?api-version=2019-12-01-preview"
    

次のステップNext steps