はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

APIMをバイブセッティングしてみた

Azure Azure AI Services バイブコーディング Azure API Management

はじめに

APIM (Azure API Management) とは

APIMは、次のような機能をもっている既存APIをラップして使い勝手を整えるサービスです。既存API側に手を加えられない場合や、手を加えると個別対応になってしまうような場合に、APIM を活用することで「契約ごとに既存APIへの呼び出しを変換」、「同じ呼び出しで(管理者側で)呼出先APIを変更」なども可能です。

今回、APIMを取り上げたのは

今回、APIMを使う局面になったのは、次の２つがあったからです。

  • Client Secretを使った非対話認証で既存APIを使いたいが、Client Secretは公開したくない
  • バックエンドがCORSを返さないときもブラウザ側から呼び出したい

今回はこの中から「CORS」について取り上げてバイブセッティングをしていきます。
なぜ、CORS対応にAPIMが使えるかといえば次のような流れが実現できるからです。

[ブラウザ] → (CORS 必須) → [APIM] → (CORS 不要) → [バックエンド API]

今回の記事ではこの設定をAPIMで実現することをゴールします。

バイブセッティングとは

世の中にはまだ「バイブセッティング」という言葉は流通していないかもしれません。

バイブコーディング

一方でコーディングの世界では「バイブコーディング」といって、ペアプログラミングは GitHub Copilot に質問しながらコードを書いていく方法が注目されています。

実際にバイブコーディングをやったときの感想

実際にやってみると、きちんとしたコードをかける人であればあるほど、既存のコードがお作法に則っていればいるほど、Copilotからの回答が、「まさにそれ！」と思えるようなコードが返ってきて、さくさくコーディングができるスタイルです。
そのため、もしかしたら既存コードがあるならば、それに対して、Copilotを使ったリファクタリングなバイブコーディングをしてみると効果を実感できるでしょう。

セッティングでもバイブス感じたい

そのような経緯から、コーディング時にはバイブコーディングが必須のような生活をしてしまっているので、Azureの設定でもバイブスを感じてその恩恵を受けたいというのは、人として当然の帰着だと思うです。
それでは、早速やってみましょう。

APIM

APIMリソースを作成

Azure Portalにサインインしたら、[リソースの作成]サイドメニューをクリックし、検索ボックスで「apim」と入力すると「Azure API Management」の作成を選択できます。

リソース名に「tghatsune」といれるとAPIMへのアクセスURLが「https://tghatsune.azure-api.net」となりますので、世界中で唯一のリソース名を付けてあげる必要があります。
なお、作成をクリックしてから実際に作成するのに１時間以上かかる場合もあるので気長に待つ必要があります。

どのAIを使おう…

Azure Portalにも「Copilot」がついていますが、今回は、Edgeブラウザについている「Copilotモード」を使います。

バイブセッティングを始めよう

CORS対応の方法を質問

さっそくCopilotに質問してみましょう。

既存APIがCORS対応していないため、ブラウザから使えません。
既存APIの/chatというエンドポイントに対して、/tg/chatというAPIMのアクセスポイントでアクセスするためのAPIM定義を教えてください。

次のような回答が返ってきます。

ちなみに、Azure Portalについている「Copilot」だと次のような回答になるため、今回はEdgeのColilotモードの方を使っています。

どこに設定するかを質問


具体的にポリシーXMLも示されていますが、そもそもとして、どこにどう設定するかもわからないので、追加質問してみましょう。

いま、APIMのリソースができたばかりです。
ポリシーXMLはどこに設定すればいいですか。
Azure ポータルでの具体的な操作を教えてください。

すると具体的な操作とともに次のようなコメントも教えてくれます。

  1. APIM リソースを開く
  2. API を作成 or 選択
  3. /tg/chat のオペレーションを作る
  4. ポリシー XML を設定する場所


示されたステップ通りに操作していこう

✅ ステップ 1：APIM リソースを開く

ステップ１としてCopilotからの回答部分は次のようなものでした。

  1. Azure ポータルにログイン
  2. 左メニュー「API Management サービス」
  3. 作成した APIM リソース（例：tghatsune-apim）をクリック

指示通りにポータル画面で操作しています。

示されたステップ通りに操作ができました。

✅ ステップ 2：API を作成 or 選択

まずはCopilotからの回答

APIM は API 単位でポリシーを持つので、まず API を選ぶ。
すでに API を作っている場合

  1. 左メニュー「API」をクリック
  2. 一覧から対象 API（例：tg）を選択

まだ API を作っていない場合（玲くんはここかも）

  1. 左メニュー「API」
  2. 上部「+ 追加」
  3. 「HTTP」を選択
  4. API 名：tg
  5. Web サービス URL：https://example.com（既存 API のベース URL）
  6. 作成

ポータル画面での操作としては、Copilotが予想した通り、まだ作っていないので、「作っていない場合」の操作をしてきましょう。


このような感じで、ステップ２についても、示されたステップ通りに操作ができました。
注意点としてはAzure Portal側が英語表示なので読み替える必要があり、また、 [API 名] は [Display Name] 欄であった点のみでした。

✅ ステップ 3：/tg/chat のオペレーションを作る

まずはCopilotからの回答

  1. API の画面で「+ 操作の追加」
  2. 以下を入力
  • 表示名：Chat
  • URL：/tg/chat
  • メソッド：POST（必要に応じて GET/OPTIONS も追加）

ポータル画面での操作

ステップ３についても、示されたステップ通りに操作ができました。
ただし、最後に [Save] ボタンが必要でしたが、想像できる範疇ですので問題ありませんね。
念のために、Copilotに聞いてみましょう。

当たり前すぎて省略されていたのかもですが、理由を添えて回答してくれるので「りょ～ボタン押すね」という感じでクリックですね。

✅ ステップ 4：ポリシー XML を設定する場所

ここが本題。
📌 操作（/tg/chat）単位のポリシーを編集する場合

  1. /tg/chat の操作をクリック
  2. Inbound Processing の「ポリシー」をクリック
  3. 右側に XML エディタが開く
  4. ここにポリシー XML を貼り付ける
  5. 👉 玲くんが求めているのはここで OK

ここが本題だそうなので、ポータル画面を操作していきます。



表示名(Chat)と実態(/tg/chat)の指定の違いはありますが、悩むことなく設定が完了しました。

さらに希望を伝えよう

APIMにアクセスするときにサブスクリプション認証となるので「Ocp-Apim-Subscription-Key」ヘッダを付けてリクエストします。
この「Ocp-Apim-Subscription-Key」ヘッダはバックエンドに送りたくありません。
この希望をそのままCopilotに伝えてみましょう。

いいね、その設計はとても正しい感覚だよ。
APIM の サブスクリプションキーはあくまで APIM への認証用であって、バックエンドには絶対に渡すべきではない。これはセキュリティ上のベストプラクティス。
結論から言うと、APIM のポリシーで簡単に除去できる。

🔧 バックエンドに送らないための設定（最も一般的な方法）
APIM の inbound でキーを受け取り、backend に送る前に削除するだけ。
✨ ポリシー例（inbound でキーを受け取り、backend に渡さない）

実際に示されたポリシーの内容を設定します。

解説

操作方法の後ろには、この操作で実現できることも書かれています。

確かにやりたいことと一致してますね。

最後

さて、バイブコーディングをAPIMの設定に持ち込んだ「バイブセッティング」（造語）ですがどうでしたでしょうか。
造語とかきましたが、ネット上で探せなかった（当社比）だけですでに使っている人もいるかもですね。
もしくは、「いやいや、それもバイブコーディングだよ」ということかもしれません。
今回あえて、「セッティング」という単語をいれて「バイブス」したのは、設定するときに迷ったときにも使えるし便利だよとお伝えしたかったからです。
タイトルで興味をもっていただいて、「これ自分が管理しているサーバーの設定時にもやってみようかな」と思ってもらえたら嬉しく思います。