Help us understand the problem. What is going on with this article?

Azure FunctionsをVisual Studio Codeでローカルで実行・デバッグする

目的

LINE Messaging APIを使って作ってみたいものがあり、練習しようと思い立ったのが始まりです。
具体的にはLINEで画像を送ってもらい、いい感じに分析して返すサービスを作ろうかなと思っています。

なぜAzure Functions?

LINE Messaging APIは、友達追加してもらったチャンネルにメッセージを受信すると予め設定したURLにPOSTメソッドで情報を送ってきます。
これをいい感じに処理すればいいのです。
いつも通りNode-REDを使うのが最も手軽ですが、少し複雑な感じで処理しようとすると、Node-REDでも結構コードを書かなければならなくなりそうで、じゃあ書き慣れてるC#で書けるAzure Functionsを使おうと思いました。

Azure Functionsについて少し

Azure Functionsはサーバーレスで手軽に処理を実行できるサービスです。
関数のコール数で課金額が決まっているため、個人で小規模に使う分には無料 or 安く使えそうです。知らないですが。

Visual Studio CodeでAzure Functionsプロジェクトを作成

今回は使いませんが、Azureのアカウントはこちらであらかじめ作成しておいてください。
Visual Studio Codeの拡張機能Azure Functionsを導入します。
SharedScreenshot.jpg

導入後、F1を押してコマンドレットから
無題.png

Create Functionを選択してください。
その後は開発言語を聞かれるので今回はC#。テンプレートはHTTPリクエストで駆動するので、HTTP Triggerを選びます。
適当に関数の名前などを入力し、次へ次へ進みます。
これでプロジェクトは新規作成されます。

ローカル実行&デバッグ

新規作成したばかりでもF5を押すと、ビルド&実行されます。

Http Functions:
        HttpTriggerCSharp: [GET,POST] http://localhost:7071/api/HttpTriggerCSharp

初期設定だとポート7071で待ち受けされるみたいです。
この状態でも何かの方法で上記エンドポイントにGET or POSTリクエストを投げてやれば関数が実行されます。
ただ、この状態だとあくまでLAN内からのリクエストを受け付けるだけなので、LINE Messaging APIのwebhookを受けることができません。
これ、まさかルーターを転送してLAN内に通信通すとかしなきゃいけないのかなぁとか思っていると、完璧なツールに救われたので、そちらを使います。

ngrok

便利すぎる。
公式サイトからダウンロードします。
https://ngrok.com/
展開すると、インストールとかではなく、exeが入っているだけなので、環境変数のパスを通すか展開したディレクトリにコマンドラインで移動して使ってください。
また、公式サイトの案内通りアカウントを作成するとアクセストークンが支給されます。
このアクセストークンを使って下記コマンドを実行すると、認証情報がどこかのフォルダに作成されます。
これで準備完了です。

$ ./ngrok authtoken <YOUR_AUTH_TOKEN>

ここから、実際に使ってみます。

ngrok http 7071

このように、ローカルでAzure Functionsが実行されているポートを指定します。

Session Status                online
Account                       <user name> (Plan: Free) 
Version                       2.3.35                                                                                    
Region                        United States (us)                                                                        
Web Interface                 http://127.0.0.1:4040                                                                     
Forwarding                    
http://xxxxxxxx.ngrok.io -> http://localhost:7071                                         Forwarding                    
https://xxxxxxxx.ngrok.io -> http://localhost:7071                                                                                                                                                                
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                             
0       0       0.00    0.00    0.00    0.00     

すると、このようにWAN上にngrokが用意してくれたURLへのリクエストがローカルのポートに転送されるようになります。
しかも、httpsに対応しているので、実用性抜群ですね。
LINE Messaging APIであれば、[https://xxxxxxxx.ngrok.io] をwebhookに指定すれば、そのチャンネルにメッセージが送られるたびにPOSTリクエストが送られるので、VSCodeでブレークを張っておけばデバッグできます。
これでローカルで実行しながらインターネット上で送られる本物のリクエストを使いながらデバッグできますね。
お疲れさまでした。

ronkabu
転職しました。 ADASのシステム開発やってます。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした