yucatio@システムエンジニア

趣味で作ったものいろいろ

Cloud Functions for Firebaseの導入とfirebase init functionsの実行 (STEP 3 : 他のユーザのタスクが見れるタスク管理アプリを作成する - React + Redux + Firebase チュートリアル)

Firebase

★前回の記事

yucatio.hatenablog.com

アプリにCloud Functions for Firebaseを導入します。

Cloud Functions for Firebaseでできること

Cloud Functions for Firebaseでは、ユーザがログインしたり、データベースに書き込まれた際に関数を実行できます。関数内では、以下の処理などを行うことができます。

  • DBへの書き込み
  • ユーザへのプッシュ通知
  • 外部API連携

今回は、タスクが作成・更新された時に、DBに書き込みを行います。

firebase init functionsの実行

Cloud Functionsを使用するために、firebase init functionsを実行して、Cloud Functionsに必要なファイルを作成します。

# プロジェクトのルートディレクトリに移動
$ sh todo-sample

$ firebase init functions

firebase initの時と同様、また燃えているFirebaseの文字が表示されます。

f:id:yucatio:20181021232602p:plain

“既存のFirebaseプロジェクトディレクトリを初期化しようとしていることに気をつけてください。”とのメッセージが表示されます。

f:id:yucatio:20181021232647p:plain

Project Setupはすでに完了しているのでスキップされます。

f:id:yucatio:20181021232726p:plain

Function Setupでは、使用する言語が選べます。このチュートリアルでは、JavaScriptを使用します。

f:id:yucatio:20181021232824p:plain

続いて、ESLintを使用するかどうか聞かれますので、”y”を選択します。

f:id:yucatio:20181021232850p:plain

npmで依存するパッケージを自動でインストールするか聞かれますので、”Y”を入力します。

f:id:yucatio:20181021232920p:plain

依存パッケージがインストールされ、設定が完了しました。

f:id:yucatio:20181021233507p:plain

ディレクトリ構成は以下のようになります。

todo-sample/
|_ functions/      # 新規ディレクトリ
   |_ .eslintrc.json
   |_ index.js
   |_ node_modules/
   |  |_ ...modules...
   |_ package-lock.json
   |_ package.json

firebase.jsonに以下の設定が追加されています。

{
  // 略
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  }
}

以上でCloud Functions for Firebaseの開発を行う準備ができました。

★次回の記事

yucatio.hatenablog.com

★目次

yucatio.hatenablog.com