ホーム

ローカルのAPIサーバをAzure API Managementに登録する

導入

本記事では、Azureが提供しているAPI Managementサービスに、ローカル環境のAPIサーバを追加して動作確認した方法を紹介します。

目次

  1. 事前準備
  2. サンプルAPIサーバの設定

    1. サンプルAPIサーバを作成する
    2. サンプルAPIサーバを起動する
  3. ngrokの設定

    1. ngrokのインストール
    2. ngrokを起動する
  4. OpenAPI Specificationの作成
  5. サンプルAPIの登録
  6. サンプルAPIのテスト
  7. エラーレスポンスの確認

事前準備

Azure API Managementが利用できる状態である必要があります。
まだの方はこちら等を参照し、環境を準備してください。

サンプルAPIサーバの設定

サンプルAPIサーバを作成する

今回はこちらのブログで紹介している手順でAPIサーバを作成しました。

http://localhost:3000/api/v1/listにアクセスすると、{"title":"JavaScriptを勉強する","done":true}が返却される簡単な仕様です。

index.jsの実装は以下の通りです。

// expressモジュールを読み込む
const express = require('express');

// expressアプリを生成する
const app = express();

// http://localhost:3000/api/v1/list にアクセスしてきたときに
// TODOリストを返す
app.get('/api/v1/list', (req, res) => {
    // クライアントに送るJSONデータ
    const todoList = { title: 'JavaScriptを勉強する', done: true };

    // JSONを送信する
    res.json(todoList);
});

// ポート3000でサーバを立てる
app.listen(3000, () => console.log('Listening on port 3000'));

サンプルAPIサーバを起動する

アプリケーションを起動すると、、ローカルホスト3000で待ち受け状態になるので、ブラウザで確認します。

rui@ruinoMacBook-Pro express-app % node index.js
Listening on port 3000

以下のように表示されたらサンプルAPIの準備は完了です。
APIサーバは起動したままにしておきます。
ScreenShot 2020-09-19 18.53.13.png

ngrokの設定

サンプルAPIですが、現在ローカルホストで起動しているかと思います。
しかし、Azure API ManagementにhostがlocalhostとなるAPIを登録してもエラーとなります。
これはAzure内のローカル環境を指すことになってしまうためです。

そこでngrokというツールを利用します。
ngrokとはwebhookを利用するためのpublicURLを発行できるツールです。

Public URLs for building webhook integrations. Spend more time programming. One command for an instant, secure URL to your localhost server through any NAT or firewall.
引用元:https://ngrok.com/

参考資料

ngrokのインストール

macの場合、Homebrewが入っていれば簡単に導入できます。
※Windowsであればzipファイルを解凍するだけで利用できます。

brew install ngrok
コマンドではエラーとなったので、
brew cask install ngrok
コマンドを実行しました。

//実行ログ
rui@ruinoMacBook-Pro ~ % brew install ngrok
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
alsa-lib           dbdeployer         infracost          ladspa-sdk         libirecovery       libseccomp         prometheus-cpp     terrascan          vtk@8.2
==> Updated Formulae
Updated 457 formulae.
==> Renamed Formulae
gst-validate -> gst-devtools

Error: No available formula with the name "ngrok" 
Upstream sunsetted 1.x in March 2016 and 2.x is not open-source.

If you wish to use the 2.x release you can install with Homebrew Cask:
  brew cask install ngrok
rui@ruinoMacBook-Pro ~ % 
rui@ruinoMacBook-Pro ~ % 
rui@ruinoMacBook-Pro ~ % brew cask install ngrok
==> Tapping homebrew/cask
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-cask'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (30/30), done.
remote: Total 480321 (delta 12), reused 7 (delta 3), pack-reused 480288
Receiving objects: 100% (480321/480321), 216.93 MiB | 1.31 MiB/s, done.
Resolving deltas: 100% (340760/340760), done.
Tapped 1 command and 3659 casks (3,776 files, 232.5MB).
==> Downloading https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-darwin-amd64.zip
######################################################################## 100.0%
==> No SHA-256 checksum defined for Cask 'ngrok', skipping verification.
==> Installing Cask ngrok
==> Linking Binary 'ngrok' to '/usr/local/bin/ngrok'.
🍺  ngrok was successfully installed!
rui@ruinoMacBook-Pro ~ % 

ngrokを起動する

ngrokを起動していきましょう。
今回のexpress APIサーバであれば3000ポートを使うので、以下コマンドを実行します。

rui@ruinoMacBook-Pro ~ % ngrok http 3000

実行すると、ターミナルの表示が以下のように変わるかと思います。

ScreenShot 2020-09-19 19.02.57.png

このうちorwardingに書かれているのは、
http://64e22898a87d.ngrok.io
にアクセスすれば、
http://localhost:3000
にアクセスできるというものです。
※転送処理をしてくれます

このhttp://64e22898a87d.ngrok.ioをAzure API Managementサービスに登録することで、ローカルのAPIサーバと通信できるようにします。
ngrokも起動したままにしておきます。

OpenAPI Specificationの作成

Azure API ManagementにAPIを登録するため、OpenAPI Specificationを作成します。
OpenAPI Speficification とは、APIを記述するためのフォーマットのことで、Open API Initiativeによって推進されてるオープンな規格です。

ここでは詳細は記載しませんので、下記資料等を参照し、作成してください、

参考資料

今回はSwagger UIを使って作成しました。
※登録不要で作成できるのでとても便利です。

作成したOpenAPI Specificationは以下の通りです。
ポイントはhostに 64e22898a87d.ngrok.io を設定している点です。

swagger: "2.0"
info:
  description: "これはサンプルAPIです。"
  version: "1.0.0"
  title: "Sample API"
  termsOfService: "http://swagger.io/terms/"
  contact:
    email: "apiteam@swagger.io"
  license:
    name: "Apache 2.0"
    url: "http://www.apache.org/licenses/LICENSE-2.0.html"
host: "64e22898a87d.ngrok.io"
basePath: "/api/v1"
paths:
  /list:
    get:
      summary: "サンプルAPI"
      description: "サンプルの情報を返します"
      responses:
        200:
          description: "成功時のレスポンス"
          schema:
            type: "object"
            properties:
              title:
                type: "string"
                example: "JavaScriptを勉強する"
              done:
                type: "boolean"
                example: true

APIの登録

続いてAzure API ManagementサービスにAPIを登録していきます。

[Add API] -> [OpenAPI] を選択します。
ScreenShot 2020-09-19 19.17.01.png

[Select a file] から上記で作成したOpenAPI Specification(ここではswagger.yaml)を選択します。
他の設定はデフォルトのままで「create」を押下します。
ScreenShot 2020-09-19 19.17.32.png

APIの実行

[Test]タブ -> [サンプルAPI]を選択 -> [Send] を押下します。
ScreenShot 2020-09-19 19.21.46.png

200でレスポンスが返ってきたら成功です。
ScreenShot 2020-09-19 19.23.19.png

HTTPレスポンス

HTTP/1.1 200 OK

cache-control: private
content-encoding: gzip
content-type: application/json; charset=utf-8
date: Sat, 19 Sep 2020 10:22:26 GMT
etag: W/"31-utjlEvoAJ2bDixOZRVKHEYHfVpc"
ocp-apim-trace-location: https://apimstrvh1epexidsgscyqls.blob.core.windows.net/apimstbowbjbbkitkmaerfbd-inspector/Aocskp-0vkM0tCpNpfTFBg2-1?sv=2018-03-28&sr=c&sig=0yHVqER3qaUFRDHaWycBph1PD%2Fx9pI0UrHDhnDXpmGY%3D&se=2021-09-19T03%3A00%3A49Z&sp=racwdl&traceId=b7fe4e6a12524ddb838482c55e62e40c
transfer-encoding: chunked
vary: Accept-Encoding,Origin
x-powered-by: Express
{
    "title": "JavaScriptを勉強する",
    "done": true
}

エラーレスポンスの確認

検証として、OpenAPI Specificationのhostの値を
64e22898a87d.ngrok.io
から
localhost:3000
に変更した時の挙動を確認しましょう。

API名が重複するので、一度「Sample API」は削除します。
修正したyamlファイルを再登録します。

同様の手順でAPIを実行すると、500エラーとなることが確認できます。
ScreenShot 2020-09-19 19.33.39.png

HTTPレスポンス

HTTP/1.1 500 Internal Server Error

cache-control: private
content-length: 111
content-type: application/json
date: Sat, 19 Sep 2020 10:33:30 GMT
ocp-apim-trace-location: https://apimstrvh1epexidsgscyqls.blob.core.windows.net/apimstbowbjbbkitkmaerfbd-inspector/Aocskp-0vkM0tCpNpfTFBg2-2?sv=2018-03-28&sr=c&sig=0yHVqER3qaUFRDHaWycBph1PD%2Fx9pI0UrHDhnDXpmGY%3D&se=2021-09-19T03%3A00%3A49Z&sp=racwdl&traceId=67c484097e224d44a1dfa3757fab5679
vary: Origin
{
    "statusCode": 500,
    "message": "Internal server error",
    "activityId": "67c48409-7e22-4d44-a1df-a3757fab5679"
}

以上で検証は終了です。