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サービスです。初期費用不要な従量課金制で、各種開発言語に対応しているため、多くのハッカソンイベントやスタートアップなどにも、ご利用いただいております。
Author And Source
この問題について(Twilio CLI（サーバーレス応用編②）), 我々は、より多くの情報をここで見つけました https://qiita.com/mobilebiz/items/516355a0cdd39ecbae6b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .