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

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

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

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

[前提条件]

このチュートリアルを完了するには、既存の Azure Database for MySQL データベースと静的 Web アプリが必要です。 さらに、Visual Studio Code をインストールする必要があります。

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

データベース接続の構成

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

1. Azure portal で Azure Database for MySQL Server フレキシブル サーバーに移動します。

2. [設定] セクションで、[ネットワーク] を選択します。

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

4. [ ファイアウォール規則 ] セクションで、[ Azure 内の任意の Azure サービスからこのサーバーへのパブリック アクセスを許可する ] チェック ボックスをオンにします。 この手順により、デプロイされた静的 Web Apps リソースがデータベースにアクセスできるようになります。

5. 保存 を選択します。

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

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

1. Azure portal で Azure Database for MySQL Server フレキシブル サーバーに移動します。

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

3. [ アプリからの接続 ] セクションで、ADO.NET 接続文字列を選択し、テキスト エディターに保存します。

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

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

6. 接続文字列の SslMode セクションと SslCa セクションは、追加の手順が必要であり、運用環境向けであるため、削除します。

サンプル データの作成

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

1. Visual Studio Code と MySQL Shell 拡張機能で、Azure MySQL フレキシブル サーバーへの接続を作成します。

2. サーバーを右クリックし、新しいデータベースを作成します。 データベース名として「 MyTestPersonDatabase 」と入力し、 utf8mb4 する文字セットと utf8mb4_0900_ai_ciの照合順序を選択します。

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

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

   CREATE TABLE MyTestPersonTable (
       Id INT AUTO_INCREMENT NOT NULL,
       Name VARCHAR(25) NULL,
       PRIMARY KEY (Id)
   );
   

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

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

6. MyTestPersonTableテーブルを右クリックし、[上位 1000] を選択して、データベースにデータがあることを確認します。

静的 Web アプリを構成する

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

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

   • バッシュ
   • PowerShell

   git checkout main
   

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

   • バッシュ
   • PowerShell

   git pull origin main
   

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

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

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

   • バッシュ
   • PowerShell

   export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
   

   <YOUR_CONNECTION_STRING>は、テキスト エディターで保存した接続文字列の値に置き換えてください。

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

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

   • バッシュ
   • PowerShell

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

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

   • バッシュ
   • PowerShell

   npm update
   

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

   • バッシュ
   • PowerShell

   swa db init --database-type mysql
   

   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": "mysql",
    "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 アプリを使用して、接続を確認できるようになりました。

ホーム ページを更新する

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 操作を実行する方法を示しています。

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

+ 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 つのレコードを一覧表示するテーブルが表示されるようになりました。

Update

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);
}

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

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

Create

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 アプリにデータベースを接続する

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

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

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

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

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

   プロパティ	価値
   データベースの種類	ドロップダウン リストからデータベースの種類を選択します。
   Subscription	ドロップダウン リストから Azure サブスクリプションを選択します。
   リソース名	目的のデータベースを含むデータベース サーバー名を選択します。
   データベース名	静的 Web アプリにリンクするデータベースの名前を選択します。
   認証の種類	[ 接続文字列] を選択し、MySQL のユーザー名とパスワードを入力します。

5. [OK] を選択.

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

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

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

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

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

   出力は、このスクリーンショットに示されている内容のようになります。

   

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

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

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

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

次のステップ