本記事は、 Firebase の Cloud Functions をデプロイする手順を画像付きでまとめたものです。
自己学習の備忘録がてら、失敗時の解決方法までまとめています。
Firebaseはこれから使ってみたい人、使っているけどFunctionsを使ったことがない人。
本記事を参考にしてみてください。
Functionsを使う際の注意事項
Functionsは無料プランのSparkでは使えません。
従量課金のBlazeプランにする必要があります。
事前にnpm(Node.js)を使える環境にする必要があります。
Functionsの環境構築
Firebaseへアクセスします。
https://firebase.google.com/?hl=ja
Firebaseのプロジェクトを作成
Firebaseのプロジェクトの作成は、こちらの記事でまとめています。
パッケージのインストール
Firebaseの左メニューの「Functions」をクリックします。
「始める」をクリックします。
Firebaseをインストールするコマンドをコピーします。
コピーしたコマンドをコマンドプロンプトで実行します。
npm install -g firebase-tools
「firebase」と入力して実行し、Options等が表示されればインストール成功です。
$ firebase
Usage: firebase [options] [command]
次に、Firebaseへログインします。
firebase login
Firebaseへログインすると、コマンドプロンプト上にログインの成功が表示されます。
$ firebase login
i Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? Yes
i To change your data collection preference at any time, run `firebase logout` and log in again.
Visit this URL on this device to log in:
ログイン - Google アカウント
Waiting for authentication...
✔ Success! Logged in as xxxxxxxxxx@gmail.com
インストールに失敗する場合
npmのディレクトリを手動で変更する
1.コマンドラインのホームディレクトリに、グローバルインストール用のディレクトリを作成します。
mkdir ~/.npm-global
2.新しいディレクトリパスを使用するようにnpmを構成します。
npm config set prefix '~/.npm-global'
3.「~/.profile」に次の行を追加します。
※環境によっては「.zshrc」に追加します
export PATH=~/.npm-global/bin:$PATH
4.システム変数を更新します。
npm install -g jshint
5.インストールコマンドを実行します。
npm install -g firebase-tools
Node.jsのバージョンを見直す
Firebase CLIをインストールするには、Node.js v10.13.0以降が必要です。
私はこれで失敗してました。
今使用しているNode.jsのバージョンを確認してみましょう。
node -v
私は「v4.8.6」と表示されました。
古過ぎですね。。
対象のバージョン未満の場合、バージョンアップを行います。
2022年2月末現在、安定版のバージョンは「v16.14.0」です。
このバージョンにアップデートしてみます。
nodebrew use v16.14.0
再度バージョンの確認をしてみましょう。
node -v
バージョンが上がっているかと思います。
インストールコマンドを実行します。
npm install -g firebase-tools
プロジェクトの初期化
プロジェクトを開始のコマンドをコピーします。
コピーしたコマンドをコマンドプロンプトで実行します。
firebase init
矢印キーでカーソルを移動させ、スペースキーで「Functions」を選択しエンターを押します。
$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/xxxxx
Before we get started, keep in mind:
* You are initializing your home directory as a Firebase project directory
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter t
o confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to pro
ceed)
◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default i
nstance
◯ Firestore: Configure security rules and indexes files for Firestore
❯◉ Functions: Configure a Cloud Functions directory and its files
◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
(Move up and down to reveal more choices)
既存のプロジェクトを選択します。
「firebase init」ではディレクトリは作られないため、事前に作成する必要があります。
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
存在するプロジェクトを選択します。
? Select a default Firebase project for this directory: (Use arrow keys)
❯ tensei-shinai (tensei-shinai)
開発言語を選択します。
JavascriptかTypeScriptが選択できます。
=== Functions Setup
A functions directory will be created in your project with sample code
pre-configured. Functions can be deployed with firebase deploy.
? What language would you like to use to write Cloud Functions? (Use arrow keys)
❯ JavaScript
TypeScript
Lintを使用するかどうか選択します。
Lintとは、プログラムの内容を分析し、問題点を指摘してくれる素晴らしいツールのことです。
ですが、公式のサンプルのデプロイでもLintのエラーとなるため、使用しないようにします。
? Do you want to use ESLint to catch probable bugs and enforce style? (y/N) N
今すぐに依存関係をインストールします。
? Do you want to install dependencies with npm now? (Y/n) y
依存関係のインストールが完了し、completeが表示されれば完了です。
✔ Firebase initialization complete!
関数のサンプル
addMessage()
は、テキスト値を受け取る URL を公開し、そのテキスト値を Cloud Firestore に書き込みます。makeUppercase()
は、Cloud Firestore の書き込みでトリガーされ、テキストを大文字に変換します。
自分の環境にfunctionsフォルが作成され、index.jsが存在します。
私の環境(Mac)だと「Users/xxx/functions/index.js」
index.jsの中身を以下に書き換えます。
// The Cloud Functions for Firebase SDK to create Cloud Functions and set up triggers.
const functions = require('firebase-functions');
// The Firebase Admin SDK to access Firestore.
const admin = require('firebase-admin');
admin.initializeApp();
// Take the text parameter passed to this HTTP endpoint and insert it into
// Firestore under the path /messages/:documentId/original
exports.addMessage = functions.https.onRequest(async (req, res) => {
// Grab the text parameter.
const original = req.query.text;
// Push the new message into Firestore using the Firebase Admin SDK.
const writeResult = await admin.firestore().collection('messages').add({original: original});
// Send back a message that we've successfully written the message
res.json({result: `Message with ID: ${writeResult.id} added.`});
});
// Listens for new messages added to /messages/:documentId/original and creates an
// uppercase version of the message to /messages/:documentId/uppercase
exports.makeUppercase = functions.firestore.document('/messages/{documentId}')
.onCreate((snap, context) => {
// Grab the current value of what was written to Firestore.
const original = snap.data().original;
// Access the parameter `{documentId}` with `context.params`
functions.logger.log('Uppercasing', context.params.documentId, original);
const uppercase = original.toUpperCase();
// You must return a Promise when performing asynchronous tasks inside a Functions such as
// writing to Firestore.
// Setting an 'uppercase' field in Firestore document returns a Promise.
return snap.ref.set({uppercase}, {merge: true});
});
Cloud Firestoreを初期化
関数のサンプルを実行するためには、Cloud Firestoreを初期化しておく必要があります。
Cloud Firestoreとはデータベースのことです。
詳しい内容は別の機会に解説していきます。
以下コマンドをコマンドプロンプトで実行します。
firebase init firestore
Firestoreのルールを使用します。
$ firebase init firestore
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/Users/xxxxx
Before we get started, keep in mind:
* You are initializing your home directory as a Firebase project directory
* You are initializing within an existing Firebase project directory
=== Project Setup
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
i Using project tensei-shinai (tensei-shinai)
=== Firestore Setup
Firestore Security Rules allow you to define how and when to allow
requests. You can keep these rules in your project directory
and publish them with firebase deploy.
? What file should be used for Firestore Rules? (firestore.rules) y
firestore.indexes.jsonを使います。
そのままエンターを押します。
? What file should be used for Firestore indexes? (firestore.indexes.json)
以上でCloud Firestoreの初期化が完了です。
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
関数をデプロイ
関数をデプロイのコマンドをコピーします。
コピーしたコマンドをコマンドプロンプトで実行します。
firebase deploy
無事にデプロイ成功しました。
$ firebase deploy
=== Deploying to 'tensei-shinai'...
i deploying functions
i functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i functions: ensuring required API cloudbuild.googleapis.com is enabled...
✔ functions: required API cloudfunctions.googleapis.com is enabled
⚠ functions: missing required API cloudbuild.googleapis.com. Enabling now...
✔ functions: required API cloudbuild.googleapis.com is enabled
i functions: preparing functions directory for uploading...
i functions: packaged functions (72.17 KB) for uploading
✔ functions: functions folder uploaded successfully
i functions: creating Node.js 16 function addMessage(us-central1)...
i functions: creating Node.js 16 function makeUppercase(us-central1)...
✔ functions[addMessage(us-central1)] Successful create operation.
✔ functions[makeUppercase(us-central1)] Successful create operation.
Function URL (addMessage(us-central1)): https://us-central1-tensei-shinai.cloudfunctions.net/addMessage
i functions: cleaning up build files...
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/tensei-shinai/overview
デプロイに失敗する場合
Lintを有効にしている場合、Lintを使用しないようにしてみましょう。
以下を削除します。
Users/xxx/firebase.json
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
]
サンプルの実行
さっそくサンプルを実行してみましょう。
デプロイ成功に以下のURLが出力されていました。
Function URL (addMessage(us-central1)): https://us-central1-tensei-shinai.cloudfunctions.net/addMessage
このURLの後ろに「?text=uppercasemetoo」を追加し、Chrome等のブラウザで開きます。
https://us-central1-tensei-shinai.cloudfunctions.net/addMessage?text=uppercasemetoo
ブラウザに以下が表示されました。
※IDは都度変わります
{"result":"Message with ID: s3uVarvUoW6BdxN5KYHC added."}
Cloud Firestoreに追加されていればOKです。
まとめ
Functionsを設定し、デプロイ、動作確認できるところまでまとめました。
次はFunctionsを使って何かできないかを考え、実行していきたいと思います。