firebase functions next example

ตัวอย่างใหม่ที่ Firebase-GCP-Examples

---

next.js แอพ SSR บนคลาวด์ฟังก์ชั่นสำหรับ firebase ด้วย Firebase Hosting

โฮสต์แอป Next.js SSR React บนฟังก์ชั่นคลาวด์สำหรับ Firebase ด้วย Firebase Hosting

นี่คือโพสต์สื่อที่ประกอบไปด้วย โพสต์ใหม่กำลังถูกเขียนขึ้นเพื่ออธิบายโครงสร้างโครงการใหม่การปรับใช้บางส่วนของ Firebase การสนับสนุน Firebase ของตะขอล่วงหน้า/หลังการปรับใช้และปัญหาใดที่คุณสมบัติใหม่เหล่านี้แก้ปัญหา

ทำไม

โฮสต์แอพ SSR Next.js ของคุณบนฟังก์ชั่นคลาวด์ทำให้แอพ SSR ที่มีราคาต่ำและราคาประหยัดประสบการณ์การใช้ประโยชน์จากประสบการณ์นักพัฒนาซอฟต์แวร์ของ Firebase

ยังไง?

Firebase Hosting สามารถเขียนเส้นทางใหม่ไปยังฟังก์ชั่นคลาวด์ที่ให้บริการแอป Next.js ฝั่งเซิร์ฟเวอร์ของเรา การใช้กฎการเขียนใหม่ที่จับเส้นทาง ทั้งหมด เราสามารถโฮสต์แอพ SSR ของเราบน URL โฮสติ้ง Firebase ของเราแทน URL ฟังก์ชั่นคลาวด์ Firebase

แทนที่จะเป็น:

https://us-central1-<project-name>.cloudfunctions.net/<function-name>

เราสามารถใช้:

<project-name>.firebaseapp.com/

Next.js สามารถใช้เพื่อให้ได้ SSR ตอบสนองด้วยการโหลดซ้ำของโมดูลร้อนการกำหนดเส้นทางเซิร์ฟเวอร์และไคลเอ็นต์การแยกรหัสระดับเส้นทางเส้นทางการดึงข้อมูลล่วงหน้าและอีกมากมาย!

ปัญหาจำนวนมากเกี่ยวกับการโฮสต์ SSR บน Firebase ถูกเอาชนะด้วยวิธีนี้ โปรดดูโพสต์กลางก่อนที่จะสร้างปัญหาที่นี่

สำคัญ!

• ตัวอย่างนี้ใช้ firebase-tools เป็น devdependency ซึ่งเรียกใช้จาก node_modules/.bin/ folder ผ่าน yarn เส้นด้ายจะเรียกใช้สคริปต์จาก package.json หรือสคริปต์ไบนารีจาก node_modules/.bin/ npm run ไม่ได้ตรวจสอบโฟลเดอร์ .bin สำหรับ executables ดังนั้นหากคุณใช้ npm คุณจะต้องเปลี่ยนสคริปต์เพื่อเรียกใช้ firebase Binary จาก node_modules/.bin/ หรือติดตั้ง firebase-tools ทั่วโลกและลบออกจากรายการ DevDeps ดูตัวอย่างของ repo ต่อไปสำหรับวิธีที่ฉันแนะนำโดยใช้ npm

• ตรวจสอบให้แน่ใจว่าคุณกำลังใช้โหนด 6.11.5 เป็นตัวจำลองฟังก์ชั่นต้องการสิ่งนี้ ฉันแนะนำ ASDF ในฐานะตัวจัดการเวอร์ชันและเพิ่มไฟล์ ASDF .tool-versions เพื่อกำหนดรันไทม์โหนด

• หากใช้ _app.js คุณอาจได้รับข้อผิดพลาดต่อไปนี้ในฟังก์ชั่นคลาวด์ที่ปรับใช้ของคุณ:

   { Error: Cannot find module '@babel/runtime/regenerator'...
  

  แม้จะมี next.js ที่มี @babel/runtime เป็นการพึ่งพาคุณต้องติดตั้งเป็นการพึ่งพาโดยตรงในโครงการนี้

การติดตั้ง

git clone https://github.com/jthegedus/firebase-functions-next-example
cd firebase-functions-next-example
yarn install

เข้าสู่ระบบ Firebase CLI

สิ่งนี้ใช้เป็นตัวพึ่งพาอาศัยกันแทนการติดตั้งทั่วโลก ฉันพบว่านี่เป็นประสบการณ์ที่ดีกว่ามาก

yarn fblogin

การพัฒนา next.js

Standard Next.js การพัฒนาด้วยการโหลดซ้ำของโมดูล ฯลฯ

yarn dev

การทดสอบในท้องถิ่น

yarn serve

ในที่สุดก็ใช้งานได้แล้ว! หมายเหตุ: คุณต้องมี ID โครงการ Firedbase ที่ถูกต้องที่กำหนดไว้ในไฟล์ .firebaserc เนื่องจากคำสั่ง serve ตรวจสอบว่ามีโครงการอยู่ ฉันเชื่อว่าสิ่งนี้เกี่ยวข้องกับการทำให้แน่ใจว่าเส้นทางสัมพัทธ์สอดคล้องกับแอปพลิเคชันที่ปรับใช้ของคุณเป็น <project id> ใช้ใน URL ของคุณ

สำหรับผู้ที่ต้องการขุดลึกลงไปในสิ่งที่เกิดขึ้นจริงที่นี่เรียกใช้คำสั่งนี้:

yarn serve --debug

ปรับใช้กับ Firebase

คุณจะต้องเชื่อมต่อโครงการเข้ากับโครงการ Firebase ของคุณ แก้ไขชื่อใน. firebaserc หรือเรียกใช้ firebase init และเลือกที่จะไม่แทนที่ไฟล์ใด ๆ

ปรับใช้ทรัพยากรโฮสติ้งและฟังก์ชั่นคลาวด์ใหม่

yarn deploy-app

การปรับใช้ฟังก์ชั่นที่ไม่ได้ใช้สำหรับ SSR

ปรับใช้ฟังก์ชั่นทั้งหมดที่ระบุในกลุ่มฟังก์ชัน แก้ไขสคริปต์นี้เพื่อเพิ่มกลุ่มฟังก์ชั่นเพิ่มเติม - ดูเอกสารการปรับใช้บางส่วนสำหรับวิธีการใช้กลุ่มฟังก์ชั่น

yarn deploy-funcs

ปรับใช้ทุกอย่างไปยังฐาน Firebase

yarn deploy-all

ทำความสะอาดโฟลเดอร์ dist

yarn clean

หมายเหตุเกี่ยวกับความเข้ากันได้ของรหัส

ทุกอย่างถูกทดสอบใน Ubuntu 17.04 ด้วย Bash สิ่งนี้ควรทำงานบน Bash on Ubuntu บน Windows โดยไม่มีการเปลี่ยนแปลงใด ๆ หากคุณต้องการการสนับสนุน Windows Native โปรดส่งปัญหาเพื่อให้เราสามารถทำงานร่วมกันได้กับ Windows โปรดรายงานข้อผิดพลาด macOS ใด ๆ เนื่องจากฉันไม่สามารถเข้าถึงอุปกรณ์เพื่อทดสอบได้ สภาพแวดล้อมการพัฒนาของฉันสามารถพบได้ที่นี่