Azure Functions を使用して API をビルドする

完了

次に、ショッピング リスト アプリ用の API を作成します。

Azure Functions (アジュール ファンクションズ)

Azure Static Web Apps の最大の利点の 1 つは、Web アプリと Azure Functions で構築された API を一緒にホストすることです。 Azure Static Web Apps を使用すると、Web アプリの静的資産をグローバルに配布し、Azure Functions で API をホストすることができます。 この設定により、Web アプリ資産のグローバルな配布によって得られる可用性と速度を実現できます。

何を所有しないかも重要です。

フロントエンドまたはバックエンドが構成および保守するための完全なサーバーは必要ありません。 Azure Static Web Apps を使用すると、最小限の構成とメンテナンスでアプリと API を簡単に発行できます。

Azure Functions によってルート エンドポイントが提供されるので、構成または保守するための完全なバックエンド サーバーは必要ありません。需要に基づく自動的なスケールアウトおよびスケールインが提供されます。 これらの機能により、Azure Functions は、静的資産を提供するショッピング リスト Web アプリの優れた API パートナーになります。

Azure Static Web Apps を使用すると、サイトの一意の URL を生成できます。これは、ポータルの [概要] タブにあります。 API は、URL に /api を追加することで、この同じ URL を介して使用できます。

ショッピング リスト API

ユーザーはショッピング リスト アプリを使用して、リストから項目を取得、追加、更新、削除できます。 そのため、API にはこれらのニーズに一致するエンドポイントが必要です。

作成する 4 つのエンドポイントを次に示します。

メソッド	ルート エンドポイント	完全な API エンドポイント
取得する	products	api/products
投稿	products	api/products
配置する	products/:id	api/products/:id
削除	products/:id	api/products/:id

HTTP GET 要求が api/productsにルーティングされていることに注意してください。 API プレフィックスは、アプリ内の API エンドポイント用に予約されています。 サイトのニーズに合わせて他のルートを定義できますが、 API は常に Azure Functions アプリを指します。

Web アプリ用の API を作成する

ここまでは、フロントエンド フレームワークを使用してきました。 すぐに API を追加し、それをフロントエンド アプリに接続できます。 リポジトリには、不完全な Azure Functions プロジェクトと、製品の PUT、POST、DELETE 用の HTTP エンドポイントを含む api-starter フォルダーがあります。 API には HTTP GET 関数がありません。 Azure Functions プロジェクトの API を完了し、不足している関数を追加します。 次に、API をフロントエンド Web アプリに接続します。

Web アプリへの変更のプレビュー

アプリに変更を加える前に、変更用の新しいブランチを作成することをお勧めします。 アプリの API を完了するためにいくつかの変更を加えているため、これらの変更用のブランチを作成する必要があります。

変更を行った後、変更をマージすることを決定する前に、それらの変更が実行されていることを確認する必要があります。 新しいブランチから メイン ブランチへのプル要求を作成すると、GitHub アクションによってアプリと API がビルドされ、プレビュー URL にデプロイされます。 この機能を使用すると、Web アプリを Azure Static Web Apps で実行したままにできますが、pull request からの結果を含む 2 つ目のプレビュー インスタンスも表示されます。

Web アプリと API の間の通信

Azure Functions を使用してローカルで API を実行すると、既定でポート 7071 で実行されます。 Web アプリは別のローカル ポートで実行されています。 Web アプリがポートから API のポート 7071 への HTTP 要求を行おうとすると、要求はクロスオリジン リソース共有 (CORS) と呼ばれます。 API サーバーによって要求の続行が許可されない限り、ブラウザーではその HTTP 要求が完了されません。

Azure Static Web Apps に発行するときに、CORS について心配する必要はありません。 リバース プロキシを使用して Azure 上の API と通信できるように、Azure Static Web Apps で自動的にアプリが構成されます。 リバース プロキシを使用すると、Web アプリと API を同じ Web ドメインのものであるかのように見せることができます。 そのため、ローカルで実行する場合にのみ CORS を設定する必要があります。

次のステップ

これで、API を作成し、ショッピング リスト アプリの HTTP エンドポイントを構成する準備が整いました。