3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-08-09

概要

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を使用するように変更
3
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?