チュートリアル: Azure Static Web Apps で PostgreSQL データベース接続を追加する (プレビュー)

このチュートリアルでは、Azure Database for PostgreSQL 単一サーバーまたはフレキシブル サーバー データベースを静的 Web アプリに接続する方法について説明します。 構成しておくと、組み込みの /data-api エンドポイントに対して REST または GraphQL 要求を行うことで、バックエンド コードを記述しなくてもデータを操作できます。

わかりやすくするために、このチュートリアルでは、ローカル開発の目的で Azure データベースを使用する方法について説明しますが、ローカル開発のニーズにローカル データベース サーバーを使用することもできます。

このチュートリアルで学習する内容は次のとおりです。

前提条件

このチュートリアルを完了するには、既存の Azure Database for PostgreSQL フレキシブル サーバーまたは単一サーバーと静的 Web アプリが必要です。 さらに、Visual Studio Code をインストールする必要があります。

まず、Azure Static Web Apps データベース接続機能を使用するようにデータベースを構成します。

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

データベース接続を機能させるには、Azure Static Web Apps がデータベースにネットワーク アクセスできる必要があります。 さらに、Azure データベースをローカル開発に使用するには、独自の IP アドレスからの要求を許可するようにデータベースを構成する必要があります。

1. Azure portal で Azure Database for PostgreSQL サーバーに移動します。

2. Azure Database for PostgreSQL フレキシブル サーバーを使用している場合は、[設定] セクションで [ネットワーク] を選択します。 Azure Database for PostgreSQL 単一サーバーを使用している場合は、[設定] セクションで [接続のセキュリティ] を選択します。

3. ファイアウォール規則 セクションで、Add your current client IP address(現在のクライアント IP アドレスの追加) ボタンを選択します。 この手順により、このデータベースをローカル開発に使用できるようになります。

4. [ファイアウォール規則] セクションで [Azure 内の任意の Azure サービスにこのサーバーへのパブリック アクセスを許可する] チェックボックスをオンにします。 Azure Database for PostgreSQL 単一サーバーを使用している場合、このトグルのラベルは [Azure サービスへのアクセスを許可する] になります。 この手順により、デプロイされた Static Web Apps リソースがデータベースにアクセスできるようになります。

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

ローカル開発用のデータベース接続文字列を取得する

Azure データベースをローカル開発に使用するには、データベースの接続文字列を取得する必要があります。 ローカル データベースを開発目的で使用する予定の場合は、この手順を省略できます。

1. Azure portal で Azure Database for PostgreSQL サーバーに移動します。

2. [設定] セクションで、[接続文字列] を選択します。

3. [ADO.NET] ボックスから接続文字列をコピーし、テキスト エディターに貼り付けておきます。

4. 接続文字列の {your_password} プレースホルダーをパスワードに置き換えます。

5. {your_database} プレースホルダーをデータベース名 MyTestPersonDatabase に置き換えます。 後の手順で MyTestPersonDatabase を作成します。

6. この接続文字列をローカル開発に使用するために、接続文字列に Trust Server Certificate=True; を追加します。

サンプル データの作成

サンプル テーブルを作成し、チュートリアルと一致するサンプル データを使用してシード処理します。 このチュートリアルでは Visual Studio Code を使用しますが、PgAdmin やその他のツールを使用できます。

1. Visual Studio Code で、 Azure Database for PostgreSQL Server への接続を作成します

2. サーバーを右クリックし、[新しいクエリ] を選択します。 次のクエリを実行して、MyTestPersonDatabase という名前のデータベースを作成します。

   CREATE DATABASE "MyTestPersonDatabase";
   

3. サーバーを右クリックし、[最新の情報に更新] を選択します。

4. MyTestPersonDatabase を右クリックし、[新しいクエリ] を選択します。 次のクエリを実行して、MyTestPersonTable という名前の新しいテーブルを作成します。

   CREATE TABLE "MyTestPersonTable" (
       "Id" SERIAL PRIMARY KEY,
       "Name" VARCHAR(25) NULL
   );
   

5. 次のクエリを実行して、MyTestPersonTable テーブルにデータを追加します。

   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Sunny');
   
   INSERT INTO "MyTestPersonTable" ("Name")
   VALUES ('Dheeraj');
   

静的 Web アプリを構成する

このチュートリアルの残りの部分では、ローカルでデータベース接続を使用するように静的 Web アプリのソース コードを編集することに重点を置いています。

1. main ブランチに切り替えます。

   • Bash
   • PowerShell

   git checkout main
   

2. git pull を使用して、ローカル バージョンを GitHub 上のものと同期します。

   • Bash
   • PowerShell

   git pull origin main
   

データベース構成ファイルを作成する

次に、静的 Web アプリがデータベースとのインターフェイスに使用する構成ファイルを作成します。

1. ターミナルを開き、接続文字列を保持する新しい変数を作成します。 具体的な構文は、使用しているシェルの種類によって異なる場合があります。

   • Bash
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   <YOUR_CONNECTION_STRING> を、テキスト エディターに貼り付けておいた接続文字列の値に置き換えてください。

2. npm を使用して、Static Web Apps CLI をインストールまたは更新します。 ご自分の状況に最も適したコマンドを選択します。

   インストールするには、npm install を使用します。

   npm install -g @azure/static-web-apps-cli
   

   npm install -g @azure/static-web-apps-cli
   

   更新するには、npm update を使用します。

   npm update
   

   npm update
   

3. swa db init コマンドを使用して、データベース構成ファイルを生成します。

   • Bash
   • PowerShell

   swa db init --database-type postgresql
   

   init コマンドは、swa-db-connections フォルダーに staticwebapp.database.config.json ファイルを作成します。

4. このサンプルを、生成した staticwebapp.database.config.json ファイルに貼り付けます。

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "postgresql",
    "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": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

次の手順に進む前に、構成ファイルのさまざまな側面について説明する次の表を確認してください。 構成ファイルと、項目レベルのセキュリティに関するリレーションシップやポリシーなどの機能の詳細な説明については、Data API Builder のドキュメントを参照してください。

静的 Web アプリがデータベースに接続するように構成されたので、接続を確認できるようになりました。

ホーム ページの更新

index.html ファイル内の body タグ間のマークアップを、次の HTML に置き換えます。

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

ローカルでアプリケーションを起動する

Web サイトを実行し、データベース内のデータを直接操作することができるようになりました。

1. データベース構成を使用して静的 Web アプリを起動します。

   swa start --data-api-location swa-db-connections
   

CLI が開始されたので、staticwebapp.database.config.json ファイルに定義されたエンドポイントを介してデータベースにアクセスできます。

データを操作する

フレームワークに依存しない次のコマンドは、データベースに対して完全な CRUD 操作を実行する方法を示しています。

各関数の出力がブラウザーのコンソール ウィンドウに表示されます。

CMD/CTRL + 、SHIFT + I キーの順に押下し、開発者ツールを開き、[コンソール] タブを選択します。

すべての項目を一覧表示する

index.html 内の script タグ間に次のコードを追加します。

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

ページを更新し、[一覧表示] ボタンを選択します。

ブラウザーのコンソール ウィンドウに、データベース内のすべてのレコードを一覧表示するテーブルが表示されるようになりました。

ブラウザーに表示される内容のスクリーンショットを次に示します。

ID で取得する

index.html 内の script タグ間に次のコードを追加します。

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

ページを更新し、[取得] ボタンを選択します。

ブラウザーのコンソール ウィンドウに、データベースから要求された 1 つのレコードを一覧表示するテーブルが表示されるようになりました。

更新プログラム

index.html 内の script タグ間に次のコードを追加します。

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

ページを更新し、[更新] ボタンを選択します。

ブラウザーのコンソール ウィンドウに、更新されたデータを示すテーブルが表示されるようになりました。

作成

index.html 内の script タグ間に次のコードを追加します。

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

ページを更新し、[作成] ボタンを選択します。

ブラウザーのコンソール ウィンドウに、データベース内の新しいレコードを示すテーブルが表示されるようになりました。

削除

index.html 内の script タグ間に次のコードを追加します。

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

ページを更新し、[削除] ボタンを選択します。

ブラウザーのコンソール ウィンドウに、削除要求からの応答を示すテーブルが表示されるようになりました。

削除されたレコード: 3

ローカルでサイトを操作したので、Azure にデプロイできるようになりました。

サイトのデプロイ

このサイトを運用環境にデプロイするには、構成ファイルをコミットし、変更をサーバーにプッシュするだけです。

1. 追跡するファイルの変更を追加します。

   git add .
   

2. 構成の変更をコミットします。

   git commit -am "Add database configuration"
   

3. 変更をサーバーにプッシュします。

   git push origin main
   

静的 Web アプリにデータベースを接続する

サイトの Static Web Apps インスタンスとデータベースの間の接続を作成するには、次の手順に従います。

1. Azure portal で静的 Web アプリを開く

2. [設定] セクションで、[データベース接続] を選択します。

3. [運用] セクションで、[既存のデータベースのリンク] リンクを選択します。

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

   プロパティ	価値
   データベースの種類	ドロップダウン リストからデータベースの種類を選択します。
   サブスクリプション	ドロップダウン リストから Azure サブスクリプションを選択します。
   リソース名	目的のデータベースを含むデータベース サーバー名を選択します。
   データベース名	静的 Web アプリにリンクするデータベースの名前を選択します。
   認証の種類	[接続文字列] を選択しPostgreSQL のユーザー名とパスワードを入力します。 PostgreSQL 単一サーバーの場合は、@servername サフィックスを含めないでください。

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

データベースが Static Web Apps リソースに接続されていることを確認する

静的 Web アプリにデータベースを接続し、サイトの構築が完了したら、次の手順に従ってデータベース接続を確認します。

1. Azure portal で静的 Web アプリを開く

2. [要点] セクションで、Static Web Apps リソースの [URL] を選択して、静的 Web アプリに移動します。

3. [一覧表示] ボタンを選択して、すべての項目を一覧表示します。

   出力は、こちらのスクリーンショットのようになります。

   

リソースをクリーンアップする

このチュートリアルで作成したリソースを削除する場合は、データベースのリンクを解除し、サンプル データを削除する必要があります。

1. データベースのリンク解除: Azure portal で静的 Web アプリを開きます。 [設定] セクションで、[データベース接続] を選択します。 リンクされたデータベースの横で、[詳細の表示] を選択します。 [データベース接続の詳細] ウィンドウで、[リンク解除] ボタンを選択します。

2. サンプル データの削除: データベースで、MyTestPersonTable という名前のテーブルを削除します。

次のステップ