トップページ -> データベース研究スタート -> NoSQL データベースとインターネットストレージ -> Google Firebase の Cloud Firestore (クラウド・ファイアストア)で Web アプリが動くまで
[サイトマップへ]

Google Firebase の Cloud Firestore (クラウド・ファイアストア)で Web アプリが動くまで

金子邦彦研究室: データベース、人工知能(AI)、データサイエンスの融合により不可能を可能にする

目次

  1. Google Firebase でできること
  2. クラウド・ファイアストア(Cloud Firestore)を扱うプロジェクトの新規作成
  3. プロジェクトの削除
  4. Windows マシンでホスティングを行うように設定
  5. Ubuntu マシンでホスティングを行うように設定
  6. クラウド・ファイアストア(Cloud Firestore)で Web アプリを動かしてみる

Google Firebase でできること

オンラインストレージ

データベース: Python, JavaScript と相性が良い.

その他、認証(ID,パスワード)など(セキュリティや課金に必要)

※ iOS, Android, Web で動く.使用には Google のアカウントが必要


クラウド・ファイアストア(Cloud Firestore)を扱うプロジェクトの新規作成

  1. Firebase の Web ページを開く

    https://firebase.google.com/?hl=ja

    ※ このとき、google のアカウント(IDとパスワード)が必要になる可能性があります

  2. スタートガイド (GET STARTED)」をクリック

  3. Firebase コンソールの画面に変わるので確認する

  4. Firebase コンソールの画面で、「プロジェクトを追加」をクリック

    ※ このとき、いつまで待っても画面が変わらないというときは、Webブラウザで「サインアウト」してもう1度やり直すとうまく行くかもしれません.

  5. プロジェクトの追加

    プロジェクト名: 何でもよいが、あとで分かりやすい名前

    アナリティクスの地域: 日本

    チェックボックス: 同意できる場合のみチェック(同意できないときは、Firebase を使わない)

  6. 次へ」をクリック

  7. 画面が変わるので確認.

    まず、料金プランが「Spark プラン」になっていることを確認する. Spark プランは料金無料のプラン. データベースを使いたいので、「Cloud Firestore」をクリック

  8. クラウド・ファイアストア(Cloud Firestore)を作成して使いたいので、Cloud Firestore の下の「データベースを作成」をクリック

  9. クラウド・ファイアストア(Cloud Firestore)のセキュリティルールでは、 ロックモードかテストモードを選ぶ.

    ※ ここでは、試用することにしたい(実データは入れずに、手軽に試してみたい)ので、 「テストモードで開始」を選び「有効にする」をクリック

  10. データベースの作成が始まる。しばらく待つ。

  11. データベースの作成が終わると、画面が変わるので確認する

プロジェクトの削除

  1. プロジェクトの全般のWebページで、「Project Overview」の右横のボタンをクリック

  2. プロジェクトの設定」をクリック。

  3. 画面の下の「プロジェクトの削除」をクリック。

  4. すべてを確認、チェックしてから、「プロジェクトの削除」をクリック。

Windows マシンでホスティングを行うように設定

※ Ubuntu を使うときは、次のパートを見てください

  1. Windows マシンで、firebase-tools のインストール
    1. Windows で,コマンドプロンプトを管理者として実行

    2. firebase-tools をインストールするために、今のコマンドプロンプトで,次のコマンドを実行

      ※ npm がない!というときは、「Node.js Windows 版のインストール」の Web ページの手順でインストールする

      npm install -g npm
      npm install -g firebase-tools
      

    3. コマンドプロンプトを閉じる

  2. Windows パソコンから Firebase にログイン
    1. 新しく、コマンドプロンプトを開く

    2. コマンドプロンプトで,次のコマンドを実行
      firebase login
      

    3. Windows の警告表示が出ることがある. このときは「アクセスを許可する」をクリック

    4. その後、複数の Web ブラウザの中から 1つを選ぶ画面が出ることがある.

      Google Chrome を選んだとして説明を続ける

    5. Web ブラウザの画面が開く.Google のアカウント(ID とパスワード)でログインする.

    6. 「Firebird CLI が Google アカウントへのアクセスをリクエストしています」に対しては「許可」をクリック

    7. ログインに成功したことの確認

  3. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認してみる
    firebase list
    

  4. 引き続き、Firebase のホスティング (Hosting) ができるように Windows パソコン側の設定を行う
    1. Firebase プロジェクトのディレクトリ書き込み権限のあるディレクトリ)に、カレントディレクトリを変える。

      空のディレクトリでよい。

      cd <書き込み権限のあるディレクトリ(フォルダ)>
      

    2. 最初は、firebase の初期化を行う

      今のコマンドプロンプトで,次のコマンドを実行

      firebase init 
      

    3. 表示を確認する。そして、Are you ready to proceed ? に対しては「y

    4. Which Firebase CLI feature do you want to setup for thi folder に対しては 「Hosting」を選ぶ

      矢印キーで「Hosting」を選ぶ。 スペースキーを押し「*」マークがついたことを確認したら、Enterキー

    5. デプロイの対象にしたいプロジェクトを矢印キーで選ぶ

    6. 「What do you want touse as your public directory? (public)」に対しては、public にしたい場合は Enterキー

    7. 「Configure as a single-page app (rewrite all urls to /index.html」に対しては設定する

      ※ 単一ページにしたいときは「y」

    8. 設定終了の確認

    9. ファイルの確認

      ./database.rules.json, ./firebase.json, ./public/404.html, ./public/index.html というファイルができているので確認する

    10. ./public/index.html ファイルの確認

      ./public/index.html の中身を確認する.コマンドプロンプト + type コマンドで表示したときなどは文字化けする場合があるが問題ない.

    11. ローカルで Web サーバの起動
      firebase serve
      

    12. 設定ができたかを確認するために、Web ブラウザで http://localhost:5000 を開く

      画面が表示されたら OK. Web ブラウザを閉じる.


Ubuntu マシンでホスティングを行うように設定

  1. Ubuntu で 端末を実行

  2. firebase-tools をインストールするために、端末で,次のコマンドを実行

    ※ npm がない!というときは、「sudo apt install npm」でインストールする

    npm install -g npm
    npm install -g firebase-tools
    

  3. Ubuntu から Firebase にログイン
    1. 端末で,次のコマンドを実行
      firebase login
      

    2. Web ブラウザの画面が開く.Google のアカウント(ID とパスワード)でログインする.

    3. 「Firebird CLI が Google アカウントへのアクセスをリクエストしています」に対しては「許可」をクリック

    4. ログインに成功したことの確認

  4. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認してみる
    firebase list
    

  5. 引き続き、firebase の初期化を行う

    今の端末で,次のコマンドを実行

    firebase init 
    

  6. Which Firebase CLI feature do you want to setup for thi folder に対しては 「Hosting」を選ぶ

  7. 既定(デフォルト)にしたい Firebase プロジェクトの選択

    Firebase プロジェクトを1つ選ぶか、新しいプロジェクトを作る

  8. 公開したいディレクトリの選択.既定では「public」である.問題なければ Enter キーで続行.問題があれば,設定し直す.

  9. 次は既定(デフォルト)のままでよい.Enter キーで続行.

  10. ファイルの確認

    ./firebase.json, ./public/404.html, ./public/index.html ができているので確認する

  11. ローカルで Web サーバの起動
    firebase serve
    

  12. 設定ができたかを確認するために、Web ブラウザで http://localhost:5000 を開く

クラウド・ファイアストア(Cloud Firestore)で Web アプリを動かしてみる

参考 Web ページ: https://firebase.google.com/docs/firestore/quickstart?hl=ja

  1. まず、新しい .html形式ファイルを準備する。

    先ほど自動生成された public の下の index.html ファイルを、別のファイル名のファイルにコピーする。

    ファイル名は何でもよいが、「1.html」のように、拡張子を .html にする

    そして「public」ディレクトリの直下に置くこと

  2. 次の手順で、自分の API キーなどを得る
    1. Firebase の Web ページを開く

      https://firebase.google.com/?hl=ja

    2. スタートガイド」をクリック

    3. 先ほど作成したプロジェクトを選ぶ

    4. Web アプリに Firebase を追加」をクリック

    5. コピーして使いたいので「コピー」をクリック

  3. エディタを 使って、先ほど作成した.html 形式ファイル の中の <head> と </head> の中に入れる

  4. 確認のため,このファイルを Web ブラウザで表示してみる

    表示されれば OK (真っ白な画面が出たり、エラーメッセージが出た場合は良くない)

  5. Cloud Firestore のインスタンスの初期化を行うプログラム追加

    https://firebase.google.com/docs/firestore/quickstart?hl=ja の記載により、次を、 「<script src="https://www.gstatic.com/firebasejs/5.9.1/firebase.js"></script>」の直後に追加

      var db = firebase.firestore();
    

  6. サンプルプログラムを動かしてみる

    https://firebase.google.com/docs/firestore/quickstart?hl=ja の記載のプログラムを使う

    1.html の body のところは次のように書き換える

      <body>
      <script>
    console.log("hello")
    db.collection("users").add({
        first: "Ada",
        last: "Lovelace",
        born: 1815
    })
    .then(function(docRef) {
        console.log("Document written with ID: ", docRef.id);
    })
    .catch(function(error) {
        console.error("Error adding document: ", error);
    });
    
    db.collection("users").get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(`${doc.id} => ${doc.data()}`);
        });
    });
      </script>
      </body>
    

  7. 動作確認のため、 Web ブラウザで http://localhost:5000/1.html を開く

    ※ 「1.html」のところは,実際に作成したファイルのファイル名にすること

    ※ 「画面が開かないよ!」というときは「firebase serve」を起動してから、もう1度試してみる

    次のような画面(何もない画面)で OK

  8. 動作確認のため、

    https://firebase.google.com/?hl=ja を使って、 データベースの中身を表示してみる

    users というコレクションが追加され、その中に、オブジェクトが生成されていることが確認できる。

  9. デプロイ操作

    手元のパソコンで作成したファイル群について、 手元のパソコンから firebase のサーバに一括アップロードし,サービスを公開する操作(デプロイ)を行う.

    1. 「firebase list」で,作成済みプロジェクトのプロジェクト ID を確認
      firebase list
      

    2. プロジェクト IDを指定してデプロイする
      firebase deploy --project <プロジェクトID>
      

    3. デプロイの結果、「Hosting URL」などが表示されるので確認する

  10. いま表示された「Hosting URL」と、先ほど作成した「ファイル名」を Web ブラウザで、 https://hoge-1234.firebaseapp.com/1.html のように指定する

    先ほどと同じように、何も表示されない画面が出てくれば OK.

    同じ画面だが、今度は、全世界に公開されている

    「firebase open hosting:site」を実行して、Webブラウザでファイル名を書き加えるという手順でも同じ結果になる

    「firebase open hosting」を実行すると、ホスティング (Hosting) のダッシュボードが開く

  11. 動作確認のため、

    https://firebase.google.com/?hl=ja を使って、 データベースの中身を表示してみる

    オブジェクトが 1つ増えていることが確認できる。