next blog firestore

次のブログファイヤーストア

このブログでは、SSR＆Firebase Firestore APIのnext.jsを使用して、データを保存および取得します。 React、Mobx State Tree、スタイルのコンポーネントで構築されたシンプルなカスタムコンテンツ管理システムでコンテンツを作成および編集します。

このレポをクローンして、それを出発点として使用して、独自の派手なブログを作成します。

テクノロジースタック：

• 反応します
• next.js
• Firebase Firestore＆Auth
• スタイルのコンポーネント
• mobx-state-tree
• アリのデザイン
• マークシー
• eslint
• きれい
• webpack
• ハスキー＆リントステージ

あなたが得るもの：

• 投稿フィード
• 注目の投稿
• タグとカテゴリによる投稿
• マルチ言語サポート
• マルチ著者のサポート
• カスタム反応コンポーネントを使用する機能を備えたマークダウン
• ゴーストに触発されたシンプルで便利なCMS
• CMSはFirebase Authによって保護されています
• SSRによる迅速でSEOフレンドリーな応答
• 灯台での良い結果

はじめる

ステップ1。FireBaseアカウントを作成します

ステップ2。認証方法のセットアップ

• [認証]セクションで[サインインメソッドの設定]をクリックします。
• Google認証プロバイダーのみを有効にします。
• 承認されたドメインにドメイン（ある場合）を追加します。

ステップ3。ファイアストアデータベースを作成します

• データベースセクションに移動し、Firestoreインスタンスを作成します。

Firestoreはまだベータ版ですが、それがあまり素晴らしいものではありません。

ステップ4。データベース構成。

• データベースのルールセクションに移動し、プロジェクトルートの.Firebase-Ruleから構成を貼り付けます。
• 新しいルールを公開します。

ステップ5。アプリのFireBase Secret Keysを設定します。

• プロジェクトのルートで.envを作成します。このファイルをコミットしないでください。それはすべての人が利用できないはずの個人データです。
• FireBaseコンソールのプロジェクト設定に移動します（プロジェクトの概要の横にあるギアアイコンをクリックしてください）。
• 次の形式でこのページから.envにデータをコピーします。

F_PROJECT_ID= < your Project ID >
F_AUTH_DOMAIN= < your Project ID > .firebaseapp.com
F_API_KEY= < your Web API Key > 

ステップ6。データベースからデータをインポート/エクスポートするためのFireBase Admin SDKキーを設定します。

初期シードでデータベースを初期化できるようにするには、プライベートファイヤーベース管理サービスキーを生成する必要があります。

• [プロジェクト設定] > [サービスアカウント]に移動し、 [新しい秘密キー]ボタンを[生成]をクリックします。
• プロジェクトルートでダウンロードされたファイルをfirebase-service-key.jsonとして保存します。 **このファイルをコミットしないでください。デフォルトでは.gitignoreに追加されます。

ステップ7。初期データでデータベースを初期化します。

私たちはほぼ終了しました。初期データでデータベースを初期化しましょう。

yarn
yarn run seed

ステップ8。データベースインデックスのセットアップ。

FiresbaseにRESTリクエストを行うには、Firestoreデータベースに手動で設定されたインデックスが必要です。

• データベース>インデックスに移動し、次のインデックスを作成します。

ステップ9。ブログをローカルに実行します。

ブログを地元で発売する準備ができています。

yarn dev

ブログはhttp：// localhost：3000で稼働しています。

ステップ10。管理部品にサインインします。

待って..しかし、CMSの部分はどうですか？

• http：// localhost：3000/adminに移動し、 [クリックして書き込みを開始]をクリックします。
• ポップアップウィンドウにGoogleアカウントにサインインします。
• Firebaseコンソールに移動し、署名したばかりのアカウントに著者の権利を追加します。
  • 認証セクションにユーザーUIDをコピーします。
  • データベースにauthorsコレクションを作成します
  • documentIdユーザーのuidであり、 config.jsファイルのユーザーのname idあるauthorsコレクションにレコードを作成します。

ステップ11。準備ができています！

• http：// localhost：3000/adminにアクセスしてください
• 新しい投稿を作成するか、既存の変更を編集し、変更を公開します。

ライセンス

MITライセンスに基づいてライセンス、Copyright©2018-PresentAlexanderSuevalov

詳細については、ライセンスを参照してください。