本章では、Azure Functionsのローカルデバッグを行います。
Codespacesが利用できる方は 4-1. Codespacesでデバッグを行う を参考に、利用できない方は 4-2. ローカルPCでのデバッグ手順 を参考に進めてください。
ご自身のGitHubリポジトリページから「Code」ボタンを選択し、出てきたメニューの「Codespaces」タブを選択します。
「Create codespace on main」を選択します。
Functions/local.settings.json ファイルを作成します。
Functions/local.settings.json.template の中身をコピーし、 LINE_CHANNEL_ACCESS_TOKEN 、 AZURE_OPENAI_API_～ にそれぞれ、以前の手順でAzure Functionsに設定したものと同じ値を設定します。
Codespaces画面下部の「ターミナル」タブから、追加で新しくターミナルを開きます。
以下コマンドで Functions ディレクトリに移動し、Azure Functionsをデバッグ起動します。
cd Functions
func start --csharp
下の画像のように、 Webhook: [POST] http://localhost:7071/api/Webhook と表示されたらCodespaces上でのAzure Functionsのデバッグ起動が成功です。
Codespaces画面下部の「ポート」タブを開きます。
ポート 7071 を右クリックし、「ポートの表示範囲」を「Public」に変更します。
「ローカル アドレスのコピー」から、この時生成されている公開用のURLを控えておいてください。
先ほど控えておいた公開用URLに /api/Webhook と付ける形でLINE DevelopersのWebhook URL設定に設定します。
その後、ご自身の端末からLINEを開き、メッセージのやり取りができるかを確認します。
この時、ソースコードを変更して再度デバッグ起動したり、Codespaces上のターミナルにAzure Functionsの実行ログが流れるかなどを確認してみましょう。
ここまでの手順が完了したら、使用したCodespacesを忘れずに削除しましょう。
Codespaces管理画面 を開き、自身のCodespaces一覧を表示します。
画面左側の「By Repository」から使用したCodespacesの詳細を開きます。
右側の「…」を選択し、「Delete」で削除します。
本章ではローカルPCでソースコードの実行を行うため、事前にソースコードをcloneしてください。
また、本章の実施には 任意の事前準備環境 が必要になります。
まずは、Dockerを起動した状態(Docker Desktopを使用する場合は、Docker Desktopを起動した状態)にします。
VSCodeを起動し、左上の「File」→「Open Folder」でhol-azure-line-bot-openaiフォルダを開きます。
VSCode上でF1キーからコマンドパレットを起動し、「Dev Containers:Reopen in Container」を選択します。
VSCodeが起動しなおし、コンテナが動いていることが確認できます。
Functions/local.settings.json ファイルを作成します。
内容は Functions/local.settings.json.template の中身をコピーし、 LINE_CHANNEL_ACCESS_TOKEN 、 AZURE_OPENAI_API_～ にそれぞれ、以前の手順でAzure Functionsに設定したものと同じ値を設定します。
VSCode上で、追加で新しくターミナルを開きます。
以下コマンドで Functions ディレクトリに移動し、Azure Functionsをデバッグ起動します。
cd Functions
func start --csharp
下の画像のように、 Webhook: [POST] http://localhost:7071/api/Webhook と表示されたらDev Containers上でのAzure Functionsのデバッグ起動が成功です。
ngrokが使用できるターミナルを開き、以下コマンドを実行します。
ngrok http 7071
このコマンドにより、発行されたngrokのURL（例: https://1234-567-890.jp.ngrok.io ）が http://localhost:7071 にトンネリングされます。
LINE DevelopersコンソールのWebhook URLの設定に、この発行されたngrokのURLに /api/Webhook とつけたもの（例: https://1234-567-890.jp.ngrok.io/api/Webhook ）を設定します。
LINEアプリのトークルームでBotにメッセージを送ると、ローカルデバッグしているAzure Functionsが動作します。
以上で、Dev Containersを使用したAzure Functionsのローカルデバッグならびに、ngrokを使用したLINE Botからローカルで実行中のAzure Functionsへの疎通手順が完了しました。
試しに、ローカルのソースコードを変更し、動作確認してみてください。
Azure Functions の概要 | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-overview
Azure Functions のトリガーとバインド | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/azure-functions/functions-bindings-http-webhook
Azure OpenAI Service とは - Azure AI services | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/ai-services/openai/overview
クイック スタート - モデルのデプロイと Azure OpenAI Service を使用したテキストの生成を行う - Azure OpenAI | Microsoft Learn
https://learn.microsoft.com/ja-jp/azure/ai-services/openai/quickstart?tabs=command-line&pivots=programming-language-csharp
Messaging APIリファレンス | LINE Developers （メッセージイベント）
https://developers.line.biz/ja/reference/messaging-api/#wh-text
Messaging APIリファレンス | LINE Developers （応答メッセージを送る）
https://developers.line.biz/ja/reference/messaging-api/#send-reply-message