firebase functions next example

تم إهماله ، مثال جديد في أمثلة Firebase-GCP-Amplames

---

تطبيق Next.js SSR على وظائف السحابة لـ Firebase مع استضافة Firebase

استضف تطبيق React Next.js SSR على وظائف السحابة لـ Firebase مع استضافة Firebase.

فيما يلي المنشور المتوسط المصاحب ، يتم كتابة منشور جديد لوصف بنية المشروع الجديدة ، والنشر الجزئي Firebase ، ودعم Firebase لسنانير ما قبل/ما بعد النشر وما هي المشكلات التي تحلها هذه الميزات الجديدة.

لماذا؟

استضافة تطبيق SSR Next.js الخاص بك على وظائف السحابة مما يتيح تجربة تطبيق SSR منخفضة التكلفة التلقائية ، التي تستفيد من تجربة مطور Firebase الحلو.

كيف؟

يمكن لـ Firebase Hosting إعادة كتابة الطرق إلى وظيفة سحابة تخدم تطبيق Next.js من جانب الخادم. باستخدام قاعدة إعادة الكتابة التي تمسك بجميع الطرق ، يمكننا بعد ذلك استضافة تطبيق SSR الخاص بنا على عنوان URL لاستضافة قاعدة Firebase بدلاً من عنوان URL Firebase Cloud.

بدلاً من:

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

يمكننا استخدام:

<project-name>.firebaseapp.com/

يمكن بعد ذلك استخدام jex.js لتحقيق تفاعل SSR مع إعادة تحميل الموديل الساخن ، وتوجيه الخادم والتوجيه من جانب العميل ، وتقسيم رمز مستوى الطريق ، والتجميل مسبقًا وأكثر!

تم التغلب على عدد من المشكلات في استضافة SSR على Firebase مع هذه الطريقة. يرجى الرجوع إلى المنشور المتوسط قبل إنشاء المشكلات هنا.

مهم!

• يستخدم هذا المثال firebase-tools كإعدادات devDependency التي يتم تشغيلها من node_modules/.bin/ folder عبر yarn . سيتم تشغيل YARN البرامج النصية من إما package.json أو البرامج النصية الثنائية من node_modules/.bin/ . لا يقوم npm run بالتحقق من مجلد .bin للإنجازات التنفيذية ، لذلك إذا كنت تستخدم npm ، فسيتعين عليك إما تغيير البرامج النصية لتشغيل firebase Binary بشكل صريح من node_modules/.bin/ أو تثبيت firebase-tools على مستوى العالم وإزالتها من قائمة DevDeps. ألق نظرة على مثال repo next.js على كيفية يوصي باستخدام 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 Development

تطور Next.js القياسي مع إعادة تحميل الوحدة الساخنة وما إلى ذلك

yarn dev

الاختبار المحلي

yarn serve

هذا يعمل أخيرًا الآن! ملاحظة: يجب أن يكون لديك معرف مشروع Firebase صالح محدد في ملف .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 على Ubuntu على Windows دون أي تغييرات. إذا كنت ترغب في دعم Windows الأصلي ، فيرجى تقديم مشكلة حتى نتمكن من العمل على توافق Windows. يرجى الإبلاغ عن أي أخطاء في MacOS لأنني لا أتمكن من الوصول إلى جهاز للاختبار. يمكن العثور على بيئة التطوير الخاصة بي هنا.