next blog firestore

下一個博客Firestore

該博客將Next.js用於SSR和Firebase Firestore API用於存儲和獲取數據。在使用React，MOBX狀態樹和样式組件構建的簡單自定義內容管理系統中創建和編輯您的內容。

克隆此存儲庫，並將其用作創建自己的花式博客的起點。

技術堆棧：

• 反應
• next.js
• Firebase Firestore＆Auth
• 樣式組件
• MOBX-State-Tree
• 螞蟻設計
• 馬克西
• eslint
• 更漂亮
• webpack
• 沙啞和絨毛階段

你得到的：

• 帖子饋送
• 特色帖子
• 標籤和類別的帖子
• 多語言支持
• 多作者支持
• 使用自定義反應組件的能力降級
• 受幽靈啟發的簡單方便的CMS
• CMS受Firebase Auth的保護
• SSR的快速且對SEO友好的響應
• 燈塔的好成績

入門

步驟1。創建Firebase帳戶

步驟2。設置身份驗證方法

• 單擊身份驗證部分的設置登錄方法。
• 僅啟用Google身份驗證提供商。
• 將您的域（如果有）添加到授權域中。

步驟3。創建Firestore數據庫

• 轉到數據庫部分並創建Firestore實例。

Firestore仍在Beta中，但並沒有使它變得不那麼出色。

步驟4。數據庫配置。

• 轉到數據庫中的規則部分，並在項目root中的.firebase-rules中粘貼配置。
• 發布新規則。

步驟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管理員服務密鑰。

• 轉到項目設置>服務帳戶，然後單擊生成新的私鑰按鈕。
• 將下載的文件保存為Project root的firebase-service-key.json 。 **請勿提交此文件。默認情況下，它已添加到.gitignore 。

步驟7。使用初始數據初始化數據庫。

我們幾乎完成了。讓我們用初始數據初始化數據庫。

yarn
yarn run seed

步驟8。設置數據庫索引。

我們需要在Firestore數據庫中手動設置索引，以便能夠向我們的Firebase提出休息請求。

• 轉到數據庫>索引並創建以下索引。

步驟9。在本地運行博客。

我們準備在當地啟動我們的博客。

yarn dev

博客正在http：// localhost：3000上運行。

步驟10。登錄管理部門。

等等..但是CMS部分是什麼？

• 轉到http：// localhost：3000/admin，然後單擊“單擊開始寫作” 。
• 在彈出窗口中使用您的Google帳戶登錄。
• 轉到firebase控制台，並添加作者權利，以說明您剛剛簽名的帳戶。
  • 在身份驗證部分中復制用戶UID 。
  • 在數據庫中創建authors集合
  • 在authors集合中創建記錄，其中documentId是用戶的UID，並且name是config.js文件中用戶的id 。

步驟11。準備出發！

• 轉到http：// localhost：3000/admin
• 創建新帖子或編輯現有並發布更改。

執照

根據MIT許可，版權所有©2018-PRESENT ALEXANDER SUEVALOV

有關更多信息，請參見許可證。