Google Firebase のCloud Firestore(クラウド・ファイアストア)でWebアプリのホスティングとデプロイを実施する方法(書きかけ)

目次

  1. Google Firebase の主な機能と特徴
  2. Cloud Firestore(クラウド・ファイアストア)プロジェクトの作成手順
  3. プロジェクトの削除
  4. データベースへのコレクション・ドキュメント追加方法
  5. Windowsマシンでのホスティング設定手順
  6. Ubuntuマシンでのホスティング設定手順
  7. Cloud Firestore(クラウド・ファイアストア)Webアプリケーションの実行方法

サイト内の関連ページ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. すべての項目を慎重に確認してチェックを入れ,「プロジェクトの削除」をクリック.

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

実施する具体的な操作内容

  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 版のインストール」の手順に従って事前にインストールしてください.

      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 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 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. 「Firebird CLI から Google アカウントへのアクセス許可リクエスト」に対して,セキュリティを確認の上「許可」を選択
    4. ログイン成功の確認画面を確認
  4. 「firebase list」コマンドで,既存プロジェクトのプロジェクト ID を確認
    firebase 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 にアクセスし, データベースの内容を詳細に確認します.

    users コレクションが正常に作成され,オブジェクトが適切に生成されていることを確認できます.

  10. デプロイプロセスの実行

    開発環境で作成・検証したファイル群を Firebase サーバーに安全にアップロードし,サービスを公開します.

    1. 「firebase list」コマンドで,対象プロジェクト ID を確認します.
      firebase 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 にアクセスし, データベースの最新の状態を確認します.

    新しいオブジェクトが正常に追加されていることを確認できます.