☎️

Netlify FuntionsでTwilioからSMSを送る

2023/02/02に公開

JavaScript

Netlify Functionsの概要

Netlify FunctionsとはNetlifyが提供するサーバーレス・ファンクションの仕組みです。AWS Lambdaを簡便に使用できるようにした仕組みです。こちらに公式の説明があります。

Netlify Functions

サイトをNetlifyにデプロイする際に、「/netlify/functions」というディレクトリを作成して、そこにJavaScriptを保存してデプロイすると、自動的にエンドポイントが割り当てられて、以下のようなURLからHTTPリクエストで呼び出せるというものです。

Netlifyに割り当てられたドメイン/.netlify/functions/＜スクリプト名＞（netlifyの前にドットがつくことに注意）

最後のスクリプト名はどうやって決まるのでしょうか。例えば以下のURLで呼び出したいとします。スクリプト名は「hello」ですね。

<sub domain>.netlify.app/.netlify/functions/hello

その場合、公式の説明に寄ると以下の3パターンのファイルとディレクトリの命名に従えば、それが認識されます。

/netlify/functions/hello.js
/netlify/functions/hello/hello.js
/netlify/functions/hello/index.js
こんなファイル名でJavaScriptをデプロイすれば、それを呼び出すことができるようになります。

Twilioとは

Twilioとはクラウド通信プラットフォームです。開発者はWeb APIを使って、電話をかけたり、テキストメッセージを送ったり、その他の通信機能をプログラムすることができます。これを使用することで、開発者はアプリケーション、製品、システムに語音とメッセージングの機能を追加できますが、インフラストラクチャを自分で構築する必要はありません。

SMSを使用する番号を取得する

Phone Numbersのメニューから「Buy a number」を選択します。TwilioではSMSはアメリカの電話番号を使用します。オプションとしてSMSのチェックがついている番号を購入します。

取得するトークンなど

番号を取得したら、Twilioから以下の3つの情報を取得しておきましょう。

Account SID
Auth Token
電話番号

ビルド時にTwilioを依存関係に追加する

ローカル環境でもTwilioを利用するためのツールセットをインストールします。

pnpm install twilio-run --save-dev

npm install twilio-run --save-dev

などでpackage.jsonに
"twilio-run": "^3.5.3"
といった記述を加えてくれます。これでNetlifyにデプロイした際にもきちんとビルドしてくれるようになります。

Netlifyでの環境変数の設定

これらの情報を環境変数として入れておきましょう。

Netlifyにログインし対象のサイトを選択します。Site settingsの中の「Build & Deploy」の「Environment」から環境変数を設定できます。

環境変数を編集できるフィールドから入力できます。「New variable」というボタンを押すと、どんどん追加できます。

「Key」というフィールドに「TWILIO_ACCOUNT_SID」と入力します。「Value」のところには、Twilioから取得したAccount SIDを入力します。同じように「TWILIO_AUTH_TOKEN」と「TWILIO_SMS_PHONE_NUMBER」も入れましょう。

これでNetlify上での環境変数の設定が完了です。

実際のコード

ローカルの開発環境に「/netlify/functions」というディレクトリを作成しましょう。そこにコードを保存します。ここではsms.jsというファイル名にしました。

const TwilioSdk = require('twilio')
const accountSid = process.env.TWILIO_ACCOUNT_SID
const authToken = process.env.TWILIO_AUTH_TOKEN
const twilio = new TwilioSdk(accountSid, authToken)

exports.handler = (event, context, callback) => {
    const body = JSON.parse(event.body)
    const messageBody = "SMSテキストのテスト"

    const smsMessage = {
        to: body.to,
        body: messageBody,
        from: process.env.TWILIO_SMS_PHONE_NUMBER,
    }

    twilio.messages.create(smsMessage).then((message) => {
        return callback(null, {
            statusCode: 200,
            body: JSON.stringify({
                message: 'SMSが正常に送信されました！',
                data: message,
            })
        })
    }).catch((error) => {
        console.log('SMSの送信に失敗', error)
        return callback(null, {
            statusCode: error.status,
            body: JSON.stringify({
                message: error.message,
                error: error,
            })
        })
    })
}

これをNetlifyにデプロイします。Githubとの連携が済んでいれば、pushするだけです。Netlifyの管理画面でDeployのログをチェックして、Publishedになっていれば成功です。

これで、https://割り当てられたサブドメイン.netlify.app/.netlify/functions/sms　
にサーバーレス・ファンクションが設定されました。

確認

作成したコードではPOSTリクエストでtoという値に送信先の電話番号を入力すればメッセージが送られるはずです。コマンドから叩いてみましょう。

curl -X POST -H 'Content-Type: application/json' -d '{"to" : "+81xxxxxxxx" }' https://割り当てられたサブドメイン.netlify.app/.netlify/functions/sms

このコマンドを叩くとレスポンスとしてのjsonが表示されるはずです。うまくいっていればコードに記載した正常系のメッセージ「SMSが正常に送信されました！」が見えるはずです。

送った携帯のSMSに「SMSテキストのテスト」というメッセージが送られてきていれば完成です。

費用について

執筆時の資料では1通あたり8.15円となっています。番号取得には165円、その番号を維持するために1ヶ月110円が必要です。