Twilio CLIプロジェクト

16593 ワード
GitHubActions twilio twilio テキストリンク

はじめに

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

前回、以下のような記事をアップしました。
GitHubのActionsを使って、Twilio Functionのテストとデプロイを自動化する

これはこれで、GitHub に Push したタイミングで Twilio Serverless にデプロイされるのでとても便利なのですが、Twilio の AccountSid とかの環境変数を GitHub のシークレット設定内にスタティックで記載するしかなく、１つの GitHub 上で管理している同じプログラムを、別のサブアカウントでも利用している場合などに対応ができません。
（SaaS 系のサービスをしていると、お客さんごとにサブアカウントを分けて管理するのが一般的で、その場合はお客さんごとにサーバーレスのデプロイをしなくてはならず、やむなくローカルの Twilio CLI Profile を切り替えてデプロイしたりと、非常に面倒なんです）

そこで今回は、GitHubへのPushのタイミングではなく、こちらから指示をしたタイミングでGitHub上でデプロイをさせようと思います。そして、呼び出しの際にパラメータとして環境変数を渡したいと思います。

何をするのか

Twilio CLI を使うと、コマンドベースで Functions のデプロイが実行できますが、今回は GitHub の Actions の、repository_dispatch というイベントをフックさせることでワークフローを実行させます。

GitHub Actions については、以下の記事を御覧ください。
https://github.co.jp/features/actions
repository_dispatch については、以下の記事を御覧ください。
https://docs.github.com/ja/rest/reference/repos#create-a-repository-dispatch-event

任意のタイミングで、GitHub API を使って repository_dispatch を呼び出すことで、具体的には以下の作業が自動的に GitHub 上で実行されます。すべてのステップが正常に完了したときにデプロイが行われ、いずれかのステップが失敗するとデプロイはされません。

  1. GitHub 上にデプロイ用の環境（ubuntu）を用意します。
  2. Node.js の準備をします。
  3. 必要なライブラリをインストールします。
  4. Twilio CLI のインストールと、Serverless Plugins のインストールをします。
  5. Twilio 上にデプロイします。

準備

以下の準備をお願いします。

  • Twilio アカウント
  • GitHub アカウント

ローカルでテストをしてから実行したい場合は、さらに以下の環境が必要です。

  • Node.js(v.12.x）
  • Twilio CLI
  • Twilio CLI Serverless Plugins

CLI については、以下の記事を参考にしてください。
Twilio CLI（セットアップ編）
Twilio CLI（サーバーレス開発編）

ハンズオン

ではさっそく始めましょう。

GitHub のパーソナルアクセストークンの取得

  • GitHubにログインし、右上の自分のアイコンから Settings を選択します。
  • 左側のリストにある Developer settings を選択します。
  • Personal access tokensを選択します。
  • 画面上部にある Generate new token を押します。
  • 確認のためパスワードが聞かれるので、パスワードを入力します。
  • Note 欄に、適当な名前をつけます。

  • Select scopes の中から、repo にだけチェックを入れます（repo の配下がすべて選択されます）。

  • Generate token ボタンを押します。

  • 生成されたトークン文字列をコピーします（この画面でしか確認ができないため、必ず控えておきましょう）。

リポジトリーの複製

次に、GitHub にログインしている状態で、以下のリポジトリーを開きます。
https://github.com/mobilebiz/twilio-runtime-github-actions2

次に、画面右上にある Fork ボタンを押して、このリポジトリをフォークします。

しばらくすると、ご自分の環境内に先程のリポジトリがコピーされます。

Actions の有効化

次に、Actions の有効化を行います。今回は、別の人のリポジトリをフォークして作成したため、デフォルトで GitHub Actions が無効になっています。有効にするには、Actions タブに移動し、中央の緑のボタンを押します。

＜注意＞
GitHub の Actions で指定されたワークフローについては、GitHub にてセキュリティチェックがされているわけではないので、実行するためにはワークフローが引き起こす内容について十分に理解する必要があります。

複製したリポジトリーをローカルに取り込む

git clone https://github.com/[ご自分のGitHubアカウント名]/twilio-runtime-github-actions2
cd twilio-runtime-github-actions2
npm install

ワークフローを確認する

.github/workflowsディレクトリの中に、今回 GitHub 上で実行されるワークフローのauto.ymlがありますので、そちらをエディタで開きます。

name: Twilio CI Auto

on:
  repository_dispatch:
    types: [setup] # <-- GitHub API で呼び出す際に、ここで指定した値をパラメータで指定します。

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v1
        with:
          node-version: "12.x"
      - name: Install dependencies for the twilio function
        run: npm ci
      - name: Install twilio cli and run deploy command
        env: # ↓ ここにある3つの環境変数も、Git Hub API を呼び出す際に設定します。
          TWILIO_ACCOUNT_SID: ${{ github.event.client_payload.TWILIO_ACCOUNT_SID }}
          TWILIO_API_KEY: ${{ github.event.client_payload.TWILIO_API_KEY }}
          TWILIO_API_SECRET: ${{ github.event.client_payload.TWILIO_API_SECRET }}
        run: npm install twilio-cli -g && twilio plugins:install @twilio-labs/plugin-serverless
      - name: Run hello.sh
        run: sh hello.sh # <-- シェルが実行できることを確認するために入れてあります。
      - name: Deploy the serverless
        env:
          TWILIO_ACCOUNT_SID: ${{ github.event.client_payload.TWILIO_ACCOUNT_SID }}
          TWILIO_API_KEY: ${{ github.event.client_payload.TWILIO_API_KEY }}
          TWILIO_API_SECRET: ${{ github.event.client_payload.TWILIO_API_SECRET }}
        run: twilio serverless:deploy --service-name=example-deployed-with-github-actions2 --production --force --runtime node12

ワークフローファイルの仕様については、以下のドキュメントを御覧ください。
https://docs.github.com/ja/actions/reference/workflow-syntax-for-github-actions

環境ファイルの設定

リポジトリに含まれている.env.exampleをコピーします。

cp .env.example .env

コピーした.envファイルをエディタで開き、各項目を設定します。
ここで指定した AccountSid の中に Functions がデプロイされます。
API Key と API Secret も必要になりますので、生成していない場合は事前に作成しておいてください。

項目 内容
GITHUB_ID GitHub のアカウント名※
GITHUB_PERSONAL_ACCESS_TOKEN 前述した GitHub のパーソナルアクセストークン
TWILIO_ACCOUNT_SID Twilio の Account Sid
TWILIO_API_KEY Twilio の API Key
TWILIO_API_SECRET Twilio の API Secret

※GitHub アカウント名は、`https://github.com/[ここの部分です]/

GitHub API を呼び出してデプロイ

今回、GitHub Actions を呼び出すためのプログラム（request.js）も用意してあります。

request.js
require("dotenv").config();
const axios = require("axios");
const data = JSON.stringify({
  event_type: "setup",
  client_payload: {
    TWILIO_ACCOUNT_SID: process.env.TWILIO_ACCOUNT_SID,
    TWILIO_API_KEY: process.env.TWILIO_API_KEY,
    TWILIO_API_SECRET: process.env.TWILIO_API_SECRET,
  },
});

const config = {
  method: "post",
  url: `https://api.github.com/repos/${process.env.GITHUB_ID}/twilio-runtime-github-actions2/dispatches`,
  headers: {
    Accept: "application/vnd.github.v3+json",
    Authorization: `token ${process.env.GITHUB_PERSONAL_ACCESS_TOKEN}`,
  },
  data: data,
};

axios(config)
  .then((response) => {
    console.log(`Done. ${JSON.stringify(response.data)}`);
  })
  .catch((error) => {
    console.log(error);
  });

実行してみる

では、実際にリクエストを発行してみましょう。
.envファイルで指定した AccountSid 配下に、新しい Twilio Serverless 環境ができるはずです。

node request.js

実行状況については、GitHub のActionsメニューでリアルタイムで確認が可能です。

まとめ

今回は１つのコードを複数のアカウントで利用する場合に便利な使い方をご紹介しました。
GitHub Actions は DevOps でも活用できそうなので、ぜひ Twilio CLI と GitHub Actions を組み合わせた CI/CD の実現を試してみてください。

Twilio（トゥイリオ）とは

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

自己紹介 　
高橋克己（Katsumi Takahashi） 自称「赤い芸人」
グローバル・インターネット・ジャパン株式会社　代表取締役
株式会社KDDIウェブコミュニケーションズ　Twilio事業部エバンジェリスト

2001年より大手通信事業者の法人サービスの教育に携わり、企業における電話のしくみや重要性を研究。2016年よりTwilio事業部にジョインし、Twilioを使ったスマートコミュニケーションの普及活動を精力的に行っている。
2019 Twilio Champions