ดาวน์โหลด next blog firestore - ดาวน์โหลดซอร์สโค้ด next blog firestore

next blog firestore

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

Firestore บล็อกถัดไป

บล็อกนี้ใช้ next.js สำหรับ SSR & Firebase Firestore API สำหรับการจัดเก็บและดึงข้อมูล สร้างและแก้ไขเนื้อหาของคุณในระบบการจัดการเนื้อหาแบบกำหนดเองที่สร้างขึ้นด้วย React, Mobx State Tree และส่วนประกอบสไตล์

โคลน repo นี้และใช้เป็นจุดเริ่มต้นเพื่อสร้างบล็อกแฟนซีของคุณเอง

สแต็คเทคโนโลยี:

ตอบโต้
next.js
Firebase Firestore & Auth
องค์ประกอบสไตล์
mobx-state-tree
การออกแบบมด
มาร์คซี
eslint
สวยกว่า
เว็บแพ็ค
Husky & Lint stagage

สิ่งที่คุณได้รับ:

Posts Feed
โพสต์เด่น
โพสต์โดยแท็กและหมวดหมู่
การสนับสนุนภาษาหลายภาษา
การสนับสนุนผู้แต่งหลายคน
Markdown ที่มีความสามารถในการใช้ส่วนประกอบปฏิกิริยาแบบกำหนดเอง
CMS ที่เรียบง่ายและสะดวกสบายได้รับแรงบันดาลใจจากผี
CMS ได้รับการปกป้องโดย Firebase Auth
คำตอบที่รวดเร็วและเป็นมิตรกับ SSR
ผลลัพธ์ที่ดีในประภาคาร

เริ่มต้น

ขั้นตอนที่ 1. สร้างบัญชี Firebase

ขั้นตอนที่ 2. วิธีการตรวจสอบการตั้งค่า

คลิก ตั้งค่าวิธีการลงชื่อเข้าใช้ ในส่วนการรับรองความถูกต้อง
เปิดใช้งาน เพียง ผู้ให้บริการการตรวจสอบสิทธิ์ของ Google
เพิ่มโดเมนของคุณ (ถ้าคุณมีหนึ่ง) ใน โดเมนที่ได้รับอนุญาต

ขั้นตอนที่ 3. สร้างฐานข้อมูล Firestore

ไปที่ส่วนฐาน ข้อมูล และสร้างอินสแตนซ์ Firestore

Firestore ยังอยู่ในเบต้า แต่มันไม่ได้ทำให้มันยอดเยี่ยมน้อยลง

ขั้นตอนที่ 4. การกำหนดค่าฐานข้อมูล

ไปที่ส่วน กฎ ในฐานข้อมูลของคุณและวางการกำหนดค่าจาก. firebase-rules ในรูทโครงการ
เผยแพร่กฎใหม่

ขั้นตอนที่ 5. ตั้งค่าปุ่ม Firebase Secret สำหรับแอปของเรา

สร้าง .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 สำหรับการนำเข้า/ส่งออกข้อมูลจากฐานข้อมูล

เพื่อให้สามารถเริ่มต้นฐานข้อมูลด้วยเมล็ดพันธุ์เริ่มต้นเราจำเป็นต้องสร้างคีย์บริการผู้ดูแลระบบ Firebase ส่วนตัว

ไปที่ การตั้งค่าโครงการ > บัญชีบริการ และคลิก สร้างปุ่มคีย์ส่วนตัวใหม่
บันทึกไฟล์ที่ดาวน์โหลดเป็น firebase-service-key.json ที่ Project Root ** อย่าส่งไฟล์นี้ มันถูกเพิ่มลงใน .gitignore โดยค่าเริ่มต้น

ขั้นตอนที่ 7. เริ่มต้นฐานข้อมูลด้วยข้อมูลเริ่มต้น

เราเกือบจะเสร็จแล้ว มาเริ่มต้นฐานข้อมูลของเราด้วยข้อมูลเริ่มต้น

yarn
yarn run seed

ขั้นตอนที่ 8. ดัชนีฐานข้อมูลการตั้งค่า

เราต้องการดัชนีการตั้งค่าด้วยตนเองในฐานข้อมูล Firestore ของเราเพื่อให้สามารถร้องขอ REST ไปยังฐาน Firebase ของเราได้

ไปที่ ฐานข้อมูล > ดัชนี และสร้างดัชนีต่อไปนี้

ขั้นตอนที่ 9. เรียกใช้บล็อกในพื้นที่

เราพร้อมที่จะเปิดตัวบล็อกของเราในพื้นที่

yarn dev

บล็อกเปิดใช้งานบน http: // localhost: 3000

ขั้นตอนที่ 10 ลงชื่อเข้าใช้ส่วนผู้ดูแลระบบ

เดี๋ยวก่อน .. แต่ส่วนของ CMS คืออะไร?

ไปที่ http: // localhost: 3000/admin และคลิกที่ "คลิกเพื่อเริ่มเขียน"
ลงชื่อเข้าใช้กับบัญชี Google ของคุณในหน้าต่างป๊อปอัป
ไปที่คอนโซล Firebase และเพิ่มสิทธิ์ผู้เขียนในบัญชีที่คุณเพิ่งลงชื่อเข้าใช้ด้วย
- คัดลอก UID ผู้ใช้ ในส่วน การรับรองความถูกต้อง
- สร้างคอลเลกชัน authors ใน ฐานข้อมูล
- สร้างระเบียนในคอลเลกชัน authors ซึ่ง documentId เป็น UID ของผู้ใช้และ name คือ id ของผู้ใช้ในไฟล์ config.js