Help us understand the problem. What is going on with this article?

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

概要

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

次回: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を使用するように変更
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした