Google Firebase の 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ブラウザで「サインアウト」してもう１度やり直すとうまく行くかもしれません．

   
5. プロジェクトの追加

   まず、「地域／ロケーション」を展開する

   

   次のように設定する

   • プロジェクト名： 何でもよいが、あとで分かりやすい名前
   • アナリティクスの地域：　日本
   • チェックボックス：　同意できる場合のみチェック（同意できないときは、Firebase を使わない）
   
6. プロジェクトの作成が終了すると、画面が変わる。「次へ」をクリック
   
7. 画面が変わるので確認．

   まず、料金プランが「Spark プラン」になっていることを確認する． Spark プランは料金無料のプラン．

   
8. クラウド・ファイアストア（Cloud Firestore）を使いたいので使いたいので、「Cloud Firestore」をクリック
   
9. クラウド・ファイアストア（Cloud Firestore）のデータベースを作成したいので、Cloud Firestore の下の「データベースを作成」をクリック
   
10. クラウド・ファイアストア（Cloud Firestore）のセキュリティルールでは、 ロックモードかテストモードを選ぶ．

    ※ ここでは、試用することにしたい（公開したら問題のあるようなデータは入れずに、手軽に試してみたい）ので、 「テストモードで開始」を選び「有効にする」をクリック

    
11. データベースの作成が始まる。しばらく待つ。
    
12. データベースの作成が終わると、画面が変わるので確認する
    

この画面で、データベースの確認、コレクションの追加、ドキュメントの追加を行うことができる。

プロジェクトの削除

プロジェクトを削除したいときは、次の手順で行う

1. プロジェクトの全般のWebページで、「Project Overview」の右横のボタンをクリック。
   
2. 「プロジェクトの設定」をクリック。
   
3. 画面の下の「プロジェクトの削除」をクリック。
   
4. すべてを確認、チェックしてから、「プロジェクトの削除」をクリック。
   

データベースにコレクション、ドキュメントの追加

ここで行うこと

• 追加するコレクションのコレクションID: products
• 追加するドキュメントの中身

  フィールド: id, タイプnumber, 値1
  フィールド: name, タイプstring, 値apple
  フィールド: price, タイプnumber, 値100
  

1. コレクションを追加したいので「コレクションを追加」をクリック
   
2. 追加するコレクションのコレクションID(products) を設定して、 「次へ」をクリック
   
3. 追加するドキュメントについて、 フィールド: id, タイプnumber, 値1を設定する。 フィールドを追加したいので、「フィールドを追加」をクリック
   
4. 今度は、 フィールド: name, タイプstring, 値apple フィールドを追加したいので、「フィールドを追加」をクリック
   
5. 今度は、 フィールド: price, タイプnumber, 値100 「保存」をクリック
   
6. いま追加したドキュメントとコレクションを確認
   

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. 「情報を収集してよい」ことにして「Y」のあとに「Enterキー」
      
   5. その後、複数の Web ブラウザの中から１つのWebブラウザを選ぶ画面が出ることがある（すでに firebase にログイン済みのときは、この画面は出ない

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

   6. Web ブラウザの画面が開く．Google のアカウント（ID とパスワード）でログインする．（すでに firebase にログイン済みのときは、この画面は出ない
      
   7. 「Firebird CLI が Google アカウントへのアクセスをリクエストしている」に対しては「許可」をクリック
      
   8. ログインに成功したことの確認
      
3. 「firebase list」で，作成済みプロジェクトのプロジェクト ID を確認してみる

   firebase list
   

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

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

      cd ＜書き込み権限のあるディレクトリ（フォルダ）＞
      

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

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

      firebase init 
      

      
   3. 表示を確認する。そして、Are you ready to proceed ? に対しては、 「Y」のあとに「Enterキー」
      
   4. Which Firebase CLI feature do you want to setup for thi folder に対しては 「Hosting」を選ぶ

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

      
   5. デプロイの対象にしたいプロジェクトを矢印キーで選ぶ。Enterキー
      
   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」、Enter キー

      
   8. 設定終了の確認
      
   9. ファイルの確認

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

      dir /w
      dir /w public 
      

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

       ./public/index.html の中身を確認する．

       エディタを使うか、Windows のコマンドプロンプトで、type コマンドを使う。

       type コマンドで表示したときなどは文字化けする場合があるが問題ない ．

       type public\index.html 
       

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

       firebase serve
       

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

       画面が表示されたら OK.

       Web ブラウザを閉じる．

       

       CTRL + C (同時押し)で 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 プロジェクトを１つ選ぶか、新しいプロジェクトを作る

   
8. 公開したいディレクトリの選択．既定では「public」である．問題なければ Enter キーで続行．問題があれば，設定し直す．
   
9. 次は既定（デフォルト）のままでよい．Enter キーで続行．
   
10. ファイルの確認

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

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

    firebase serve
    

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

クラウド・ファイアストア（Cloud Firestore）の Web アプリを動かしてみる

【関連する外部ページ】 https://firebase.google.com/docs/firestore/quickstart?hl=ja

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

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

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

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

   copy public\index.html public\1.html
   

   
2. ファイルが増えていることを確認

   dir /w public 
   

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

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

   2. 「使ってみる」をクリック
      
   3. 先ほど作成したプロジェクトを選ぶ
      
   4. 「Web アプリに Firebase を追加」をクリック
      
   5. アプリのニックネームを登録する。

      ニックネームは何でもいが、日本語を使うのは避けておく

      
   6. コピーして使いたいので「コピー」をクリック
      
4. エディタを 使って、先ほど作成した.html 形式ファイル の中の「</head>」 の直前に入れる
   
5. 確認のため，このファイルを Web ブラウザで表示してみる

   URL のところに「file:///H:/firebase/public/1.html」のように、ファイル名をフルパスで書く

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

   
6. 先ほどの html ファイルに、Cloud Firestore のインスタンスの初期化を行うプログラム追加

   https://firebase.google.com/docs/firestore/quickstart?hl=ja の記載により、次を、 「firebase.initializeApp(firebaseConfig);」の直後に追加

   追加を終わったら保存

     var db = firebase.firestore();
   

   
7. Web アプリを動かてみる。

   先ほどの html ファイルの「<body>」から「</body>」のところを、次のプログラムに入れ替える

   これは、コレクション「products」の中身を、コンソールに表示するプログラム

     <body>
     <script>
   db.collection("products").get().then((querySnapshot) => {
       querySnapshot.forEach((doc) => {
           console.log(`${doc.id} => ${doc.data()}`);
       });
   });
     </script>
     </body>
   

   

   ※ 参考 Web サイト：https://firebase.google.com/docs/firestore/quickstart?hl=ja の記載のプログラムを使う

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

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

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

   次のような画面（何もない画面）で OK

   
9. 動作確認のため、

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

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

   
10. デプロイ操作

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

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

       firebase list
       

       
    2. プロジェクト IDを指定してデプロイする

       firebase deploy --project ＜プロジェクトID＞
       

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

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

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

    

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

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

12. 動作確認のため、

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

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