Google Firebase の Cloud Firestore で Web アプリのホスティングとデプロイを行う手順（書きかけ）

Google Firebase の主な機能と特徴

クラウド上のストレージ機能を提供する。

データベース機能は Python，JavaScript から利用でき，これらの言語と連携した開発ができる。

認証システム（ID，パスワード）などのセキュリティ機能と，課金管理システムを備える。

* iOS，Android，Web に対応しており，利用には Google アカウントの登録が必要である。

Cloud Firestore プロジェクトの作成手順

1. Firebase 公式サイトにアクセスする

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

   * Google アカウント（ID，パスワード）での認証が必要である

2. 「使ってみる (GET STARTED)」を選択する
   
3. Firebase コンソール画面の表示を確認する
   
4. Firebase コンソール画面から「プロジェクトを追加」を選択する

   * 画面遷移が発生しない場合は，Webブラウザでサインアウトし，再度ログインすることで解決できる場合がある。

   
5. プロジェクトを設定する

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

   

   設定する項目

   • プロジェクト名：後から識別しやすい名称を設定する
   • アナリティクスの地域：日本を選択する
   • 利用規約：内容を確認の上，同意する（同意しない場合は Firebase を利用できない）
   
6. プロジェクトの作成後，「次へ」を選択する
   
7. 設定内容を確認する

   料金プランが「Spark プラン」（無料プラン）であることを確認する

   
8. Cloud Firestore を利用するため，「Cloud Firestore」を選択する
   
9. Cloud Firestore のデータベースを作成するため，「データベースを作成」を選択する
   
10. セキュリティ設定を選択する

    * 開発環境での検証用（機密性の低いデータでの動作確認）の場合は，「テストモードで開始」を選択し「有効にする」を選択する

    
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キーまたはスタートメニュー → cmd と入力 → 右クリック → 「管理者として実行」）。
   2. firebase-tools をインストールするため，以下のコマンドを実行する。

      * npm が未インストールの場合は，「Node.js Windows 版のインストール」の手順に従って事前にインストールする。

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

      
   3. コマンドプロンプトを終了する。
2. Windows マシンから Firebase への認証手順
   1. 新規に，コマンドプロンプトを起動する。
   2. コマンドプロンプトで，認証のための以下のコマンドを実行する。

      firebase login
      

      
   3. Windows のセキュリティ警告が表示される場合がある。 内容を確認の上，「アクセスを許可する」を選択する。
      
   4. データ収集への同意確認が表示される。内容を確認の上，「Y」を入力し「Enterキー」を押す。
      
   5. 続いて，使用するWebブラウザの選択画面が表示される場合がある（既に firebase にログイン済みの場合は表示されない）。

      以下では，Google Chrome を選択した場合の手順を説明する。

   6. Webブラウザが自動的に起動する。Google アカウントでログインする（既に firebase にログイン済みの場合は不要）。
      
   7. 「Firebase CLI による Google アカウントへのアクセス要求」に対して，内容を確認の上「許可」を選択する。
      
   8. ログイン成功の確認画面を確認する。
      
3. 「firebase projects:list」コマンドで，既存プロジェクトのプロジェクトIDを確認する。

   firebase projects: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 this folder? に対して 「Hosting」を選択する。

      矢印キーで「Hosting」を選択し， スペースキーで「*」マークを付けた後，Enterキーを押す。

      
   5. デプロイ対象のプロジェクトを矢印キーで選択し，Enterキーを押す。
      
   6. 「What do you want to use 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. ローカル開発サーバーの起動と動作確認

       firebase serve
       

       
   12. 設定を確認するため，Webブラウザで localhost:5000 にアクセスし，表示されることを確認する。

       確認後，Webブラウザを閉じる。

       

       CTRL + C（同時押し）で開発サーバーを停止する。

       

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 アカウントでログインする
      
   3. 「Firebase CLI から Google アカウントへのアクセス要求」に対して，内容を確認の上「許可」を選択する
      
   4. ログイン成功の確認画面を確認する
      
4. 「firebase projects:list」コマンドで，既存プロジェクトのプロジェクト ID を確認する

   firebase projects:list
   

   
5. firebase の初期化を開始する

   現在の端末で初期化コマンドを実行する

   firebase init
   

   
6. Firebase CLI 機能の選択画面では「Hosting」を選択する
   
7. デフォルトプロジェクトを設定する

   既存の Firebase プロジェクトから選択するか，必要に応じて新規プロジェクトを作成する

   
8. 公開ディレクトリを設定する。デフォルトの「public」を使用する。必要な場合のみ変更する
   
9. 続くオプション設定は，特別な指定がない限り，デフォルト設定のまま進める
   
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 の公式サイトにアクセスする。

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

   2. 「使ってみる」を選択する。
      
   3. 作成済みのプロジェクトを選択する。
      
   4. 「Web アプリに Firebase を追加」を選択する。
      
   5. アプリのニックネームを設定する。

      ニックネームは任意に設定できるが，管理のしやすさを考慮して英数字の使用を推奨する。

      
   6. 設定情報を取得するため「コピー」を選択する。
      
4. エディタを 使用して，作成した .html ファイル の「</head>」タグの直前に設定情報を挿入する。
   
5. 動作確認のため，作成したファイルをブラウザで表示する。

   URLに「file:///H:/firebase/public/1.html」のように，ファイルの完全なパスを指定する。

   表示されることを確認する（この段階では空白ページの表示が正常な状態である）。

   
6. HTMLファイルに，Cloud Firestore インスタンスの初期化コードを追加する。

   https://firebase.google.com/docs/firestore/quickstart?hl=ja の公式ドキュメントに従い， 「firebase.initializeApp(firebaseConfig);」の直後に次のコードを追加する。

   追加後，ファイルを保存する。

     var db = firebase.firestore();
   

   
7. アプリケーションの動作確認を行う。

   HTMLファイルの「<body>」タグ内を，次のコードに置換する。

   このコードは，コレクション「products」の内容をブラウザのコンソールに出力する。

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

   

   * 参考：https://firebase.google.com/docs/firestore/quickstart?hl=ja の公式サンプルコードを使用

8. 動作確認として， 開発サーバー上で localhost:5000/1.html にアクセスする。

   * 「1.html」は作成したファイル名に応じて変更する。

   * アクセスできない場合は「firebase serve」コマンドを実行後，再度アクセスする。

   この段階では空白ページが表示されることが正常な動作である。

   
9. データベースの状態を確認する。

   https://firebase.google.com/?hl=ja にアクセスし， データベースの内容を確認する。

   
10. デプロイの実行

    開発環境で作成・確認したファイルを Firebase サーバーにアップロードし，公開する。

    1. 「firebase projects:list」コマンドで，対象プロジェクト ID を確認する。

       firebase projects:list
       

       
    2. 確認したプロジェクト IDを指定してデプロイを実行する。

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

       
    3. デプロイ完了後，表示される「Hosting URL」を記録する。
       
11. 表示された「Hosting URL」とファイル名を組み合わせて， https://hoge-1234.firebaseapp.com/1.html の形式でアクセスする。

    この段階では空白ページが表示されることが正常な動作である。

    これにより，アプリケーションが公開され，アクセスできる状態になった。

    
    「firebase open hosting:site」コマンドを実行し，表示されたURLにファイル名を追加することでもアクセスできる。

    また，「firebase open hosting」コマンドでホスティングの管理ダッシュボードを表示できる。

12. 最終確認として，

    https://firebase.google.com/?hl=ja にアクセスし， データベースの状態を確認する。