Azure Static Web Apps を使用してデータ API を開発する
静的 Web アプリは、Web サイト設計において一般的となった概念です。 これらは、ユーザーのブラウザーに直接送信されるコンテンツから構成され、サーバー上でのコードの実行が一切必要ありません。 静的 Web アプリは、HTML と CSS で構成されます。 これらには多くの場合、JavaScript コードも含まれますが、それらはサーバー上ではなくクライアント側で実行されます。 Web 開発者にとっての静的 Web アプリの特徴は以下のとおりです。
- Bootstrap、Jekyll、AngularJS などのフレームワークを使用して迅速に開発できる。
- サーバー上での状態の変更が存在しないため、スケーリングがシンプルである。
- ユーザー インターフェイス コードとバックエンド機能の分離を促進する。
Azure Static Web Apps は、静的 Web アプリのコーディングと、運用目的での Azure へのデプロイを単純化することを目的とした Azure 内のサービスです。 Azure Static Web Apps は、GitHub または Azure DevOps 内のコード リポジトリを監視することによる継続的デプロイをサポートしています。 Web サイト コードに変更を加え、変更内容をリポジトリにプッシュすると、Azure Static Web Apps がその変更を検出し、自動的に新しいサイトをビルドして Azure へとデプロイします。 変更内容はすぐにユーザーが利用できるようになります。
データ API ビルダー (DAB) は Azure Static Web Apps とシームレスに連携するように設計されているため、このサービス内でデータベース API をホストすることは簡単です。 行う必要があるのは、構成ファイルを使用して、Azure Static Web Apps インスタンスについて DAB に通知し、それをリポジトリにデプロイすることだけです。 Azure Static Web Apps によって API がホストされ、ユーザーはそのメソッドの呼び出しを開始できるようになります。
静的 Web アプリを作成する
まずは、Azure portal に移動して [リソースの作成] を選択します。 検索バーに、「静的 Web アプリ」と入力します。 [静的 Web アプリ] カードが表示されたら、それを選択してから [作成] を選択します。
次に、サブスクリプションを選択し、既存のリソース グループを選択するか新しいものを作成します。 [名前] テキストボックスに、アプリのわかりやすい名前を入力します。 [プランの種類] を選択する必要があります。 個人用プロジェクトでは、Free プランを使用できますが、運用アプリの場合は、Standard プランが推奨されます。
[デプロイの詳細] で、アプリを含めるリポジトリの種類を指定します。 GitHub にサインインするか、Azure DevOps でリポジトリとブランチを選択する必要があります。 最後に、[確認と作成] を選択して設定を確認した後、[作成] を選択してプロセスを完了します。
データ API ビルダー構成ファイルの作成
データベース API を Azure Static Web Apps にデプロイするには、DAB 構成ファイルを正しく作成する必要があります。 このタスクは、以下の 2 つのコマンド ライン ツールを使用して実行できます。
-
swa:この CLI は、新しい DAB 構成ファイルを初期化するために使用します。 -
dab:この CLI は、1 つ以上のデータベースをファイルに追加するために使用します。
開始する前に、GitHub リポジトリをローカル コンピューターにクローンするか、GitHub Codespaces を使用して GitHub 自体の中でコマンド プロンプトを開きます。
リポジトリのルート フォルダー内の DAB 構成ファイルを初期化するには、次のコマンドを実行します。
swa db init --database-type "<database-type>"<database type>を実際のデータベース サーバーのものに置き換えます。 たとえば、データベースが Azure SQL Database 内でホストされている場合は、mssqlを使用します。 MySQL 内にある場合は、mysqlを使用します。構成ファイルにデータベースを追加するには、次のコマンドを実行します。
dab add "<database-name>" --source "<schema>.<table>" --permissions "anonymous:*" -config "swa-db-connections/staticwebapp.database.config.json"<database-name>をわかりやすい名前に置き換え、<schema>.<table>をデータベース内のスキーマとテーブルの名前に置き換えます。
これらの手順によって、リポジトリ内に swa-db-connections/staticwebapp.database.config.json という名前の構成ファイルが作成されます。 リポジトリに変更をコミットする前に、このファイルを確認してください。
データベースへの接続を構成する
静的 Web アプリでデータベースへの接続を構成するには、まず Azure portal 内で静的 Web アプリを開きます。 [設定] セクションに移動し、[データベース接続] を選択します。 [運用] で、既存のデータベースをリンクすることを選択します。 適切なデータベースの種類、リソース グループ、データベース名を選択します。 最後に、希望する認証の種類を選択し、データベースをリンクします。
注
接続文字列には認可キーが含まれていないため、システム割り当てマネージド ID またはユーザー割り当てマネージド ID を使用して認証することをお勧めします。
API へのアクセスを検証する
API へのアクセスを検証するには、まず Azure portal 内で作成した静的 Web アプリを開きます。
[基本] セクションに移動し、Web サイトを閲覧するための URL を選択します。 ブラウザーのアドレス バーで、URL に /data-api を追加して、Enter キーを押します。
DAB コンテナーが正常であることを示すページが表示されるはずです。 データベースのエンティティを参照するには、URL に /data-api/rest/ を追加します。 これにより、HTTP GET 要求が送信され、JSON 応答が表示されます。