概要
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を使用するように変更