コピペで使うFirebase【立ち上げ編】 #JavaScript

概要

firebaseを使用する際に、コピペで動かしたいと思い設定手順を投稿しようと思いました。

プロジェクトを作成してpackage.jsonを生成

$ mkdir [project名]
$ cd [project名]
$ npm init

firebaseを設定

firebase-toolsをインストール

$ npm install --global firebase-tools

Firestore/Functions/Hosting/Storageを設定
基本的に初期設定のままでいいので全部yesを選択しましょう

$ firebase init
 ...
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◉ Firestore: Deploy rules and create indexes for Firestore
 ◉ Functions: Configure and deploy Cloud Functions
 ◉ Hosting: Configure and deploy Firebase Hosting sites
❯◉ Storage: Deploy Cloud Storage security rules
 ...
 // 使用するプロジェクトを設定。
$ firebase use

デプロイ用のnpm-scriptsを追加します。
※　設定しなくても大丈夫ですが、以降npm-scriptで設定したaliasを使用します。

追加するのは、firestore・storageのみデプロイと全てのデプロイ
public/functionsのローカルサーバー起動。

package.json

...
    "scripts": {
        "deploy": "firebase deploy",
        "deploy-rules": "firebase deploy --only firestore:rules,storage:rules",
        "serve-hosting": "firebase serve --only hosting",
        "serve-functions": "firebase serve --only functions",
        ...
    },
...

Functionsのコメントも外しましょう。

functions/index.js

const functions = require('firebase-functions');

// // Create and Deploy Your First Cloud Functions
// // https://firebase.google.com/docs/functions/write-firebase-functions


-// exports.helloWorld = functions.https.onRequest((request, response) => {
-//  response.send("Hello from Firebase!");
-// });
+exports.helloWorld = functions.https.onRequest((request, response) => {
+ response.send("Hello from Firebase!");
+});

動作確認

// public
$ npm run serve-hosting
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000

// functions
✔  functions: Emulator started at http://localhost:5000
i  functions: Watching "/Users/user/[project名]/functions" for Cloud Functions...
✔  functions[helloWorld]: http function initialized (http://localhost:5000/xxxx/us-central1/helloWorld).

デプロイ

デプロイが成功するとそれぞれのURLが表示されます。

$ npm run deploy
...
Function URL (helloWorld): https://xxxxx // Functions/index.js
Project Console: https://xxxx　// コンソールのURL
Hosting URL: https://xxxxx // public/index.html

エラー集 or ハマったこと

$ firebase init
> Error: Cloud resource location is not set for this project but the operation you are attempting to perform in Cloud Firestore requires it. Please see this documentation for more details: https://firebase.google.com/docs/projects/locations.

// Firebase Console > Settings > [全般] > Google Cloud Platform（GCP）リソース ロケーション　
// ・ロケーションを選択する

$ npm run deploy-rules
> Error: The Cloud Firestore API is not enabled for the project

// Google Cloud Platform > Firestore
// ・別のデータベースが設定されているため、Firestoreを使用するように変更