Firebase Cloud Functions で Twitter API と連携してみる #JavaScript

Vue.js で作ったフィードリーダーで Tweet を取得するための API を Cloud Functions for Firebase で作ってみました。

実装サンプル： GitHub

やりたかったこと

今回は以下の要件とともに Cloud Functions を実装してみました。

CORS/cache などのミドルウェアを使いたい。
API エンドポイントとモジュールの単体テストをしたい。
自動テストで単体テストを回したい。

API を動かすまでの手順

リポジトリのプロジェクトのセットアップ手順を補足しながら追っていきます。

必要なもの

Twitter API を使うためのクレデンシャル
Twitter Application Management から取得します。
Firebase プロジェクトの料金プランを有料版に変更
外部 API と通信するため、Flame もしくは Blaze に変更します。
Firebase Tools のインストール
Firebase Console での Firebase プロジェクト作成

Firebase 環境変数の設定

Twitter のクレデンシャルと API で使用する設定を　Firebase　CLI で環境変数に設定します。

$ firebase functions:config:set \
credential.twitter.consumer_key="YOUR_CONSUMER_KEY" \
credential.twitter.consumer_secret="YOUR_CONSUMER_SECRET" \
credential.twitter.access_token_key="YOUR_ACCESS_TOKEY_KEY" \
credential.twitter.access_token_secret="YOUR_ACCESS_TOKEY_SECRET" \
... 省略 ...

設定の確認

$ firebase functions:config:get
{
  "credential": {
    "twitter": {
      "consumer_key": "YOUR_CONSUMER_KEY",
      "consumer_secret": "YOUR_CONSUMER_SECRET",
      "access_token_secret": "YOUR_ACCESS_TOKEY_SECRET",
      "access_token_key": "YOUR_ACCESS_TOKEY_KEY",
      ... 省略 ...
    }
  }
}

ローカル環境で API を実行する場合は、 {firebase プロジェクトディレクトリ}/functions ディレクトリ内でコンフィグ用ファイルを作成してから動作を確認しました。

$ firebase functions:config:get > .runtimeconfig.json
$ firebase serve --only functions

API 処理の実装

API エンドポイント処理

今回はやりたかったことの要件を満たしつつユースケースをAPI 処理を実装していきます。

ミドルウェアの使用

今回は、API エンドポイント処理を単体テスト可能にするため、Firebase SDK の Cloud Function エンドポイント処理用のメソッドのコールバック処理内でミドルウェアを指定しています。
パラメータに Express.js のインスタンスを指定する方が簡潔なコードになるのですが、単体テストの書き方がわかりませんでした

index.js

const cors = require('cors')({origin:true})
const compression = require('compression')()
...
exports.topics = functions.https.onRequest((request, response) => {
    cors(request, response, () => {
        compression(request, response, () => {
            // API ビジネスロジック
            ...

Twitter API との連携

ツイートデータのキャッシュ
Twiiter API のリクエストレートリミット対策をしたかったので、ツイートデータを memory-cache モジュールでキャッシュするようにしました。

$ npm install --save memory-cache

ユニットテストで Firebase 環境変数を使う

CI 環境で実行するユニットテストで Firebase 環境設定を取得する方法がわからなかったので、設定取得処理をラップしてモックできるようにしました。

index.js

const configModule = new ConfigModule(functions.config())

ユニットテスト

テスト用のフレームワークは Jest を使いました。
{Firebase プロジェクト}/functions ディレクトリでインストールコマンドを実行したらテストが実行可能になります。

$ npm install --save-dev jest

API やモジュールのテストケースを実装したら実行します。

$ npm test

インテグレーションテスト

今回はユニットテストでは環境設定の取得やモジュールをモックしているので、実際の設定を使用した動作確認はインテグレーションテストのスコープに入れました。CI 環境での自動テストは未設定のため手動で実行しています。

ローカルサーバ起動コマンド

$ firebase serve --only functions

http://localhost:5000/{プロジェクトID}/{リージョン}/topics にアクセスして Tweet データが表示されるか確認します。

ローカルサーバで API の動作が確認できたら、Vue.js で作ったフィードリーダーの E2E テストでも動作を確認しています。

QA テスト

QA 用の Firebase プロジェクトにデプロイして動作確認をします。

$ firebase deploy --only functions

https://{QA用プロジェクトの公開用サブドメイン}.cloudfunctions.net/topics にアクセスしてローカルテスト同様の Tweet データが表示されるか確認します。インテグレーションテストと同様にクライアントとの接続テストも確認してみます。

Firebase Cloud Functions で Twitter API と連携してみる