ラボ 08: Azure サービスを使用して多層ソリューションを作成する

Microsoft Azure ユーザー インターフェイス

Microsoft クラウド ツールの動的な性質を考慮すると、このトレーニング コンテンツの開発の後に発生する Azure UI の変更に気付くかもしれません。 その結果、ラボの指示とラボの手順が正しく整合しなくなる可能性があります。

Microsoft は、コミュニティから必要な変更の通知があったときに、このトレーニング コースを更新します。 ただし、クラウドの更新は頻繁に発生するため、このトレーニング コンテンツの更新の前に UI の変更に気付く可能性があります。 これが発生した場合は、その変更に適応し、ラボでは必要に応じてそれらに対応してください。

Instructions

開始する前に

ラボ環境にサインインする

次の資格情報を使用して Windows 11 仮想マシン (VM) にサインインします。

  • ユーザー名: Admin
  • パスワード: Pa55w.rd

注: 仮想ラボ環境に接続するための手順は、インストラクターから提供されます。

インストールされているアプリケーションを確認する

Windows 11 デスクトップでタスク バーを探します。 タスク バーには、このラボで使用するアプリケーションのアイコンが含まれています。

  • Microsoft Edge

課題シナリオ

この概念実証では、API の情報ソースとして、Azure で Web アプリをホストするコンテナー化されたアプリケーションを作成します。 その後、Azure API Management 機能を使用して API プロキシをビルドし、API を公開してテストします。 開発者は API に対してクエリを実行してサービスをテストし、その適用性を検証できます。

アーキテクチャの図

Azure サービスを使用した多層アプリケーションの作成を示すアーキテクチャ図。

演習 1: Docker コンテナー イメージを使用して Azure App Service リソースを作成する

タスク 1: Azure portal を開く

  1. タスク バーで、Microsoft Edge アイコンを選択します。

  2. 開いたブラウザー ウィンドウで、Azure portal (https://portal.azure.com) に移動してから、このラボで使用するアカウントでサインインします。

    注:初めて Azure portal にサインインする場合は、このポータルのツアーが表示されます。 [はじめに] を選択してツアーをスキップし、ポータルの使用を開始します。

タスク 2: httpbin コンテナー イメージと Azure App Service リソースを使用して Web アプリを作成する

  1. Azure portal で、 [リソース、サービス、ドキュメントの検索] テキスト ボックスを使用して、App Services を検索し、結果のリストで [App Services] を選択します。

  2. [App Services] ブレードで、 [+ 作成] を選択します。

  3. [Web アプリの作成] ブレードの [基本] タブで、次のアクションを実行します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします
    [リソース グループ] セクション [新規作成] を選択し、「ApiService」と入力してから、[OK] を選択します
    [名前] テキスト ボックス 「httpapi [ご自分の名前]」と入力します
    [公開] セクション 「コンテナー」を選択します。
    [オペレーティング システム] セクション [Linux] を選択します
    [リージョン] ドロップダウン リスト Azure Web アプリをデプロイできる Azure リージョンを選択します
    [Linux プラン] セクション [新規作成] を選択し、[名前] テキスト ボックスに「ApiPlan」の値を入力して、[OK] を選択します
    [価格プラン] セクション [価格プランを確認する] を選択し、[App Service 価格プランの選択] ページで [Basic B1] を選択して、[選択] を選択します

  4. [次へ: データベース >] を選択します。

  5. [次へ: コンテナー>] を選択します。

  6. [Docker] タブで、次のアクションを実行し、 [確認と作成] を選択します。

    設定 アクション
    [イメージのソース] ドロップダウン リスト [Docker Hub またはその他のレジストリ] を選択します。
    [オプション] ドロップダウン リスト [単一コンテナー] を選択します
    [アクセスの種類] ドロップダウン リスト [Public] を選択します
    [イメージとタグ] テキスト ボックス 「kennethreitz/httpbin:latest」と入力します

  7. [確認と作成] タブで、前の手順で選択したオプションを確認します。

  8. [作成] を選択し、指定した構成を使用して Web アプリを作成します。

    注: 作成タスクが完了するのを待ってから、このラボを続行してください。

タスク 3: httpbin Web アプリケーションをテストする

  1. Azure portal で、 [リソース、サービス、ドキュメントの検索] テキスト ボックスを使用して、App Services を検索し、結果のリストで [App Services] を選択します。

  2. [App Services] ブレードで、新しく作成した Web アプリを選択します。

  3. 新しく作成されたアプリのプロパティが表示されているブレードで、 [参照] を選択します。

  4. Web アプリケーション内で、次のアクションを実行します。

    a. [応答形式] を選択します。

    b. [GET /html] を選択します。

    c. [試してみる] を選択します。

    次のスクリーンショットは、Web アプリケーションの [試してみる] セクションを示しています。

    httpbin.org API ページの [GET /html] の [試してみる] セクション

    d. [実行] を選択します。

    e. [応答本文] テキスト ボックスと [応答ヘッダー] テキスト ボックスの値を確認します。

    f. [要求 URL] テキスト ボックスの値を確認します。

  5. Web アプリケーション内で、次のアクションを実行します。

    a. [動的データ] を選択します。

    b. [GET /bytes/{n}] を選択します。

    c. [試してみる] を選択します。

    d. [n] テキスト ボックスに、「25」と入力します。

    e. [実行] を選択します。

    f. [応答本文] テキスト ボックスと [応答ヘッダー] テキスト ボックスの値を確認します。

    g. [ファイルのダウンロード] を選択し、ファイルのダウンロード後に、そのファイルをメモ帳で開き、その内容を確認してから閉じます。

    注: ファイルには、ランダムに生成されたバイト列が含まれています。

    次のスクリーンショットは、Web アプリケーションの [動的データ] セクションを示しています。

    httpbin.org API ページの [GET /bytes/{n}] の [動的データ] セクション

  6. Web アプリケーション内で、次のアクションを実行します。

    a. [状態コード] を選択します。

    b. [GET /status/{codes}] を選択します。

    c. [試してみる] を選択します。

    d. [コード] テキスト ボックスに、「404」と入力します。

    e. [実行] を選択します。

    f. [サーバーの応答] を確認し、 [エラー: 見つかりません] というエントリが含まれていることに注意してください。

  7. Web アプリケーションが表示されているブラウザー ウィンドウを閉じます。

  8. httpapi [yourname] Web アプリが表示されているブラウザー ウィンドウに戻ります。

  9. [App Service の概要] ブレードの [要点] で、 [既定のドメイン] リンクの値を記録します。 この値は、ラボの後半で対応する API に要求を送信するために使用します。

確認

この演習では、Docker Hub からソース化されたコンテナー イメージを使用して、新しい Azure Web アプリを作成しました。

演習 2: Azure API Management を使用して API プロキシ層を構築する

タスク 1: API Management リソースを作成する

  1. Azure portal で、[リソース、サービス、ドキュメントの検索] テキスト ボックスを使用して、「API Management サービス」を検索し、結果のリストで [API Management サービス] を選択します。

  2. [API Management サービス] ブレードで、 [+ 作成] を選択します。

  3. [API Management ゲートウェイのインストール] ブレードで、次のアクションを実行してから、 [確認と作成] を選択します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします。
    [リソース グループ] セクション ラボで前に作成した [ApiService] グループを選択します
    [リージョン] リスト 前の演習で選択したものと同じリージョンを選択します
    [リソース名] テキスト ボックス 「proapi [ご自分の名前]」と入力します
    [組織名] テキスト ボックス 「Contoso」と入力します
    [管理者のメール アドレス] テキスト ボックス 「admin@contoso.com」と入力します
    [価格レベル] ドロップダウン リスト 消費 (99.95% SLA)

    次のスクリーンショットは、Web アプリケーションの [API Management の作成] ブレードの設定を示しています。

    [API Management の作成] ブレード

  4. [確認と作成] タブで、前のステップで指定したオプションを確認してから、 [作成] を選択します。

    注: 作成タスクが完了するのを待ってから、このラボを続行してください。

  5. [デプロイ概要] ブレードで、 [リソースに移動] を選択します。

タスク 2: 新しい API を定義する

  1. [API Management サービス] ブレードの [API] セクションで、 [API] を選択します。

  2. Define a new API セクションで、 [HTTP] を選択します。

  3. [HTTP API の作成] ウィンドウで、次のアクションを実行し、 [作成] を選択します。

    設定 アクション
    [表示名] テキスト ボックス 「HTTPBin API」と入力します
    [名前] テキスト ボックス 「httpbin-api」と入力します
    [Web サービスの URL] テキスト ボックス このラボで前にコピーした Web アプリの URL を入力します。 注: URL が https:// プレフィックスで始まっていることをご確認ください
    [API URL サフィックス] テキスト ボックス 空のままにします

    次のスクリーンショットは、Web アプリケーションの Create a blank API ウィンドウの構成済みの設定を示しています。

    [Create a blank API](空の API の作成) ペイン

    注: 新しい API の作成が完了するまで待ちます。

  4. [デザイン] タブで、 [+ 操作の追加] を選択します。

  5. [操作の追加] セクションで、次のアクションを実行してから、 [保存] を選択します。

    設定 アクション
    [表示名] テキスト ボックス 「Echo Headers」と入力します
    [名前] テキスト ボックス その値が echo-headers に設定されていることを確認します
    [URL] リスト [GET] を選択します
    [URL] テキスト ボックス 「/」と入力します

    次のスクリーンショットは、 [操作の追加] セクションの構成済みの設定を示しています。

    Echo Headers の追加操作のプロパティ

  6. [デザイン] タブに戻り、操作のリストで [Echo Headers] を選択します。

  7. [デザイン] セクションの [受信処理] タイルで、 [+ ポリシーの追加] を選択します。

  8. Add inbound policy セクションで、 Set headers タイルを選択します。

  9. Set Headers セクションで、次のアクションを実行してから、 [保存] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「source」と入力します
    [値] テキスト ボックス リストを選択し、[値の追加] を選択してから、「azure-api-mgmt」と入力します
    [アクション] リスト [追加] を選択します

    次のスクリーンショットは、 [デザイン] セクションの構成済みの設定を示しています。

    Echo Headers の [デザイン] ペイン

  10. [デザイン] タブに戻り、操作のリストで [Echo Headers] を選択します。

  11. Echo Headers の [デザイン] セクションの [バックエンド] タイルで、鉛筆アイコンを選択します。

  12. [バックエンド] セクションで、次のアクションを実行してから、 [保存] を選択します。

    設定 アクション
    [サービス URL] セクション [オーバーライド] チェック ボックスをオンにします
    [サービス URL] テキスト ボックス 値 /headers を現在の値に付加します。 注:たとえば、現在の値が https://httpapi[yourname].azurewebsites.net の場合は、新しい値が https://httpapi[yourname].azurewebsites.net/headers になります

  13. [デザイン] タブに戻り、操作のリストで [Echo Headers] を選択してから、 [テスト] タブを選択します。

  14. [Echo Headers] セクションで、 [送信] を選択します。

    次のスクリーンショットは、 [Echo Headers] セクションの構成済みの設定を示しています。

    [Echo Headers のテスト] タブ

  15. API 要求の結果を確認します。

    注: 応答でエコーが発生する要求の一部として送信されるヘッダーが多数あることを確認してください。 これには、このタスクの一部として作成した新しい Source ヘッダーが含まれているはずです。

    次のスクリーンショットは、Echo Headers 要求に対する応答を示しています。

    Echo Headers のテスト要求に対する応答

  16. [デザイン] タブを選択して、操作のリストに戻ります。

タスク 3: API 応答を操作する

  1. [デザイン] タブで、 [+ 操作の追加] を選択します。

  2. [操作の追加] セクションで、次のアクションを実行してから、 [保存] を選択します。

    設定 アクション
    [表示名] テキスト ボックス 「Get Legacy Data」と入力します
    [名前] テキスト ボックス その値が get-legacy-data に設定されていることを確認します
    [URL] リスト その値が GET に設定されていることを確認します
    [URL] テキスト ボックス 「/xml」と入力します

  3. [デザイン] タブに戻り、操作のリストで [Get Legacy Data] を選択します。

  4. [テスト] タブを選択してから、 [送信] を選択します。

  5. API 要求の結果を確認します。

    注: この時点で、結果は XML 形式であるはずです。

    次のスクリーンショットは、API 要求の結果を示しています。

    Get Legacy Data 要求に対する応答

  6. [デザイン] タブを選択してから、 [Get Legacy Data] を選択します。

  7. [デザイン] ペインの [送信処理] セクションで、 [ポリシーの追加] を選択します。

    次のスクリーンショットは、 [送信処理] セクションを示しています。

    Get Legacy Data 操作の送信処理セクション

  8. Add outbound policy セクションで、 [その他のポリシー] タイルを選択します。

  9. ポリシー コード エディターで、XML コンテンツの次のブロックを探します。

     <outbound>
     <base />
 </outbound>

  10. XML のそのブロックを次の XML に置き換えます。

     <outbound>
     <base />
     <xml-to-json kind="direct" apply="always" consider-accept-header="false" />
 </outbound>

  11. ポリシー コード エディターで、 [保存] を選択します。

  12. [デザイン] タブに戻り、操作のリストで [Get Legacy Data] を選択してから、 [テスト] を選択します。

  13. [Get Legacy Data] セクションで、 [送信] を選択します。

  14. API 要求の結果を確認します。

    注: 新しい結果は、JavaScript Object Notation (JSON) 形式になります。

  15. [HTTP 応答] セクションで、次のアクションを実行します。

    1. [トレース] を選択します。

    2. メッセージが表示されたら、[Enable tracing for one hour](トレースを 1 時間有効にする) を選択します。

    3. [トレース] タブを選択し、[バックエンド] テキスト ボックスと [送信] テキスト ボックスの内容を確認して、対応する API 操作の詳細とそのタイミング情報が含まれている点に注意してください。

タスク 4: API 要求を操作する

  1. [デザイン] タブで、 [+ 操作の追加] を選択します。

  2. [操作の追加] セクションで、次のアクションを実行してから、 [保存] を選択します。

    設定 アクション
    [表示名] テキスト ボックス 「Modify Status Code」と入力します
    [名前] テキスト ボックス その値が modify-status-code に設定されていることを確認します
    [URL] リスト [GET] を選択します
    [URL] テキスト ボックス 「/status/404」と入力します

  3. [デザイン] タブに戻り、操作のリストで [Modify Status Code] を選択します。

  4. [デザイン] セクションの [受信処理] タイルで、 [+ ポリシーの追加] を選択します。

  5. Add inbound policy セクションで、 [URL の書き換え] タイルを選択します。

  6. [URL の書き換え] セクションで、次のアクションを実行します。

    a. [バックエンド] テキスト ボックスに、「/status/200」と入力します。

    b. [保存] を選択します。

  7. [デザイン] タブに戻り、操作のリストで [Modify Status Code] を選択してから、 [テスト] タブを選択します。

  8. [Modify Status Code] セクションで、 [送信] を選択します。

  9. API 要求の結果を確認します。

    注: 要求から「HTTP/1.1 200 OK」応答が返されたことを確認してくださ。

確認

この演習では、App Service リソースと API に対してクエリを実行する開発者の間にプロキシ層を構築しました。