2023年5月1日を持ちまして、株式会社KDDIウェブコミュニケーションズのTwilioリセール事業が終了したため、本記事に記載されている内容は正確ではないことを予めご了承ください。

はじめに

みなさん、こんにちは。
KDDIウェブコミュニケーションズのTwilio事業部エバンジェリストの高橋です。

今回は、Twilio CLIを使ったサーバーレス環境の構築の応用編②と題して、Functionのデバッグ方法について説明します。

Twilio CLIについては、以下の記事も御覧ください。

Functionのログを確認する

Functionの内部でconsole.log()などを利用してログを書き出すことがあるかと思います。ここでは、出力されたログをどのようにして確認するかを解説します。

まずは、Twilio CLIを使って、hello worldプロジェクトを作成してください。

twilio serverless:init hello-world

サンプルプログラム

できあがったプロジェクトのfunctionsフォルダ内にあるhello-world.jsを以下のように少し改造してみます。
2行目にconsole.log('hello-world.js running.');を追加しました。

exports.handler = function(context, event, callback) {
  console.log('hello-world.js running.');
  const twiml = new Twilio.twiml.VoiceResponse();
  twiml.say('Hello World!');
  callback(null, twiml);
};

ローカル実行時

このFunctionをローカルで実行するには、以下のコマンドを実行します。

twilio serverless:start

しばらくすると、以下のようなメッセージが表示されて、ローカル実行が可能になります。

┌────────────────────────────────────────────────────────────────────┐
│                                                                    │
│   Twilio functions available:                                      │
│   ├── /private-message | http://localhost:3000/private-message     │
│   ├── /hello-world | http://localhost:3000/hello-world             │
│   └── [protected] /sms/reply | http://localhost:3000/sms/reply     │
│                                                                    │
│   Twilio assets available:                                         │
│   ├── /index.html | http://localhost:3000/index.html               │
│   ├── /style.css | http://localhost:3000/style.css                 │
│   └── [private] /message.js | Runtime.getAssets()['/message.js']   │
│                                                                    │
└────────────────────────────────────────────────────────────────────┘

このメッセージの中の、http://localhost:3000/hello-worldの部分を、cmdキーを押しながらクリックすると、ブラウザ上に以下のTwiMLが表示されます。

<Response>
<Say>Hello World!</Say>
</Response>

console.logの結果については、メッセージの下のところに、以下のように表示されているはずです。

hello-world.js running.
200 GET /hello-world │ Response Type text/xml; charset=utf-8

このように、ローカル実行時はコンソール画面にログが表示されます。

リモート（Twilio上）実行時

では、このプログラムをサーバーにデプロイしてみましょう。
デプロイは以下のコマンドです。

twilio serverless:deploy

しばらくして、以下のようなメッセージとともにデプロイが完了します。

✔ Serverless project successfully deployed

Deployment Details

（中略）

https://www.twilio.com/console/assets/api/ZSc91cf9c078c7e45f6e00918c6bed009e/environment/ZEe13e98fd4bfd8cef6c83bc49c2928954
Functions:
   [protected] https://hello-world-XXXX-dev.twil.io/sms/reply
   https://hello-world-XXXX-dev.twil.io/hello-world
   https://hello-world-XXXX-dev.twil.io/private-message
Assets:
   [private] Runtime.getAssets()['/message.js']
   https://hello-world-XXXX-dev.twil.io/index.html
   https://hello-world-XXXX-dev.twil.io/style.css

ここでも同じように、https://hello-world-XXXX-dev.twil.io/hello-worldの部分をcmdキーを押しながらクリックすると、先ほどと同じようにブラウザ上にTwiMLが表示されます。
ただし、今回はコンソールにはログは表示されません。

Twilio上で実行されたFunctionのログについては、管理コンソール経由で確認できます。

Twilio管理コンソールにログインします。
スライドメニューからFunctionsを選択します。
さらにapiを選択します。

hello-worldプロジェクトのEnvironments内にあるShow Logsをクリックします。

以下のような画面が表示されるかと思います。

この画面は、表示してから実行された分のログしか表示されないため、先程実行したログは表示されていません。

/hello-worldのコピーアイコンをクリックし、別のブラウザタブ上で開いてみます。
TwiMLが表示されるのを確認し、前のタブに戻ってみます。
以下のようにログが表示されているはずです。

このログ表示画面は、時間が経つと同期しなくなってしまうので、もしログが表示されなくなった場合は、一度Functionsのapiメニューに戻って、もう一度Show Logsを選択してください。

Functionをデバッグする

Functionをコーディングをしているときに、思った動作をしないのでデバッグしたくなることあります。
ここでは、サーバーにデプロイする前に、ローカルでデバッグする方法を解説します。

VS Codeを使ったデバッグ方法

今回は、VS Codeのデバッグ機能を使った方法をご紹介します。

先程実行したhello-world.jsをVS Codeで開きます。

実行とデバッグ（三角マークに虫のアイコン）に移動します。
launch.jsonファイルを作成しますをクリックします。
環境の選択プルダウンが表示されたら、Node.jsを選択します。

launch.jsonファイルを以下のように編集します。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "attach",
            "name": "Launch Program",
            "address": "localhost",
            "port": 9229
        }
    ]
}

VS Codeのターミナル画面で、以下のコマンドを入力し、デバッグモードでローカル実行します。

twilio serverless:start --inspect=""

次のようなメッセージが表示されて、デバッグモードで実行されます。

Debugger listening on ws://127.0.0.1:9229/b9053561-1172-4645-bf0c-cd266eff55b3
For help, see: https://nodejs.org/en/docs/inspector
┌────────────────────────────────────────────────────────────────────┐
│                                                                    │
│   Twilio functions available:                                      │
│   ├── /hello-world | http://localhost:3000/hello-world             │
│   ├── /private-message | http://localhost:3000/private-message     │
│   └── [protected] /sms/reply | http://localhost:3000/sms/reply     │
│                                                                    │
│   Twilio assets available:                                         │
│   ├── /index.html | http://localhost:3000/index.html               │
│   ├── [private] /message.js | Runtime.getAssets()['/message.js']   │
│   └── /style.css | http://localhost:3000/style.css                 │
│                                                                    │
└────────────────────────────────────────────────────────────────────┘

hello-world.jsの2行目にブレークポイントを設定します（行数の左側をクリック）。
さらにRunウィンドウの上部にある緑の矢印を押します。

デバッグが始まります。
ブラウザ上で、http://localhost/hello-worldを開きます。
ブレークポイントでプログラムが一時停止します。

あとは画面上部のステップオーバーなどを操作したり、Runウィンドウ上で変数を確認するなどデバッグが可能です。

Twilioと連携したデバッグ

実施にTwilioと連携してデバッグしたい場合は、--ngrokオプションを付けてFunctionをローカルで実行し、TwilioからのWebhookを受けられるようにしておきます。

twilio serverless:start --ngrok="" --inspect=""

この状態でも先程と同じようにデバッグが可能になるので、Twilioから渡ってくるパラメータを確認したり、ステップ実行させたりすることができます。

ただし、TwilioからのWebhookは10秒のタイムアウト制限がありますので、10秒以内に応答を返さないと、サーバー上でError 11205 HTTP connection failureが発生します。

デバッグの終了

デバッグを終了するには、切断アイコン（右側のオレンジ色のアイコン）をクリックします。
VS Codeのターミナル画面もCtrl+Cでデバッグ実行を終了しておきます。

まとめ

今回は、Twilio Functionsを使ってデバッグする方法をお伝えしました。本記事では、localhostでの接続について説明しましたが、--ngrokオプションを使って、外部からのアクセスを有効にすることで、Twilioと連携したデバッグも可能です。
ぜひ活用してみてください。

Twilio（トゥイリオ）とは

https://cloudapi.kddi-web.com
Twilioは音声通話、メッセージング（SMS/チャット）、ビデオなどの様々なコミュニケーション手段をアプリケーションやビジネスへ容易に組み込むことのできるクラウドAPIサービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。

Twilio CLI（サーバーレス応用編②）