Zenn
KWCPLUSPublicationへの投稿
🀄️

Vonage Cloud Runtime 入門

高橋克己（□い芸人）
2024/04/03に公開
Vonage
cpaas
tech

はじめに

みなさん、こんにちは。KDDI ウェブコミュニケーションズで CPaaS のエバンジェリストをしている高橋です。
この記事では、Vonage Cloud Runtime について解説をします。

本記事の対象となる読者

  • Vonage のアプリケーションをホスティングするサーバーを探している方
  • Node.js + Express の仕組みがなんとなくわかる方
  • Vonage 上で、Twilio Functions や Assets のようなサービスを探している方
  • Vonage Cloud Runtime を始めてみたい方

Vonage とは

Vonage_logo

Vonage は、米国ニュージャージー州に本社を置く、CPaaS（Communication Platform as a Service）企業です。
もともとは VoIP（Voice over IP）企業としてスタートしましたが、いくつかの企業買収を行うことで、コミュニケーションサービス全般をサポートすることができる企業に発展しました。現在はスウェーデンの大手通信機器会社エリクソンの傘下に入っています。

2024年2月14日より、株式会社KDDIウェブコミュニケーションズ（以後、KWC）が Vonage の再販事業を開始することとなりました。
KWC経由でアカウントを開設する場合、Vonageで直接開設したアカウントとは一部仕様が異なります。（※提供する機能面において違いはありません）

なお、本記事ではKWC経由でのアカウントを使って説明を行います。

Vonage Cloud Runtime とは

Vonage Cloud Runtime （VCR）は、Vonage が提供するクラウド型のアプリケーションサーバーです。
VCR上に構築されたアプリケーションはVonage上にホスティングされるため、カスタマーは自身でAWSなどの外部サーバーを準備する必要がありません。
これにより、Vonage API を使ってすぐにPoCやテストが行えるほか、外部のAPIサービスと連携したアプリケーションを構築することもできます。

用語定義

用語 説明
プロジェクト VCRでは、作成するアプリケーションのことをプロジェクトと呼びます。
ワークスペース ブラウザベースでコーディングができる Visual Studio Code ベースの開発環境（コードエディタ）です。
インスタンス ワークスペースをデプロイすることで立ち上がるサーバー環境です。
Code Hub プロジェクトのテンプレートが公開されているマーケティングプレイスです。
リージョン プロジェクトやインスタンスを管理するAWSリージョンで、Asia Pacific、US Virginia、Europe Irelandの3つから選択できます。

Hello World

では最初に、ブラウザ上に「Hello World!」と表示するだけのアプリケーションサーバーを構築してみます。

Vonageダッシュボードにログイン

こちらのページから、Vonage ダッシュボードにログインをします。
Vonage本家でアカウントを作成した場合は、こちらからログインしてください。

Code Hub

  • ログインをした状態で、ブラウザの新しいタブを開いて、Vonage Developer ページに遷移します。
  • Code Hub タブに遷移します。
    Developer Page

テンプレートが表示されます。

  • 一覧からStarter Projectを見つけて、クリックします。

Starter Project

  • Starter Project の詳細ページに遷移します。

Starter Project get code

  • 画面中央に表示されている Get Code タブを選択します。
  • Create a new deveopment environmentボタンを押します。

Set up your workspace

  • Regionは、「AWS - Asia Pacific」を選択します。
  • Workspace nameは、「Hello World」としておきます。
  • Continueボタンを押します。

しばらくすると画面が遷移し、以下のようなコーディングページが表示されます。

VCR Init page

コーディング

ではさっそく「Hello World!」の文字を表示させるコーディングをしてみましょう。

  • 左側のEXPLORERからpublic > index.htmlを選択します。
  • index.htmlの内容が右側に表示されます。
  • 10行目の内容を「Hello World!」に書き換えます。

Editing index.html

デプロイ

作成したプログラムをサーバー上にデプロイします。

  • Terminalメニューの中のNew Terminalを選択します。

New Terminal

画面下部にターミナルウィンドウが開きます。

  • ターミナルウィンドウで、以下のコマンドを入力します。
vcr deploy

デプロイがスタートします。デプロイは1分程度かかります。

working directory: /home/coder/project
 ℹ️  compressing directory: /home/coder/project
 ℹ️  compressed: size 8607932 byte(s) contents 5133 file(s)... done.
 ℹ️  uploading source code...
 ✅ source code uploaded
 ℹ️  creating package from source code...
 ℹ️  package id: 702856f0-edbd-4e1e-8a61-936adf327d8a
 ℹ️  package build status is 'pending' - image will begin building soon...
 ℹ️  package build status is 'building' - image is being built...
 ✅ package build status is 'completed' - image is ready to be deployed!
 ✅ instance has been deployed!
      instance id: bc92a969-dfd2-4ec0-9a3a-4180c65a7ea0
      instance service name: neru-xxxxxxxx-helloworld-dev
      instance host address: https://neru-xxxxxxxx-helloworld-dev.apse1.runtime.vonage.cloud

上の例のように、instance has been deployed!が表示されればOKです。

  • 最後に表示されたhost addressをコピーしてブラウザに貼り付けます。

以下のようなページが表示さればテストは完了です。

Hello World

この例のように、VCRを使うことで簡単にWebサーバー（Node.js + Express）を構築できます。Expressを使ったWebサーバーの記事は、インターネット上にたくさん公開されているので、そちらを参考にするとよいでしょう。

NCCOを返却するサンプル

では次に、VCRを使ってNCCOを返却するサンプルプログラムを作成してみましょう。

NCCOとは、Vonage上で通話やメッセージングを処理するための定義です。その実態はJSONです。
たとえば、次のNCCOは「こんにちは」と日本語で発話する定義となります。

[
  {
    "action": "talk",
    "text": "こんにちは",
    "language": "ja-JP",
    "style": 0
  }
]

では、このNCCOを先ほどのVCRを使って返却するプログラムを作っていきます。

  • エディター画面に戻って、EXPLORERからindex.jsを選択します。
  • index.jsの17行目の後に、以下のコードを記載します。
app.get('/ncco', async (req, res) => {
    res.json([{"action": "talk","text": "こんにちは","language": "ja-JP","style": 0}])
})
  • ターミナルウィンドウで以下のコマンドを使ってコードをデプロイします。
vcr deploy
  • 先ほどと同じように、デプロイされたURLをコピーします。
  • ブラウザに貼り付けをして、最後に/nccoを付加してからエンターを押します。
  • 以下のようにJSONが表示されればOKです。

JSON

イベントWebhookを処理するサンプル

同様に、Voice API の Event Webhook を処理するプログラムも追加してみましょう。

  • エディタ画面に戻って、21行目あたり（先程のnccoの後ろ）に、以下のコードを記述します。
app.post('/event', async (req, res) => {
    console.log(req.body.status)
    res.sendStatus(200);
})

このコードは、Event Webhook で渡されるステータスをログに表示します。

では、ここで一度デプロイをして、実際に Vonage アプリケーションで設定してみましょう。

Voice Webhook

  • アプリケーションの音声機能をONにします。
  • 回答URL欄にデプロイしたアプリケーションサーバーのURLに/nccoを付加したものを設定します。
  • イベントURL欄にも、同じく/eventを付加したものを設定します。こちらはPOSTにすることを忘れないでください。

動作確認

この状態で、アプリケーションに紐づけた電話番号に発信を行うと、女性の声で「こんにちは」と発話が確認できます。また、Event Webhook については、以下の手順で確認ができます。

  • エディタ画面の上部にあるメニューを展開し、Instancesをクリックします。

Instances

  • 現在作業をしているインスタンス（helloworld）の環境が見えるはずなので、そちらをクリックします。

dev

  • Logsタブを開くと、Event Webhook が届いているのが確認できます。通常は、4つのイベント（ringing/started/answerd/completed）が表示されるはずです。

logs

まとめ

今回は、Vonage 上でプログラムを実行することができる Vonage Cloud Runtime について説明をしました。VCR を使えば、Twilio Functions や Twilio Assets のような使い方もできますし、さらに柔軟なWebサーバーとしても使うことができます。
現在はまだパブリックベータの状態ですが、これからも機能が拡張されていくと思います。ぜひ使ってみてください。

KWCPLUS
KWCPLUSPublication

株式会社KDDIウェブコミュニケーションズ Tech Blog

Discussion