= Node.js と Cloud Firestore DB を使用して Google Firebase で動的 Web サイトをホストする =
トゥシャール・カプール: (httpswww.tusharck.com/)
デモ Git URL: httpsgithub.com/tusharck/firebase-demo
= なぜ Firebase Hosting なのか? =
Firebase は、Google のインフラストラクチャ上に構築された包括的なアプリ プラットフォームであるため、安全、高速、無料 (追加のリソースには有料オプションも利用可能) で、コンテンツをホストする簡単な方法を提供します。 Web またはモバイル アプリケーション
== 無料利用枠の主な機能と利点: ==
- 無料のカスタムドメインを提供&
SSL(SSL は、https 接続に標準のセキュリティ層を提供します
- Cloud Firestore: クライアント アプリ間でリアルタイムにデータを同期するための柔軟でスケーラブルなデータベース
- その他の機能: Cloud Functions、Cloud Messaging (FCM)、Crashlytics、Dynamic Links、Hosting、ML Kit、Storage、Performance Monitoring、Predictions、および Test Lab (これらの製品の機能とリソースは、有料プランを購入することで増やすことができますが、無料利用枠サービスは非常に優れています。プランを確認するには、Firebase の価格を確認してください）。
- リソースの自動スケーリング
= Firebase で動的 Web サイトをホストする手順 =
== 要件 ==
**1. Google アカウント**Google アカウントを持っていない場合は、サインアップする必要があります。これを行うには、httpsaccounts.google.com/SignUp にアクセスしてください。 **2. Node.js と npm** Mac/Windows httpsnodejs.org/en/download/ からインストーラーをダウンロードできます。 Linux
Node.js をインストールするには、次の手順に従います。
1.ターミナルを開く
2. 次のコマンドを実行します。
sudo apt-get install curlcurl -sL httpsdeb.nodesource.com/
setup_13.x| sudo bash -sudo apt install nodejs **使用しました 注: ** **
setup_13.x はチュートリアルの時点で最新バージョンだったので
**13** httpsnodejs.org/en/ にアクセスすると、最新のリリースを確認できます。
Node.js と npm が正常にインストールされているかどうかを確認するには、次のコマンドを実行します。これにより、インストールされているバージョンが出力されます。
ノード -v
npm -v
**3. Firebase-CLI (コマンドライン インターフェース) Firebase プロジェクトを管理、表示、デプロイするためのツールです。
npm install -g firebase-tools
= ステップ 1: Firebase プロジェクトを作成する =
- httpsfirebase.google.com にアクセスし、
ログイン右上から
- クリック
右上隅からコンソールに移動します
- 次にクリックします
以下に示すように、プロジェクトを作成します
4. 次に、プロジェクトの名前を入力し、続行を押します
5. [続行] を押して、Firebase プロジェクトで Google アナリティクスを有効にします (不要な場合は、オンにして無効にします)。
6. Google アナリティクスの最寄りの場所を選択します
7. をクリックします
**プロジェクトを作成し、ロードされるのを待ちます。次に、以下のようなものが表示されます
= ステップ 2: Firebase ログインの初期化 =
- コマンドライン/ターミナルを開き、新しいディレクトリを作成して移動します
mkdir my-firebase-projectcd my-firebase-project
2. Firebase で Web サイトをホストするには、次のコマンドを使用して firebase にログインします。コマンドを実行すると、ブラウザー ウィンドウが開き、Google 資格情報を使用して firebase にログインするよう求められます。そこに資格情報を入力すると、Firebase がシステムにサインインします
ファイアベースログイン
= ステップ 3: Firebase プロジェクトをシステムに初期化する =
- 次に、Firebase コンソールで作成したプロジェクトをシステムに初期化する必要があります。行うには、以下のコマンドを実行します
ファイアベース初期化
2. 下キーを押して選択
**2 つのこと **スペース キーを押して **
- 機能
- ホスティング
それで
**Enter キーを押して**続行します
3.次に選択します
次にEnterを押します
**既存のプロジェクトを使用**
4. Enter キーを押します。
**my-firebase-project** **または使用したプロジェクト名または使用したプロジェクト名
5. 選択
**Javascript** を入力して Enter キーを押します
6.あなたは言うことができます
**いいえ**: ESLint を使用してバグの可能性を検出し、スタイルを強制しますか?
7. タイプ
**はい** npm を使用して依存関係をインストールする場合
8. ここでは、2 つのタスクを実行する必要があります。
- Web サイトとアセットが存在するディレクトリを選択する必要があります。デフォルトでは
pubicEnter キーを押して続行するか、目的のディレクトリ名に変更できます
- タイプ
動的 URL を適切な宛先にリダイレクトできるように、単一アプリのページにははい
9. 次のコマンドを実行して、ローカル システムで firebase アプリをテストします。次に行きます
**httplocalhost:5000** で、基本的な Web サイトが実行されていることを確認します
firebase serve -- ホスティング、関数のみ
を開いた後、次のように表示されます。
**httplocalhost:5000** URL
10.ターミナルからサーバーを閉じる
= ステップ 4: パッケージのインストールと動的 Web サイトのビュー ディレクトリの作成 =
- ここでは、functions ディレクトリ内を切り替えて使用します。
CD 関数
**2. Express をインストール**これは、最小限で柔軟な Node.js Web アプリケーション フレームワークです。
npm i express --save
**3.ハンドル バーをインストールする**これは、Web サイトの動的フロント エンドに使用される Node.js のテンプレート エンジンです。
npm i ハンドルバー --save
**4.統合をインストール**
npm i consolidate --save
5. という名前のフォルダーを作成します。
すべてのフロントエンド コードを保存する **functions** フォルダー内の **views**
mkdir
ビュー
6. 次のコマンドを実行して、メイン ディレクトリに戻ります。
CD 。
= ステップ 5: Firestore (クラウド データベース) のセットアップ =
== データベース構成 ==
- httpsconsole.firebase.google.com/ にアクセスします
- プロジェクトを選択
- 選択する
データベース左側のペインから
4. をクリックします
**データベースの作成**
5. [テスト モードで開始] を選択します。そうしないと、システムからデータベースにアクセスできなくなります。ウェブサイトの開発が完了したら、この設定を変更します
次にクリック
**次へ**
6. Firestore DB の場所を選択します
**この場所を設定すると、後で変更することはできません。ノート： **
== CreateData ==
- コレクションの開始をクリックします
2. 入力します
**今のところサンプリングできるコレクション ID
3. サンプルデータを入力します。入力
**sample_doc **を **ドキュメント ID として。 ** フィールド内に **Heading** を入力します。 I like Cloud** within **Value その後、**Save** をクリックします
= ステップ 6: Web サイトの動的コンテンツの構築 =
この部分を 2 つの部分に分割します。最初の部分では、Firestore からデータを取得して Web サイトで使用する方法を確認します。 2 番目の部分では、フォーム データを送信する方法について説明します。
**まず、Firestore にアクセスするための資格情報をダウンロードします**
2. をクリックします
**設定** 左ペインから **プロジェクト設定** に移動します
3. に行く
**サービス アカウント**を開き、**Generate new private key をクリックします
4. をクリックします
**Generate Key キーをダウンロードするためのポップアップが表示されます。 Web サイトの **functions** フォルダー内にキーを保存します。
== Firestore から取得中 ==
- 開ける
functionsフォルダ内のindex.js
2. アプリケーションで使用するライブラリをいくつか定義する必要があります。これらは、以前にインストールしたものと同じライブラリです
const functions = require('firebase-functionsconst express = require('expressconst engine = require('consolidatevar hbs = require('handlebarsconst admin = require('firebase-admin)
3. ここでは、いくつかの設定を行います。
- Express を使用してアプリを初期化する
- エンジンをハンドルバーとして設定します
- 次に、フロント エンド コードがビュー フォルダー内にあることを Express に伝えます。
const app = expressapp.engine('hbs',engines.handlebars);app.set('viewsviewsapp.set('view enginehbs
4. アプリケーションが Firestore DB にアクセスすることを承認します
*ノート：*
1.変更
**YOUR_SDK_NAMEjson は、Firestore2 にアクセスするための**資格情報用にダウンロードしたファイルと一緒に使用します。データベース URL をデータベース URL に変更します。 URL を確認するには、**[設定] >[サービス アカウント]**
var serviceAccount = 必須
YOUR_SDK_NAME.jsonadmin.initializeApp({credential: admin.credential.cert(serviceAccount), databaseURL: "httpsmyfirebaseproject-bx54dasx3.firebaseio.com
5.Firestoreからデータを取得する機能
- コレクションIDは
サンプル
- ドキュメント ID は
sample_doc
サンプルデータを入力しながら上記を定義しました
async function getFirestoreconst firestore_con = await admin.firestoreconst writeResult = firestore_con.collection('sampledoc('sample_docgetthen(doc =>{
if (!doc.exists) { console.log('そのようなドキュメントはありません }
そうでなければ {doc.data を返す
.catch(err =>{ console.log('ドキュメント取得エラー', errreturn writeResult
}
**注: ** **async** を使用します。これは、データベースと Web サイトの間で promise 操作が完了するまで待機する必要があるためです。
6. ルートを作成し、結果をフロント エンドに送信する
app.getasync (リクエスト、レスポンス) var db_result = await getFirestoreresponse.render('indexdb_resultexports.app = functions.https.onRequest(app);
7.作成する
**views** フォルダー内の **index.hbs**。 hbs は handelbars ファイルです 注: **
8. この基本的な HTML コードを内部に記述します。
**index.hbs** で取得した結果を確認
Tushar Chand Kapoor
