Twilio CLI(サーバーレス応用編②)


はじめに

みなさん、こんにちは。
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サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。