この演習では、ASP.NET Core の最小 API をローカルで実行し、API と基になるコードを調べます。 また、API を Azure App Service に公開します。
この演習を終了すると、次のことができるようになります。
- ドキュメント化された API をナビゲートする
- HTTP 操作のエンドポイントを決定する
- HTTP 操作の API 要件を特定する
- アプリを Azure App Service に公開する
前提条件
演習を完了するには、次がシステムにインストールされている必要があります。
- Visual Studio Code
- 最新の .NET 7.0 SDK
- Visual Studio Code 用の C# 拡張機能
- Visual Studio Code 用の Azure リソース 拡張機能
- Visual Studio Code 用の Azure App Service 拡張機能。
- アクティブなサブスクリプションが含まれる Azure アカウント。 アカウントを取得済みでない場合は、https://azure.com/free から無料評価版にサインアップできます。
この演習の推定所要時間: 30 分
API 情報
API は、次のフィールドを含むメモリ内データベースとやり取りします。
| フィールド | タイプ | Description |
|---|---|---|
id |
integer | データのキー |
name |
string | フルーツの名前 |
instock |
boolean | フルーツが在庫にあるかどうかを示します |
Swagger ドキュメントは、Swashbuckle パッケージを使用して作成されました。
注: サンプル データは、API が開始されるたびに作成されます。
Fruit API コードをダウンロードして実行する
このセクションでは、次の作業を行います。
- API コードをダウンロードする
- API をローカルで実行する
- ブラウザーで API ドキュメントを開く
タスク 1: API コードをダウンロードする
-
次のリンクを右クリックし、[名前を付けてリンク先を保存] オプションを選択します。
-
エクスプローラーを起動し、ファイルが保存された場所に移動します。
-
ファイルを独自のフォルダーに解凍します。
タスク 2: API をローカルで実行する
-
Visual Studio Code を起動して、[ファイル] を選択してから、メニュー バーの [フォルダーを開く] を選びます。
-
プロジェクト ファイルを解凍した場所に移動し、FruitAPI フォルダーを選択します。
-
[エクスプローラー] ペインのプロジェクト構造は、次のスクリーンショットのようになります。 [エクスプローラー] ペインが表示されない場合は、メニュー バーで [表示] を選択し、[エクスプローラー] を選択します。
-
ターミナルを開くには、[ターミナル] を選択して [新しいターミナル] を選択するか、キーボード ショートカットの Ctrl + Shift + ` キーを押します。
-
[ターミナル] ペインで、
dotnetコマンドを実行します。dotnet run -
[ターミナル] ペインに表示される出力の例は次のとおりです。 出力内の
Now listening on: http://localhost:5050行をメモします。 API のホストとポートを識別します。info: Microsoft.EntityFrameworkCore.Update[30100] Saved 3 entities to in-memory store. info: Microsoft.Hosting.Lifetime[14] Now listening on: http://localhost:5050 info: Microsoft.Hosting.Lifetime[0] Application started. Press Ctrl+C to shut down. info: Microsoft.Hosting.Lifetime[0] Hosting environment: Development info: Microsoft.Hosting.Lifetime[0] Content root path: <project location>
タスク 3: ブラウザーで API ドキュメントを開く
-
API を表示するには、
http://localhost:5050アドレス バーを入力するか、前に示したターミナルのNow listening on: http://localhost:5050リンクを Ctrl を押しながらクリックします。 ページに “この localhost ページが見つかりません” というメッセージが表示されます。 -
ブラウザー
/swaggerに URL を追加します。/swaggerエンドポイントは通常、Swagger API のドキュメントを見つける場所です。 Swagger ドキュメントの完全な URL は .http://localhost:5050/swaggerブラウザーが起動し、次のスクリーンショットのようなページが表示されます。
API で操作を実行する
このセクションでは、次の作業を行います。
- サンプル データに対して複数の操作を実行する
- 操作のエンドポイントとデータの要件を特定する
タスク 1: 操作を実行するGET
-
GET** 操作ボックス内の任意の場所をクリックして、[すべてのフルーツの取得] セクションで GET 操作を**展開します。
-
操作のセクションを調べて、次の表に示す情報を書き留めます。
セクション 説明 エンドポイント 操作のヘッダーに表示されます。 エンドポイントは次のように /fruitlist表示されます。 この例では、完全な URI は、http://localhost:5050/fruitlist指定したエンドポイントが追加された API のベース URL です。パラメーター この操作には必要ありません。 メディアの種類 操作が返すメディアの種類のエンコードを指定します。 例値 操作によって返されるデータのスキーマを表示します。 この操作では JSON 配列が返されることに注意してください。 -
[試してみる] ボタンを選択し、[実行] **を選択して操作を実行**します。
-
操作の [応答] セクションが新しい情報で更新されました。 以下に注意します。
- 要求 URL: 操作でアクセスされた URL。
- サーバー応答: 操作の成功コードが表示され、 応答本文 に 3 つのサンプル レコードが表示されます。
タスク 2: 操作を実行するPOST
-
POST 操作ボックス内の** 任意の場所をクリックして、[リストにフルーツを追加] セクションで POST 操作を**展開します。
-
操作のセクションを調べて、次の表に示す情報を書き留めます。
セクション 説明 エンドポイント エンドポイントは次のように /fruitlist表示されます。 この例では、完全な URI は、http://localhost:5050/fruitlist指定したエンドポイントが追加された API のベース URL です。パラメーター この操作には必要ありません。 要求本文 要求本文は、API がリストに追加するデータを想定しており、メディアの種類 application/jsonを想定しているために必要です。例値 API が受け取るデータのスキーマを表示します。 -
操作を実行するには、[試してみる ] ボタンを選択します。
-
[要求本文 ] セクションの入力ボックスの JSON を次のように置き換えます。
{ "id": 0, "name": "Pear", "instock": true }注: データベースは、データを追加するときに独自のインデックス値を割り当てます。そのため、フィールドに
id値を指定するだけで済みます。 -
操作の [応答] セクションが新しい情報で更新されました。 以下に注意します。
- 要求 URL: 操作でアクセスされた URL。
- サーバー応答: 操作の成功コードが表示され、 応答本文 にデータベースに追加されたレコードが表示されます。
-
GET[リスト*内のすべてのフルーツを取得する] **セクションでコマンドを実行し、Pear の*レコードが含まれるようになったことに注意してください。
タスク 3: 操作を実行するDELETE
-
DELETE 操作ボックス内の** 任意の場所をクリックして、[Delete fruit by Id] セクションで DELETE 操作を**展開します。
-
操作のセクションを調べて、次の表に示す情報を書き留めます。
セクション 説明 エンドポイント エンドポイントは次のように /fruitlist/{id}表示されます。 完全な URI は、指定されたid削除用に追加された API のベース URL です。 たとえば、http://localhost:5050/fruitlist/1等しいレコードidをポイントします1。パラメーター id要求 URL でレコードを渡す必要があります。 -
操作を実行するには、[試してみる ] ボタンを選択します。
-
[パラメーター]
Appleセクションのフィールドに a を1id入力し、[実行 ] を選択して、サンプル データのレコードを削除します。 -
操作の [応答] セクションが新しい情報で更新されました。 以下に注意します。
- 要求 URL: 操作でアクセスされた URL。
- 応答本文: 削除されたレコードを表示します。
- コード: 操作の成功コードを示します。
-
GET[リスト*内のすべてのフルーツを取得する] **セクションでコマンドを実行し、Apple の*レコードが削除されることに注意してください。
演習の次のセクションに進む準備ができたら、
- ブラウザーを閉じ、実行中のターミナルで Ctrl + C** キーを**押して Fruit API を停止します。
Azure App Service に Web API を発行する
このセクションでは、次の作業を行います。
- Azure リソース拡張機能を使用して Azure に接続する
- Azure アプリ Service 拡張機能を使用して API を App Service に発行する
タスク 3: Azure にサインインする
-
Azure リソース拡張機能を選択してパネルを開きます。
-
[Sign in to Azure](Azure にサインインする) を選択する
“このスクリプトでは、Azure アカウントにサインインするためのブラウザー ウィンドウが開きます。” サインイン プロセスが完了したら、このウィンドウを閉じることができます。
-
サインインが完了すると、拡張機能によってアカウントで使用可能なサブスクリプションの一覧が表示されます。 次のスクリーンショットは、ログの例を示しています。
タスク 1: Web アプリを作成する
-
Ctrl + Shift + P** キーを押してコマンド パレットを開き、「新しい Web アプリの作成」と入力して一覧をフィルター処理し、Azure アプリ サービス: [新しい Web アプリの作成]を選択します。(詳細)** オプション。
-
アカウントに複数のサブスクリプションがある場合は、デプロイに使用するサブスクリプションを選択するように求められます。
-
新しい Web アプリのグローバルに一意の名前を入力します。 試して
fruitapi-<name>、自分の名前またはイニシャルに置き換えることができます<name>。 -
[+新しいリソース グループの作成] を選択し、既定値をそのまま使用するか、「」と入力します
fruitapi-rg。 -
ランタイム スタックとして [.NET 6 (LTS)] を選択します。
-
オペレーティング システムとして「Linux」を選択します。
-
[Select a location for new resources](新しいリソースの場所を選択) の一覧で、お近くの場所を選択します。
-
[新しい App Service プランの作成] を選択し、既定値をそのまま使用するか、別の名前を入力します。
-
[Free (F1) 無料で Azure を試す] を選択します。
-
新しい Application Insights リソースを選択するよう促されたら、[今はしない] を選択します。
このツールは、Azure に必要なリソースを作成し、コードをコンパイルします。
タスク 3: Web アプリを展開し、実行中のサイトを参照する
-
リソースが作成され、コードのコンパイルが完了すると、ウィンドウがポップアップ表示され、デプロイを求めるメッセージが表示されたら、[配置 ] オプションを選択します。
システムは、コードのリリース バージョンをビルドし、先ほど作成したリソースにデプロイします。
-
デプロイが完了すると、[Web サイトの参照] オプションが表示された新しいポップアップが表示され、[Web サイト**の参照] を選択**します。
-
ブラウザーの新しいウィンドウで、URL の最後に
/swaggerと入力します。
これで、Azure App Service にアプリがデプロイされました。
注: 不要になったリソースを Azure から削除することをお勧めします。 演習のこのセクションで作成したすべてのリソースは、Azure portal で前に作成したリソース グループを削除することで削除できます。
確認
この演習では、以下の方法を学習しました。
- ドキュメント化された API をナビゲートする
- HTTP 操作のエンドポイントを決定する
- HTTP 操作の API 要件を特定する
- アプリを Azure App Service に公開する