Cloud FunctionsをTypeScriptで始めてみる
sukesanCloud FunctionsはTypeScriptに対応しているが、公式のチュートリアルではJavaScriptを選択していたり、初期化後にやや詰まったため、対応した内容をまとめていく。
sukesanまずはprojectの初期化を行う。
# Firebase CLI の初期化
firebase login
# Firestoreの初期化。利用中のプロジェクトに適用するためUse an existing projectを選択
firebase init firestore
# Cloud Functionsの初期化。利用中のプロジェクトに適用するためUse an existing projectを選択
firebase init functions
初期化後のディレクトリ構成は下記の通り。
.
├── firebase.json
├── firestore.indexes.json
├── firestore.rules
└── functions
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── index.ts
├── tsconfig.dev.json
└── tsconfig.json
下記のページに記載がある通りに進める。
index.tsがコメントアウトされているので、コメントアウトを外す。
その後、npm run serveを実行すると下記のエラーとなる。
$ npm run serve
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path xxx/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open 'xxx/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
functionsディレクトリに移動しないと実行できなかった。移動後に実行すると起動した。
sukesanチュートリアルに戻り、「必要なモジュールをインポートしてアプリを初期化する」から続ける。
インポート文の追加
import * as functions from "firebase-functions";
// 以下を追加
import * as admin from "firebase-admin";
admin.initializeApp();
addMessage関数とmakeUppercase関数を追加
チュートリアルに記載あるままにindex.tsに追加
sukesan再実行
追加した処理のトランスパイルが必要なので、一度emulatorsをshutdownして、再度npm run serveを実行。
実行ログを見るとaddMessageは追加されている。
✔ functions[us-central1-addMessage]: http function initialized (http://127.0.0.1:5001/PROJECT_NAME/us-central1/addMessage).
また、追加したmakeUppercase関数はFirestoreの特定のコレクションにドキュメントが作成された際に動く処理だが、そのままだと動かなさそうだった。ログを見ると、Firestoreのemulatorが動いていないので、このままだと実環境の方に影響が出るとのこと。
function[us-central1-addMessage]
The Cloud Firestore emulator is not running, so calls to Firestore will affect production.
package.jsonのserveコマンドを見ると、下記のとおりになっており、デフォルトだとCloud Functionsしか動かないようになっていた。
"serve": "npm run build && firebase emulators:start --only functions",
下記のように変更して、再度npm run serveを実行。
"serve": "npm run build && firebase emulators:start --only functions,firestore",
emulatorのoverviewを確認して、StatusがOnになっていることを確認。
sukesan動作確認
http://127.0.0.1:5001/PROJECT_NAME/us-central1/addMessage?text=testにアクセスするとレスポンスが表示される。
FIrestoreのemulatorを確認するとパラメータで渡した文字列とuppercaseに変換された文字列が登録されていることを確認。
残りは本番環境へのデプロイのみなので以上。チュートリアルだが細かいところで上手くいかないこともあったので参考になればと思う。