Azure Functions で HTTP エンドポイントをカスタマイズするCustomize an HTTP endpoint in Azure Functions

この記事では、Azure Functions を使用して高度にスケーラブルな API を作成する方法について説明します。In this article, you learn how Azure Functions allows you to build highly scalable APIs. Azure Functions には、組み込みの HTTP トリガーとバインドのコレクションが含まれており、作成者は Node.js、C# などのさまざまな言語で簡単にエンドポイントを作成できます。Azure Functions comes with a collection of built-in HTTP triggers and bindings, which make it easy to author an endpoint in a variety of languages, including Node.js, C#, and more. この記事では、HTTP トリガーをカスタマイズして API の設計で特定の操作を処理します。In this article, you will customize an HTTP trigger to handle specific actions in your API design. また、Azure Functions Proxies と統合してモック API をセットアップすることで、お使いの API を拡張する準備を行います。You will also prepare for growing your API by integrating it with Azure Functions Proxies and setting up mock APIs. これらの処理はすべて Functions のサーバーレス コンピューティング環境上で行われるため、リソースのスケーリングを考慮する必要はなく、API のロジックに集中できます。All of this is accomplished on top of the Functions serverless compute environment, so you don't have to worry about scaling resources - you can just focus on your API logic.

前提条件Prerequisites

このトピックでは、「Azure Portal で初めての関数を作成する」で作成したリソースを使用して作業を開始します。This topic uses as its starting point the resources created in Create your first function from the Azure portal. リソースの作成が済んでいない場合は、作成手順に従って Function App をすぐに作成してください。If you haven't already done so, please complete these steps now to create your function app.

ここで作成する関数は、この記事の残りの箇所で使用します。The resulting function will be used for the rest of this article.

Azure へのサインインSign in to Azure

Azure portal を開きます。Open the Azure portal. これを行うには、Azure アカウントで https://portal.azure.com にサインインします。To do this, sign in to https://portal.azure.com with your Azure account.

HTTP 関数のカスタマイズCustomize your HTTP function

既定では、HTTP によってトリガーされる関数は任意の HTTP メソッドを受け入れるように構成されます。By default, your HTTP-triggered function is configured to accept any HTTP method. また、フォームの既定の URL は次のとおりです: http://<yourapp>.azurewebsites.net/api/<funcname>?code=<functionkey>There is also a default URL of the form http://<yourapp>.azurewebsites.net/api/<funcname>?code=<functionkey>. クイックスタートの手順に従っている場合、<funcname> にはおそらく "HttpTriggerJS1" のように表示されています。If you followed the quickstart, then <funcname> probably looks something like "HttpTriggerJS1". このセクションでは、/api/hello ルートに対する GET 要求にのみ応答するように関数を変更します。In this section, you will modify the function to respond only to GET requests against /api/hello route instead.

  1. Azure Portal で関数に移動します。Navigate to your function in the Azure portal. 左側のナビゲーションで、 [統合] を選択します。Select Integrate in the left navigation.

    HTTP 関数のカスタマイズ

  2. 次の表で指定されている HTTP トリガーの設定を使用します。Use the HTTP trigger settings as specified in the table.

    フィールドField 値の例Sample value 説明Description
    [許可されている HTTP メソッド]Allowed HTTP methods 選択したメソッドSelected methods この関数の呼び出しに使用する HTTP メソッドを決定しますDetermines what HTTP methods may be used to invoke this function
    [選択した HTTP メソッド]Selected HTTP methods GETGET この関数の呼び出しには、選択した HTTP メソッドのみが使用できますAllows only selected HTTP methods to be used to invoke this function
    [ルート テンプレート]Route template /hello/hello この関数の呼び出しに使用するルートを決定しますDetermines what route is used to invoke this function
    承認レベルAuthorization Level AnonymousAnonymous 省略可能:API キーを使用せずに関数にアクセスできるようにしますOptional: Makes your function accessible without an API key

    注意

    ルート テンプレートには /api ベース パス プレフィックスを含めないよう注意してください。このパス プレフィックスはグローバル設定で処理します。Note that you did not include the /api base path prefix in the route template, as this is handled by a global setting.

  3. [保存] をクリックします。Click Save.

HTTP 関数をカスタマイズする方法の詳細については、「Azure Functions における HTTP と Webhook のバインド」をご覧ください。You can learn more about customizing HTTP functions in Azure Functions HTTP bindings.

API のテストTest your API

次に、関数のテストを行い、新しい API サーフェスで機能していることを確認します。Next, test your function to see it working with the new API surface.

  1. 左側のナビゲーションに表示される関数名をクリックして、開発ページに戻ります。Navigate back to the development page by clicking on the function's name in the left navigation.
  2. [関数の URL の取得] をクリックし、URL をコピーします。Click Get function URL and copy the URL. 現在、/api/hello ルートが使用されていることを確認してください。You should see that it uses the /api/hello route now.
  3. URL をブラウザーの新しいタブまたはお使いの REST クライアントにコピーします。Copy the URL into a new browser tab or your preferred REST client. ブラウザーは既定で GET を使用します。Browsers will use GET by default.
  4. URL のクエリ文字列にパラメーターを追加します (例: /api/hello/?name=John)。Add parameters to the query string in your URL e.g. /api/hello/?name=John
  5. 動作していることを確認するには、Enter キーを押します。Hit 'Enter' to confirm that it is working. "Hello John" という応答が表示されます。You should see the response "Hello John"
  6. また、別の HTTP メソッドを使用してエンドポイントを呼び出し、関数が実行されていないことを確認することもできます。You can also try calling the endpoint with another HTTP method to confirm that the function is not executed. このためには、cURL、Postman、Fiddler などの REST クライアントを使用する必要があります。For this, you will need to use a REST client, such as cURL, Postman, or Fiddler.

Proxies の概要Proxies overview

次のセクションでは、プロキシを経由して API サーフェスを使用します。In the next section, you will surface your API through a proxy. Azure Functions プロキシを使うと、他のリソースに要求を転送できます。Azure Functions Proxies allows you to forward requests to other resources. HTTP トリガーの場合と同様に HTTP エンドポイントを定義しますが、エンドポイントの呼び出しの際に実行するコードを記述する代わりに、リモートでの実装のために URL を提供します。You define an HTTP endpoint just like with HTTP trigger, but instead of writing code to execute when that endpoint is called, you provide a URL to a remote implementation. これにより、クライアントが簡単に使用できる単一の API サーフェスに複数の API ソースをまとめることができます。This allows you to compose multiple API sources into a single API surface which is easy for clients to consume. これは、API をマイクロサービスとして構築する場合に特に役立ちます。This is particularly useful if you wish to build your API as microservices.

プロキシは、以下のような任意の HTTP リソースを指定できます。A proxy can point to any HTTP resource, such as:

プロキシについて詳しくは、「Azure Functions プロキシの操作」をご覧ください。To learn more about proxies, see Working with Azure Functions Proxies.

最初のプロキシの作成Create your first proxy

このセクションでは、API 全体に対してフロントエンドとして機能する新しいプロキシを作成します。In this section, you will create a new proxy which serves as a frontend to your overall API.

フロントエンド環境のセットアップSetting up the frontend environment

Function App を作成する」の手順を繰り返し、プロキシを作成する新しい Function App を作成します。Repeat the steps to Create a function app to create a new function app in which you will create your proxy. この新しいアプリの URL は、API のフロントエンドとして機能し、以前編集した Function App はバックエンドとして機能します。This new app's URL will serve as the frontend for our API, and the function app you were previously editing will serve as a backend.

  1. ポータルで新しいフロントエンドの Function App に移動します。Navigate to your new frontend function app in the portal.

  2. [プラットフォーム機能][アプリケーションの設定] の順に選択します。Select Platform Features and choose Application Settings.

  3. 下にスクロールして、キーと値のペアが格納されている [アプリケーションの設定] に移動し、キー "HELLO_HOST" を使用して新しい設定を作成します。Scroll down to Application settings where key/value pairs are stored and create a new setting with key "HELLO_HOST". バックエンドの Function App のホストに <YourBackendApp>.azurewebsites.net などの値を設定します。Set its value to the host of your backend function app, such as <YourBackendApp>.azurewebsites.net. これは以前 HTTP 関数をテストするときにコピーした URL の一部です。This is part of the URL that you copied earlier when testing your HTTP function. 後で構成の際にこの設定を参照します。You'll reference this setting in the configuration later.

    注意

    ハード コーディングよるプロキシの環境依存を防ぐために、ホストの構成に対してアプリ設定を使用することをお勧めします。App settings are recommended for the host configuration to prevent a hard-coded environment dependency for the proxy. アプリ設定を使用すると、プロキシの構成を環境間で移動でき、その環境に合わせたアプリ設定が適用されます。Using app settings means that you can move the proxy configuration between environments, and the environment-specific app settings will be applied.

  4. [保存] をクリックします。Click Save.

フロントエンドのプロキシの作成Creating a proxy on the frontend

  1. ポータルでフロントエンドの Function App に移動します。Navigate back to your frontend function app in the portal.

  2. 左側のナビゲーションで、[プロキシ] の横にあるプラス記号 [+] をクリックします。In the left-hand navigation, click the plus sign '+' next to "Proxies". プロキシの作成Creating a proxy

  3. 次の表で指定されているプロキシの設定を使用します。Use proxy settings as specified in the table.

    フィールドField 値の例Sample value 説明Description
    名前Name HelloProxyHelloProxy 管理にのみ使用するフレンドリ名ですA friendly name used only for management
    [ルート テンプレート]Route template /api/remotehello/api/remotehello このプロキシの呼び出しに使用するルートを決定しますDetermines what route is used to invoke this proxy
    [バックエンド URL]Backend URL https://%HELLO_HOST%/api/hello 要求の送信先となるエンドポイントを指定しますSpecifies the endpoint to which the request should be proxied
  4. Proxies は /api ベース パス プレフィックスを提供しないことに注意してください。パス プレフィックスはルート テンプレートで指定する必要があります。Note that Proxies does not provide the /api base path prefix, and this must be included in the route template.

  5. %HELLO_HOST% 構文は、以前作成したアプリ設定を参照します。The %HELLO_HOST% syntax will reference the app setting you created earlier. 解決済みの URL は元の関数を指定します。The resolved URL will point to your original function.

  6. Create をクリックしてください。Click Create.

  7. プロキシの URL をコピーし、ブラウザー内、または任意の HTTP クライアントでテストすることで、新しいプロキシを試すことができます。You can try out your new proxy by copying the Proxy URL and testing it in the browser or with your favorite HTTP client.

    1. 匿名関数の場合は、以下を使用します。For an anonymous function use:
      1. https://YOURPROXYAPP.azurewebsites.net/api/remotehello?name="Proxies"
    2. 承認がある関数の場合は、以下を使用します。For a function with authorization use:
      1. https://YOURPROXYAPP.azurewebsites.net/api/remotehello?code=YOURCODE&name="Proxies"

モック API の作成Create a mock API

次に、プロキシを使用してソリューションのモック API を作成します。Next, you will use a proxy to create a mock API for your solution. これにより、バックエンドを完全に実装する必要なく、クライアント開発を進めることができます。This allows client development to progress, without needing the backend fully implemented. 開発の後行程で、このロジックをサポートしプロキシをリダイレクトする新しい Function App を作成できます。Later in development, you could create a new function app which supports this logic and redirect your proxy to it.

このモック API を作成するには、新しいプロキシを作成します (今回は App Service Editor を使用します)。To create this mock API, we will create a new proxy, this time using the App Service Editor. 作成を開始するには、Azure Portal で Function App に移動します。To get started, navigate to your function app in the portal. [プラットフォーム機能] を選択し、 [開発ツール][App Service Editor] を見つけます。Select Platform features and under Development Tools find App Service Editor. これをクリックすると、新しいタブで App Service Editor が開きます。Clicking this will open the App Service Editor in a new tab.

左側のナビゲーションで、proxies.json を選択します。Select proxies.json in the left navigation. これは、すべてのプロキシの構成が格納されるファイルです。This is the file which stores the configuration for all of your proxies. Functions のデプロイ方法で記載されている方法のいずれかを使用する場合、このファイルはソース管理で保持することになります。If you use one of the Functions deployment methods, this is the file you will maintain in source control. このファイルの詳細については、Proxies の詳細な構成に関するページをご覧ください。To learn more about this file, see Proxies advanced configuration.

ここまでの手順に従っていれば、proxies.json ファイルは次のようになっているはずです。If you've followed along so far, your proxies.json should look like the following:

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "HelloProxy": {
            "matchCondition": {
                "route": "/api/remotehello"
            },
            "backendUri": "https://%HELLO_HOST%/api/hello"
        }
    }
}

次に、モック API を追加します。Next you'll add your mock API. proxies.json ファイルを次のように書き換えてください。Replace your proxies.json file with the following:

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "HelloProxy": {
            "matchCondition": {
                "route": "/api/remotehello"
            },
            "backendUri": "https://%HELLO_HOST%/api/hello"
        },
        "GetUserByName" : {
            "matchCondition": {
                "methods": [ "GET" ],
                "route": "/api/users/{username}"
            },
            "responseOverrides": {
                "response.statusCode": "200",
                "response.headers.Content-Type" : "application/json",
                "response.body": {
                    "name": "{username}",
                    "description": "Awesome developer and master of serverless APIs",
                    "skills": [
                        "Serverless",
                        "APIs",
                        "Azure",
                        "Cloud"
                    ]
                }
            }
        }
    }
}

backendUri プロパティを変更することなく、"GetUserByName" という新しいプロキシを追加しています。This adds a new proxy, "GetUserByName", without the backendUri property. 別のリソースを呼び出す代わりに、応答のオーバーライドによって Proxies からの既定の応答を変更します。Instead of calling another resource, it modifies the default response from Proxies using a response override. 要求と応答のオーバーライドは、バックエンド URL と併用することもできます。Request and response overrides can also be used in conjunction with a backend URL. これは、レガシ システムにプロキシする際に特に役立ちます。その際は、ヘッダー、クエリ パラメーターなどを変更する必要がある場合があります。要求と応答のオーバーライドの詳細については、Proxies での要求と応答の変更に関する記事をご覧ください。This is particularly useful when proxying to a legacy system, where you might need to modify headers, query parameters, etc. To learn more about request and response overrides, see Modifying requests and responses in Proxies.

ブラウザーまたはお使いの REST クライアントを使用して <YourProxyApp>.azurewebsites.net/api/users/{username} エンドポイントを呼び出し、モック API をテストします。Test your mock API by calling the <YourProxyApp>.azurewebsites.net/api/users/{username} endpoint using a browser or your favorite REST client. {username} をユーザー名を表す文字列値に必ず置き換えてください。Be sure to replace {username} with a string value representing a username.

次のステップNext steps

この記事では、Azure Functions の API を作成しカスタマイズする方法について説明します。In this article, you learned how to build and customize an API on Azure Functions. また、モックなどの複数の API をまとめて 1 つの API サーフェスにする方法についても説明します。You also learned how to bring multiple APIs, including mocks, together as a unified API surface. これらの手法を使用することで、Azure Functions のサーバーレス コンピューティング モデルで API を実行しながら、複雑な API も構築できます。You can use these techniques to build out APIs of any complexity, all while running on the serverless compute model provided by Azure Functions.

次のリファレンスは、API の開発をさらに進める際に役立ちます。The following references may be helpful as you develop your API further: