演習 - Azure Functions プロジェクトを作成する

ショッピング リスト Web アプリには API が必要です。 この演習では、Azure Functions プロジェクトを使用して、API をビルドし、実行します。 その後、Visual Studio 用の Azure Functions 拡張機能を使用して、新しい関数で API を拡張します。

この演習では、次の手順を行います。

1. Web アプリを変更するための準備としてブランチを作成します。
2. Azure Functions プロジェクトを調べます。
3. HTTP GET 関数を作成します。
4. 関数のスタート コードを、製品を取得するためのロジックに置き換えます。
5. HTTP 要求を API にプロキシするように Web アプリを構成します。
6. API と Web アプリを実行します。

関数アプリを取得する

まず、API を追加して、フロントエンド アプリに接続しましょう。 Api プロジェクトには不完全な Azure Functions プロジェクトが含まれているため、ここで完了しましょう。

API ブランチを作成する

アプリに変更を加える前に、変更用の新しいブランチを作成することをお勧めします。 アプリの API を完成させるので、 Api という名前の Git で新しいブランチを作成します。

Azure Functions API を完成させる

Api プロジェクトには、Azure Functions プロジェクトと 3 つの関数が含まれています。

API には、ショッピング リストの製品を操作するためのルートがありますが、製品を取得するためのルートはありません。 次はそれを追加します。

HTTP GET 関数を作成する

1. Visual Studio で、API プロジェクトを右クリックし、[追加]、[新しい項目>を選択します。

   

2. [ 新しい項目の追加 ] ダイアログで、[ Azure 関数] を選択します。

   

3. 関数ファイルの名前として 「ProductsGet.cs 」と入力します。

4. 関数の種類として Http トリガー を選択します。

5. [承認レベル] フィールドのドロップダウン リストから [匿名] を選択します。

   

6. 追加を選択します。

製品を取得するための関数を使用して、Azure Functions アプリを拡張しました。

HTTP メソッドとルート エンドポイントを構成する

新しく作成された C# クラスの Run メソッドの最初の引数 HttpTrigger に HttpRequest 属性があることに注意してください。 この属性では、関数のアクセス レベル、リッスンする HTTP メソッド、ルート エンドポイントを定義します。

ルート エンドポイントは、既定では、null です。つまり、エンドポイントでは、FunctionName 属性の値 (ProductsGet) が使用されます。 Route プロパティを "products" に設定すると、既定の動作がオーバーライドされます。

現在、関数は製品に対する HTTP GET要求でトリガーされます。 Run メソッドは、次のコードのようになります。

[FunctionName("ProductsGet")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)] HttpRequest req,
    ILogger log)

ルート ロジックを更新する

Run メソッドの本文は、この関数が実行されたときに実行されます。

製品を取得するには、Run メソッドのロジックを更新する必要があります。 ProductData.cs ファイルには、ProductData という名前のクラスとしてデータ アクセス ロジックがあります。これは、依存関係の挿入を介して、IProductData インターフェイスとして使用できます。 このインターフェイスには、GetProducts という名前のメソッドがあります。これは、製品の一覧を非同期に返す Task<IEnumerable<Product> を返します。

ここで、関数エンドポイントを変更して製品が返されるようにします。

1. ProductsGet.csを開きます。

2. その内容を次のコードに置き換えます。

   using Microsoft.AspNetCore.Http;
   using Microsoft.AspNetCore.Mvc;
   using Microsoft.Azure.WebJobs;
   using Microsoft.Azure.WebJobs.Extensions.Http;
   using System.Threading.Tasks;
   
   namespace Api;
   
   public class ProductsGet
   {
       private readonly IProductData productData;
   
       public ProductsGet(IProductData productData)
       {
           this.productData = productData;
       }
   
       [FunctionName("ProductsGet")]
       public async Task<IActionResult> Run(
           [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = "products")] HttpRequest req)
       {
           var products = await productData.GetProducts();
           return new OkObjectResult(products);
       }
   }
   

上記の変更では、静的クラスをインスタンス クラスに変更し、 依存関係挿入フレームワークで ProductData クラスを挿入できるようにインターフェイスをコンストラクターに追加し、 最後に、呼び出されたときに製品の一覧を返すように Run 関数を構成しました。

クロスオリジン リソース共有 (CORS) をローカルで構成する

Azure Static Web Apps に発行する際、クロスオリジン リソース共有 (CORS) について心配する必要はありません。 リバース プロキシを使用して Azure 上の API と通信できるように、Azure Static Web Apps で自動的にアプリが構成されます。 しかし、ローカルで実行する場合は、Web アプリと API が通信できるように CORS を構成する必要があります。

ここで、コンピューターでの Web アプリによる API に対する HTTP 要求を許可するように、Azure Functions に指示します。

1. api プロジェクトの [プロパティ] フォルダーで launchSettings.json という名前のファイルを開きます。

   • ファイルが存在しない場合は、作成します。

2. ファイルの内容を次のように更新します。

   {
       "profiles": {
           "Api": {
               "commandName": "Project",
               "commandLineArgs": "start --cors *"
           }
       }
   }
   

API と Web アプリを実行する

次は、Web アプリと Azure Functions プロジェクトが連動していることを監視します。

1. Visual Studio で、 ShoppingList ソリューションを右クリックします。

2. [ スタートアップ プロジェクトの構成] を選択します。

3. [ 複数のスタートアップ プロジェクト ] オプションを選択します。

4. Api とクライアントをアクションとして開始するように設定し、[OK] を選択します。

5. デバッガーを起動します。

アプリに移動する

次は、アプリケーションが Azure Functions API に対してローカルに実行されていることを確認します。

Web アプリケーション (例: https://localhost:44348/) を参照します。

アプリケーションをビルドしたので、ローカルで実行すると、API に対して HTTP GET 要求が行われるようになりました。

次に、Visual Studio でデバッガーを切断して、実行中のアプリと API を停止します。

次の手順

アプリはローカルで動作しています。次の手順では、アプリと API を一緒に発行します。