[初学者向け]Azure API Management + Functions（TypeScript）でAPIを公開してみよう

12239 ワード
AzureFunctions TypeScript Azure ApiManagement Azure テキストリンク

はじめに

APIを使ったちょっとした検証することがあるのですが、毎度微妙にハマってる気がするので少しまとめてみました。

API GatewayとしてAPIManagementを使い、TypeScriptで作られたAzureFunctionsをバックエンドに置いた構成を作ってみます。
APIMはAzureのデプロイに40分くらいかかりますがお手元にnodejsが入っている環境があれば1時間もあれば十分に試せると思います。

TypeScriptではありませんが以下もあわせてどうぞ。

前準備

  • Azureサブスクリプション
  • nodejs&npmを使えるようにしておく
    • 私は12系を使いました。
  • Azure Functions Core Tools
    • WSLを利用されている方はこちらの手順もどうぞ
    • このツールはデプロイだけではなくひな型の作成やローカル実行など手厚くサポートしてくれるfunctions開発するときになくてはならないツールです。v3をインストールしておきましょう。

Azure functionsを作る

TypeScriptのひな型を作る

ひな型を作るのはこれだけでOK

/products/azure-samples/api-management$ func init
Select a number for worker runtime:
1. dotnet
2. node
3. python
4. powershell
5. custom
Choose option: 2
node
Select a number for language:
1. javascript
2. typescript
Choose option: 2
typescript
Writing .funcignore
Writing package.json
Writing tsconfig.json
Writing .gitignore
Writing host.json
Writing local.settings.json
Writing /products/azure-samples/api-management/.vscode/extensions.json

ビルドしてローカルで実行する

パッケージをインストール

npm install

HTTP Triggerをつくります。
見てもらったらわかる通り色々なトリガーのひな型が一発で作れます。超便利。

/products/azure-samples/api-management$ func new hello
Select a number for template:
1. Azure Blob Storage trigger
2. Azure Cosmos DB trigger
3. Durable Functions activity
4. Durable Functions HTTP starter
5. Durable Functions orchestrator
6. Azure Event Grid trigger
7. Azure Event Hub trigger
8. HTTP trigger
9. IoT Hub (Event Hub)
10. Azure Queue Storage trigger
11. RabbitMQ trigger
12. SendGrid
13. Azure Service Bus Queue trigger
14. Azure Service Bus Topic trigger
15. SignalR negotiate HTTP trigger
16. Timer trigger
Choose option: 8
HTTP trigger
Function name: [HttpTrigger] hello
Writing /products/azure-samples/api-management/hello/index.ts
Writing /products/azure-samples/api-management/hello/function.json
The function "hello" was created successfully from the "HTTP trigger" template.

これでindex.tsはできてる。ここまで3分。

import { AzureFunction, Context, HttpRequest } from "@azure/functions"

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    context.log('HTTP trigger function processed a request.');
    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };

};

export default httpTrigger;

ビルドする（distにソースが配置される）

npm run build

ローカルで動かしてみましょう。

/products/azure-samples/api-management$ func host start
Azure Functions Core Tools (3.0.2881 Commit hash: fa9641ad925588192888bc977ff51d8a63536267)
Function Runtime Version: 3.0.14287.0
Hosting environment: Production
Content root path: /mnt/c/Users/uzres/products/azure-samples/api-management
Now listening on: http://0.0.0.0:7071
Application started. Press Ctrl+C to shut down.

Functions:

        hello: [GET,POST] http://localhost:7071/api/hello

For detailed output, run func with --verbose flag.
Worker process started and initialized.

postmanでhttp://localhost:7071/api/helloにアクセスすると確認できることを確認しておきましょう。

デプロイする

Azure FunctionsをAzure上に用意する

デプロイする

func azure functionapp publish [function名]

Invoke urlというところにfunctionsのURLが書かれるのでpostmanで実行して動くことを確認しておきましょう。これは親切ですね。

API Management経由で動かしてみよう

functionsをimportしてテスト実行する

API Managementを作るところは簡単すぎるので割愛。ただし40分くらいかかる・・・。

先ほど作ったfunctionsをimportします。ガイドに従って設定していけば大丈夫。迷うところはないです。

こんな感じでGETとPOSTのhelloが追加されていると思います。

テストを動かしてみましょう。

[Test]タブを開いて、パラメータを設定して実行します。

成功したら右上の「Generate definition」をクリックして定義を生成しておきます。

OpenAPI定義のダウンロード（おまけ）

APIを選択し、export -> OpenAPIv3 を選択するとダウンロードできます。

先ほどの手順で「Generate definition」しておくとより詳細な定義が出力されます。

Swagger Editorにもそのままインポートして確認することもできます。（Descriptionは書いてないのでエラーになってますけどね）

外部からAPIを叩く

外部からAPIを叩くにはサブスクリプションキーをHTTP Header(Ocp-Apim-Subscription-Key)に設定することでアクセス可能です。
サブスクリプションを発行するにはそれぞれの用語を整理しておいた方がよさそうです。

APIと製品、ユーザ（サブスクライバ）、サブスクリプションの関係は以下のようになります。
ユーザの上にはグループという概念がありますが、サブスクリプションを発行してAPIに接続するだけであれば必要ありません。今回は製品を作成してそこにサブスクリプションを紐づけてみます。

まずは製品を作って、それにAPIを紐づけていきます。

サブスクリプションを発行します。

サブスクリプションに紐づく主キー、２次キーはいつでも見ることができます。

キーがコピー出来たらそれを使ってpostmanでアクセスしてみましょう。

  • HTTPHeaderはOcp-Apim-Subscription-Keyです。

APIに制限を付ける

詳しくはドキュメントを参照していただければよいと思いますが色々とできます。

  • ヘッダを確認する
  • サブスクリプション別に呼び出しレートを設定する
  • キー別に呼び出しレートを設定する
  • IPを制限する
  • 使用量のクォータをサブスクリプション別に設定する
  • 使用量のクォータをキー別に設定する
  • JWTを検証する

割とお手軽そうなIP制限だけ試してみましょう。

inboundの通信元を自宅のみにします。

自宅でアクセス後、会社からだと・・・・403が返って来ました。

参考