Azure Static Web Apps でのデータベース接続の構成 (プレビュー)

[アーティクル]
05/28/2024

Azure Static Web Apps のデータベース接続は、さまざまな Azure データベースと連携します。

静的 Web アプリにデータベースを接続するときは、Azure リソースからのネットワークアクセスを許可することで、Static Web Apps worker からのネットワークアクセスを受け入れるようにデータベースのファイアウォールを構成する必要があります。特定の Static Web Apps の IP アドレスを許可することはサポートされていません。

マネージド ID 認証の種類を使用している場合は、静的 Web アプリのマネージド ID プロファイルを構成してデータベースにアクセスする必要があります。

データベースのファイアウォールとマネージド ID の構成の詳細については、次の表を参照してください。

名前	Type	ファイアウォール	マネージド ID
Azure Cosmos DB	Standard	ファイアウォールの構成	マネージド ID を構成する
Azure SQL	Standard	ファイアウォールの構成	マネージド ID を構成する
Azure Database for MySQL	Flex	ファイアウォールの構成	サポートされていません
Azure Database for PostgreSQL	Flex	ファイアウォールの構成	サポートされていません
Azure Database for PostgreSQL (単一)	単一	ファイアウォールの構成	マネージド ID を構成する

構成

データベース接続のランタイム動作は、staticwebapp.database.config.json ファイルで定義します。静的 Web アプリにデータベースをリンクする前に、リポジトリ内にこのファイルを作成する必要があります。規則により、このファイルはリポジトリのルートにある swa-db-connections フォルダーに存在しますが、必要に応じて再配置できます。

この構成ファイルの目的は、以下のとおりです。

/data-api エンドポイントのパスをデータベーステーブルまたはエンティティにマップする
REST または GraphQL エンドポイント (またはその両方) を公開する
エンティティのセキュリティ規則を定義する
開発構成の設定を制御する

GraphQL で Azure Cosmos DB を使用している場合は、gql スキーマファイルを指定する必要もあります。

Note

Static Web Apps のデータベース接続には、構成ファイルを含むフォルダーが必要です。このフォルダーには、すべてのデータベースの種類に対する staticwebapp.database.config.json 構成ファイルが含まれている必要があります。 Cosmos DB for NoSQL データベースの場合は、staticwebapp.database.schema.gql スキーマファイルも必要です。

規則により、このフォルダーには swa-db-connections の名前が付けられ、リポジトリのルートに配置されます。この規則は、custom-configuration-folder でオーバーライドできます。

サンプル構成ファイル

次のサンプル構成ファイルは、Azure SQL データベースに接続し、REST エンドポイントと GraphQL エンドポイントの両方を公開する方法を示しています。構成ファイルとそのサポートされている機能の詳細については、Data API Builder のドキュメントを参照してください。

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mssql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "dbo.MyTestPersonTable",
      "permissions": [
        {
          "actions": ["create", "read", "update", "delete"],
          "role": "anonymous"
        }
      ]
    }
  }
}

プロパティ	説明
`$schema`	Azure Static Web Apps が構成ファイルを解釈するために使用する Database API ビルダーのバージョン。
`data-source`	ターゲットデータベースに固有の構成設定。 `database-type` プロパティには、`mssql`、`postgresql`、`cosmosdb_nosql`、または `mysql` を指定できます。データベースが Static Web Apps リソースに接続されると、デプロイ時に接続文字列が上書きされます。ローカル開発時には、構成ファイルで定義されている接続文字列が、データベースへの接続に使用されます。
`runtime`	公開されているエンドポイントを定義するセクション。 `rest` と `graphql` プロパティにより、それぞれの API プロトコルへのアクセスに使用される URL フラグメントが制御されます。 `host` 構成セクションでは、開発環境に固有の設定を定義します。 `origins` 配列に localhost アドレスとポートが含まれていることを確認してください。データベースが Static Web Apps リソースに接続されると、host.mode は `production` に上書きされます。
`entities`	URL パスをデータベースエンティティとテーブルにマップするセクション。パスをセキュリティで保護するために使用されるのと同じロールベースの認証規則により、データベースエンティティもセキュリティで保護され、各エンティティのアクセス許可を定義するために使用できます。エンティティオブジェクトは、エンティティ間のリレーションシップも指定します。

構成ファイルを生成する

Static Web Apps CLI を使用すると、構成ファイルスタブを生成できます。

swa db init --database-type <YOUR_DATABASE_TYPE> を使用して、構成ファイルを生成します。既定では、CLI は、swa-db-connections という名前のフォルダーに新しい staticwebapp.database.config.json を作成します。

サポートされているデータベースの種類は以下のとおりです。

mssql
postgresql
cosmosdb_nosql
mysql

カスタム構成フォルダー

staticwebapp.database.config.json ファイルの既定のフォルダー名は swa-db-connections です。別のフォルダーを使用する場合は、ワークフローファイルを更新して、静的 Web アプリのランタイムに構成ファイルを探す場所を指示する必要があります。 data_api_location プロパティを使用すると、構成フォルダーの場所を定義できます。

Note

staticwebapp.database.config.json ファイルを保持するフォルダーは、静的 Web アプリのリポジトリのルートにある必要があります。

次のコードは、データベース構成ファイルに db-config という名前のフォルダーを使用する方法を示しています。

app_location: "/src"
api_location: "api"
output_location: "/dist"
data_api_location: "db-config" # Folder holding the staticwebapp.database.config.json file

データベース接続を構成する

データベース接続が機能するためには、Azure Static Web Apps がデータベースにネットワークアクセスできる必要があります。さらに、Azure データベースをローカル開発に使用するには、独自の IP アドレスからの要求を許可するようにデータベースを構成する必要があります。すべてのデータベースに適用される一般的な手順を次に示します。お使いのデータベースの種類での具体的な手順については、上のリンクを参照してください。

Azure portal でデータベースに移動します。
[ネットワーク] タブにアクセスします。
[ファイアウォール規則] セクションで、[クライアント IPv4 アドレスの追加] を選択します。この手順により、このデータベースをローカル開発に使用できるようになります。
[Azure サービスおよびリソースにこのサーバーへのアクセスを許可する] チェックボックスをオンにします。この手順により、デプロイされた Static Web Apps リソースがデータベースにアクセスできるようになります。
[保存] を選択します。

データベースを接続する

データベースを静的 Web アプリにリンクすると、Azure に発行されたときに Web サイトとデータベース間の運用接続が確立されます。

Azure portal で静的 Web アプリを開く
[設定] セクションで、[データベース接続] を選択します。
[運用] セクションで、[既存のデータベースのリンク] リンクを選択します。

[既存のデータベースのリンク] ウィンドウで、次の値を入力します。

プロパティ	値
データベースの種類	ドロップダウンリストからデータベースの種類を選択します。
サブスクリプション	ドロップダウンリストから Azure サブスクリプションを選択します。
リソース名	目的のデータベースが含まれているデータベースサーバー名を選択します。
データベース名	静的 Web アプリにリンクするデータベースの名前を選択します。
認証の種類	データベースに接続するために必要な接続の種類を選択します。

次のいずれかのデータベースを使用して、静的 Web アプリにデータベースを追加します。

さらに、Azure Static Web Apps でデータ API ビルダーを使用する方法についても学習します。

次の方法で共有

Azure Static Web Apps でのデータベース接続の構成 (プレビュー)

構成

サンプル構成ファイル

構成ファイルを生成する

カスタム構成フォルダー

データベース接続を構成する

データベースを接続する

フィードバック

その他のリソース

次の方法で共有

Azure Static Web Apps でのデータベース接続の構成 (プレビュー)

構成

サンプル構成ファイル

構成ファイルを生成する

カスタム構成フォルダー

データベース接続を構成する

データベースを接続する

関連するコンテンツ

フィードバック

その他のリソース