Twilioブログ

Twilio Studio API v2をGitHub Actionsに組み込んでFlowを自動本番リリースする方法

こんにちは、Twilio事業部のkatsu.tです。
先日、Twilio StudioのREST API v2のbeta版公開の発表がありました。

このバージョンアップにより、Twilio StudioのFlowをAPI経由でFlowの作成、Flowのjson更新ができるようになりました。

今までは、StudioのFlowはコンソール上からjsonを取得することで、バージョン管理を可能としてきましたが、開発環境のFlowのjsonを用いて本番環境のFlowを更新することはできず、Flowを開発環境から本番環境へシームレスに移行するのは非常に難しい状況でした。

※Flowを新規作成する際にjsonを用いてコピーを作ることはできました
 
今回のバージョンのリリースにより、下記の項目が可能となりました。

  • jsonを用いたFlowの更新
  • 本番環境へのリリースをjenkinsやGitHub Actionsに組み込む
  • リリースリスクの減少

Twilio StudioのREST API v2の詳しい説明は、 Twilio CLI(Studio操作編①)Twilio CLI(Studio操作編②)の記事をご覧ください。

本記事では、GitHub Actionsへ今回のAPIを組み込み、自動本番リリースを実現したいと思います。

Twilio Studioとは

Twilio Studioとは、自動応答システムを構築するためのツールです。

「音声を再生する」「電話を転送する」といった動作があらかじめパーツとして用意されており、それらをドラッグ&ドロップで必要なパーツを線で結んで組み合わせていくことで自動音声応答のフローを作成できます。ノンプログラミングでフローが作成でき、プログラミング知識がない人でも自動応答システムを構築することが可能です。

GitHub Actionsを作成する

今回作成する開発フローの想定

今回は、以下のようなgit flowを想定して、master branchへマージされたタイミングで特定のStudio Flowへ最新のフローをデプロイします。

master branchへマージ

GitHubに環境変数を設定

workflowにAccount SIDやAuthTokenをハードコードしてしまうと、100%悪用されてしまうのでGitHubに環境変数として、Account SID、AuthToken、Flow SIDを設定します。

Account SIDとAuthToken

Twilioのコンソールを開き、Account SIDとAuthTokenを取得します。

Account SIDとAuthTokenを取得し

Flow SID

今回は最初にフローを作成します。
まず、Studioの画面を開きます。

Studioの画面を開きます

Studioの画面が開けたら、新規フローを作成して、任意の名前を設定します。

「Start from scratch」を選択して、Flowを作成します。

Flowが作成できたら、一覧を開きFlow SIDを確認します。

GitHubに環境変数を設定

Actionsを設定したいリポジトリを開いてSettings画面を開きます。

Settings画面が開けたら、「Secrets」を選択して、環境変数設定画面を開きます。

環境設定画面を開いたら、「Add a new Secret」をクリックし、設定画面を開きます。

開いた画面に、前項で確認したAccount SID、AuthToken、Flow SIDを設定します。

Name Value
TWILIO_ACCOUNT_SID Account SID
TWILIO_AUTH_TOKEN Auth Token
TWILIO_FLOW_SID Flow SID

workflowを作成

設定が完了したら、workflowを作成します。
Actionsタブを開いて、「set up a workflow yourself」をクリックします。

workflowを作成

以下のyamlを貼り付けて、「start commit」をクリックします。

name: Deploy Studio Flow

# masterブランチへプッシュされたときにこのActionを起動します。
on:
push:
branches:
- master

jobs:
# jobの名前を設定します。
deploy:
# 実行環境を指定します。
runs-on: ubuntu-18.04

# 挙動を設定します。
steps:
# actionsのcheckoutのv2 APIを利用します。
- uses: actions/checkout@v2
- name: Update Twilio Studio Flow
# 環境変数を設定します。
env:
TWILIO_ACCOUNT_SID : $
TWILIO_AUTH_TOKEN : $
TWILIO_FLOW_SID : $
run: |
# デプロイするAPIを実行します。
# Definitionにはデプロイしたいファイルパスを設定します。今回はflow/flow.jsonをデプロイします。
curl -X POST https://studio.twilio.com/v2/Flows/${TWILIO_FLOW_SID} --data-urlencode "CommitMessage=Prod release v2" --data-urlencode "Definition@flow/flow.json" --data-urlencode "Status=published" -u ${TWILIO_ACCOUNT_SID}:${TWILIO_AUTH_TOKEN}

テストする

設定ができたら、テストしてみます。
gitを用いて、develop ブランチを作成し、以下jsonファイルをflowフォルダの中にflow.jsonという名前で作成し、コミットします。

{
"states": [
{
"transitions": [
{
"event": "incomingMessage"
},
{
"event": "incomingCall",
"next": "SayHello"
},
{
"event": "incomingRequest"
}
],
"type": "trigger",
"name": "Trigger",
"properties": {
"offset": {
"y": 0,
"x": 0
}
}
},
{
"transitions": [
{
"event": "audioComplete"
}
],
"type": "say-play",
"name": "SayHello",
"properties": {
"say": "こんにちは、世界",
"voice": "alice",
"language": "ja-JP",
"loop": 1,
"offset": {
"y": 240,
"x": -140
}
}
}
],
"initial_state": "Trigger",
"flags": {
"allow_concurrent_calls": true
},
"description": "Hello World"
}

コミットできたら、masterブランチに向けたプルリクエストを作成し、マージしてみます。

Actionsを開いて、ログを確認すると、ちゃんとデプロイできているのが確認できました。

masterブランチに向けたプルリクエスト

まとめ

Twilio Studioを利用することで、複雑な自動音声応答を簡単に作成することができるようになりました。
しかし、今まではコンソール上でしか操作できず、バージョン管理などが難しく開発者には敬遠されているところもありました。
Twilio Studio API v2がリリースに伴い、開発に伴うリスクも軽減できるようになります。
これを機にTwilio Studioを使って、自動音声応答を活用したサービスを作ってみるのはいかがでしょうか。

アプリケーションエンジニア 葛 智紀
アプリケーションエンジニア 葛 智紀

前職でiOS、Androidのネイティブアプリケーション開発、AngularやLaravelを用いたウェブアプリケーション開発に従事。KDDIウェブコミュニケーションズではTwilioの最新情報の発信やTwilioを用いた地域課題解決を担当。 個人では、Google Developer Group Tokyoのオーガナイザーを務める。

CTA_まずはtwilioを使ってみる。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例