ユーザ用ツール

サイト用ツール


dialy:setupfirebaseproject

Google Firebase のプロジェクトの設定

Firebase というのは Google 社が2014年に買い取ったモバイルアプリ、Webアプリ向けのデータ & 認証の BaaS ( backend-as-a-service ) です。 データベースは NoSQL のドキュメント型で、認証と連携したアクセス権の設定が細かくできます。 認証はメアドとパスワードの他、メールでログイン用のリンクを取得する手順、OAuth ( 「○○でログイン」 ) などが用意されています。 アプリの案内や、 SPA ( Single-page application ) や PWA ( Progressive web application ) のアプリを置くための Webホスティングもできます。 単純なアプリでしたらサーバ側のプログラムは無しでもいけます。 ストレージや IoT などの Google Cloud の他のサービスとの連携もできます。

以下、この Firebase の新規プロジェクトの作成手順です。

アカウントと支払い

Firebase のプロジェクトは Google Cloud のプロジェクトなので、 Google Cloud のアカウントが無ければ作成してください。 使用料の支払いも Google Cloud のプロジェクトとしての請求になるので、 Google Cloud のコンソールで支払い方法の設定をしてください。

手順は Google Cloud のページの案内の通りなので説明は省略します。

なお、基本機能だけを試用する場合は、支払いの設定は無しでだいじょうぶです。

Node.js

後述の Firebase CLI のために必要です。 8.x 以降であればよいと思います ( 2020年 4月 時点 )。

Linux の場合、 Windows 10 で WSL ( Windows Subsystem for Linux ) を利用する場合は ``yum`` とか ``apt`` で入れてください。 Mac は Homebrew 、 Windows で WSL を使わない場合は Chocolatey が無難です。

プロジェクトの設定

特に独自ドメイン名の設定などしない限り、プロジェクト名は Webホスティングのサブドメイン名になります。

テスト用にプロジェクト名に “-test” を追加した名称のプロジェクトも作っておくとよいです。

プロジェクト名が既に使われている場合は、数字をてきと〜に追加した名称を自動生成してくれます。

  1. コンソール にログインする。
  2. “+ Add project”
    1. “Project name” にプロジェクト名を入力して、もし、数字付きの名称が自動生成されたらそれでいいかどうか考える。いやならがんばって別の名称を考える。
    2. Google Analytics を使うか? と聞かれるので要不要を選択する。
    3. “Create project”
  3. プロジェクトのページの左側メニュー “Settings”
    1. “Project settings”
      1. “Google Cloud Platform (GCP) resource location” を選択する。 ( やり直し不可!! )
        • asia-northeast1 : 東京
        • asia-northeast2 : 大阪
        • asia-northeast2 : ソウル
      2. “Public-facing name” はプロジェクト名と同じでいいんじゃないかな。
      3. “Support email” はとりあえず自分のメアド。
      4. “Select a platform to get started” で今回は SPA にするので Web (</>) を選択する。
        1. “App nickname” はプロジェクト名と同じでいいんじゃないかな。
        2. “Also set up Firebase Hosting for …” は On にする。
        3. “Register App”
        4. HTMLの <head> に記載するコード・スニペットが表示されるが、後でも出てくるのでとりあえず先に進む。
        5. “Next”
        6. ``firebase-tools`` のインストール手順が表示されるので、まだなら実行する。 Node.js が必要。
        7. “Next”
        8. “Deploy to Firebase Hosting” の手順は後ほど。
        9. “Continue to console”
        10. “Firebase SDK snippet” に数種類表示されますが、必要なものを選んで使ってください。なお ``apiKey`` をソースにそのまま入れて GitHub の Public プロジェクトに Push すると「危ないことするな」とおこられます。
      5. “Users and permissions” にプロジェクトメンバーを追加する。
  4. プロジェクトのページの左側メニュー “Authentication”
    1. “Sign-in method” で必要なものを有効にする。
    2. “Templates”
      1. “Template language” : Japanese
  5. プロジェクトのページの左側メニュー “Database”
    1. “Go to Cloud Platform”
      1. Firebase のリアルタイム更新機能を使う場合は “SWITCH TO NATIVE MODE” ( やり直し不可!! )
      2. Go to Cloud Platform のページを閉じて Firebase の Database のページを更新すると “Data”, “Rules” などのメニューが表示される。設定はアプリの作成の中で。
  6. プロジェクトのページの左側メニュー “Storage” は必要であれば “Get started” で有効化する。
  7. プロジェクトのページの左側メニュー “Hosting” は特に設定は上記の “Settings” で設定済み。あとはコンテンツ作成後にデプロイすればよい。
  8. プロジェクトのページの左側メニュー “Storage” は必要であれば “Get started” で有効化する。

プロジェクトの作成

Quasar Framework の場合

$ quasar create project-name
$ cd project-name
$ firebase login
$ firebase init
$ firebase use project-name
$ firebase projects:list
このウェブサイトはクッキーを使用しています。 Webサイトを使用することで、あなたはあなたのコンピュータにクッキーを保存することに同意します。 また、あなたはあなたが私たちのプライバシーポリシーを読んで理解したことを認めます。 同意しない場合はウェブサイトを離れてください。クッキーに関する詳細情報
dialy/setupfirebaseproject.txt · 最終更新: 2020/07/11 23:48 by michinobu