استضافة موقعك على Firebase Hosting

بنيت موقعاً جميلاً، فيه قاعدة بيانات وتسجيل دخول، لكنه يعمل على جهازك فقط! حان وقت نشره ليراه العالم. Firebase Hosting يستضيف المواقع بسرعة عالية، مع شهادة أمان HTTPS مجانية، وخطة مجانية سخية تكفي أغلب المشاريع الصغيرة. في هذا الدرس ستنشر موقعك على الإنترنت بأوامر قليلة.

ماذا يستضيف Firebase Hosting؟

Firebase Hosting مخصص لـالملفات الثابتة: HTML و CSS و JavaScript والصور. وهذا يكفي لمواقع كثيرة جداً:

• المواقع الشخصية وصفحات الهبوط.
• تطبيقات الويب المبنية بـ React أو Vue أو Flutter Web، بعد بنائها.
• المواقع التي تعتمد على Firestore و Authentication، لأن الاتصال بهما يتم من المتصفح نفسه.

تخيّل الاستضافة مثل محل في سوق كبير: تضع بضاعتك (ملفات موقعك) على الرفوف، والسوق (Firebase) يتولى الحراسة والإضاءة وفتح الأبواب للزوار من كل مكان.

الخطوة 1: تهيئة المشروع

داخل مجلد موقعك، بعد تثبيت Firebase CLI وتسجيل الدخول كما في الدرس الثاني:

firebase init hosting

ستسألك الأداة عدة أسئلة:

1. أي مشروع؟ اختر مشروعك الموجود من القائمة.
2. ما مجلد الملفات العامة؟ المجلد الذي فيه index.html. الافتراضي public، وفي مشاريع البناء مثل Vite يكون غالباً dist، وفي Flutter Web يكون build/web.
3. هل هو تطبيق صفحة واحدة (Single-Page App)؟ أجب بنعم إذا كان موقعك React أو Flutter Web يدير التنقل بنفسه، فتُوجَّه كل الروابط إلى index.html.
4. هل تريد النشر التلقائي من GitHub؟ يمكنك التأجيل.

ملف firebase.json

ستنشئ الأداة ملف إعدادات في جذر المشروع:

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

• public: المجلد الذي سيُرفع.
• ignore: ملفات لا تُرفع أبداً، مثل الملفات المخفية ومجلد node_modules.

ويمكنك لاحقاً إضافة إعدادات مثل التحويلات (redirects)، أو رؤوس التخزين المؤقت (headers).

الخطوة 2: التجربة محلياً

قبل النشر، شاهد موقعك كما سيظهر تماماً على Firebase:

firebase emulators:start --only hosting

ستعطيك الأداة رابطاً محلياً مثل http://127.0.0.1:5000. افتحه في المتصفح. جربنا هذا فعلاً: الصفحة الرئيسية ظهرت بنجاح، وأي مسار غير موجود أعطى صفحة الخطأ 404، تماماً كما سيحدث على الإنترنت.

الخطوة 3: النشر

firebase deploy --only hosting

الأداة ترفع ملفاتك، وفي النهاية تعطيك رابط الموقع، بالشكل:

https://school-app-4f2a1.web.app

هذا كل شيء! موقعك الآن على الإنترنت، ويصل إليه أي شخص في العالم، مع HTTPS تلقائي. وستجد أيضاً رابطاً بديلاً ينتهي بـ firebaseapp.com.

وعند أي تعديل: عدّل ملفاتك، ثم نفّذ firebase deploy من جديد. وكل نشر يُحفظ في السجل، فإذا نشرت خطأ، تستطيع التراجع للإصدار السابق بضغطة من Firebase Console.

روابط المعاينة

قبل نشر تعديل كبير، أرسل رابطاً تجريبياً لأصدقائك أو فريقك: firebase hosting:channel:deploy preview ينشر نسخة على رابط مؤقت منفصل، دون أن يتأثر موقعك الأساسي. وينتهي الرابط تلقائياً بعد مدة.

الدومين الخاص

رابط web.app ممتاز للبداية، لكن ربما تريد دومينك الخاص مثل myschool.com:

1. اشترِ الدومين من أي شركة تسجيل دومينات.
2. في Firebase Console ← Hosting ← Add custom domain.
3. اتبع التعليمات لإضافة سجلات DNS عند شركة الدومين.
4. انتظر التفعيل، وقد يستغرق ساعات. وسيحصل دومينك على HTTPS مجاناً تلقائياً.

مثال: نشر تطبيق Flutter Web

إذا كنت درست كورس Flutter في هذا الموقع، يمكنك نشر تطبيقك على الويب:

flutter build web
firebase init hosting     # المجلد العام: build/web، وتطبيق صفحة واحدة: نعم
firebase deploy --only hosting

تطبيق Flutter نفسه، يعمل الآن في المتصفح لأي شخص!

ماذا لا ترفع؟

تأكد أن مجلد public لا يحتوي ملفات سرية، مثل ملفات حسابات الخدمة أو ملفات .env فيها كلمات مرور. كل ما في هذا المجلد سيصبح متاحاً للتحميل من أي شخص على الإنترنت.

جرّب بنفسك

1. أنشئ مجلداً فيه public/index.html بصفحة شخصية بسيطة عن نفسك.
2. نفّذ firebase init hosting واربطه بمشروعك.
3. جرّب الموقع محلياً بالمحاكي.
4. انشره بـ firebase deploy --only hosting، وافتح الرابط من هاتفك.
5. عدّل الصفحة وانشرها مرة أخرى، ثم جرّب التراجع للإصدار الأول من Console.
6. تحدٍّ: انشر موقعاً يستخدم Firestore من الدرس الثالث، ليعرض بيانات حقيقية على الإنترنت.

أخطاء شائعة

• مجلد عام خاطئ: إذا ظهرت صفحة Firebase الافتراضية بدلاً من موقعك، فقيمة public في firebase.json لا تشير لمجلد ملفاتك.
• نشر قبل البناء: في مشاريع React و Vite و Flutter، نفّذ أمر البناء أولاً، وإلا ترفع نسخة قديمة أو فارغة.
• روابط داخلية تعطي 404 في تطبيق صفحة واحدة: أجب «نعم» على سؤال Single-Page App، أو أضف قاعدة إعادة كتابة (rewrite) في firebase.json.

اختبر نفسك

سؤال

أي أمر ينشر موقعك على Firebase Hosting؟

firebase uploadfirebase startfirebase deploy --only hosting

سؤال

ما فائدة الأمر firebase hosting:channel:deploy preview؟

نشر نسخة تجريبية على رابط مؤقت منفصل دون التأثير على الموقع الأساسيحذف الموقعتغيير الدومين

الخلاصة

• Firebase Hosting يستضيف الملفات الثابتة بسرعة ومع HTTPS مجاني.
• firebase init hosting يجهز المشروع، و firebase.json يحدد المجلد العام.
• firebase emulators:start --only hosting للتجربة المحلية قبل النشر.
• firebase deploy --only hosting ينشر الموقع على رابط web.app، ويمكن التراجع لأي إصدار سابق.
• قنوات المعاينة للتجربة، والدومين الخاص من Console.