قم بإنشاء ملف firebase.json لعمليات إعادة توجيه Firebase

لقد قمنا مؤخرًا بنقل دليل المستخدم لدمج المراسلات وإشعارات النماذج من موقع الويب labnol.org ل digitalinspiration.com. كما هو الحال مع أي نقل للنطاق، كان علينا إعداد عمليات إعادة التوجيه 301 يدويًا بحيث تتم إعادة توجيه الجمهور تلقائيًا إلى موقع الويب الجديد في حالة قيامهم بالنقر فوق أي من الروابط التي لا تزال تشير إلى النطاق القديم.

نظرًا لأن مواقع الويب مستضافة على Firebase، فمن السهل إعداد عمليات إعادة التوجيه 301 من خلال firebase.json ملف. كل ما نحتاجه هو إدخالات في redirects مصفوفة، إدخال واحد لكل عملية إعادة توجيه، مع تحديد المصدر وعنوان URL الوجهة ومن الممكن أيضًا تحديد ما إذا كانت إعادة التوجيه 301 (دائم) أو إعادة توجيه 302 مؤقتة.

{
  "redirects": [
    {
      "source": "/page1",
      "destination": "https://digitalinspiration.com/page1",
      "type": 301
    },
    {
      "source": "/page2{,/**}", // also redirect pages ending with slash
      "destination": "https://digitalinspiration.com/page2",
      "type": 302
    }
  ]
}

عندما تقوم بترحيل المواقع الكبيرة، قد يصبح من الصعب الحفاظ على firebase.json الملف كمئات من عناوين URL التي قد يلزم إضافتها في مصفوفة عمليات إعادة التوجيه. كحل بديل، يمكنك إنشاء ملف JSON منفصل بجميع عمليات إعادة التوجيه ثم إنشاء ملف firebase.json ملف ديناميكيا.

يتم إنشاء ملف firebase تلقائيًا من ملف عمليات إعادة التوجيه قبل تحميل الأصول إلى استضافة Firebase.

الخطوة 1: إنشاء ملف أساسي firebase.base.json. كما ترون، لدينا بالفعل عدد قليل من إعدادات عمليات إعادة التوجيه وسيتم دمج إدخالات إعادة التوجيه الجديدة في هذه المصفوفة.

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "redirects": [
      {
        "source": "/foo{,/**}",
        "destination": "/bar",
        "type": 301
      },
      {
        "source": "/firebase/**",
        "destination": "https://firebase.google.com/",
        "type": 302
      }
    ]
  }
}

الخطوة 2: إنشاء أ firebase.redirects.json ملف مع links الخاصية التي تحتوي على مجموعة من الروابط. سيكون لكل إدخال رابط نمط التعبير العادي أو الكرة الأرضية المصدر وعنوان URL الوصفي ونوع إعادة التوجيه (اختياري).

{
  "links": [
    [
      "/email-google-form-responses-7263",
      "https://digitalinspiration.com/docs/form-notifications/email-multiple-people"
    ],
    [
      "/embed-qrcode-barcode-google-forms-021020",
      "https://digitalinspiration.com/docs/form-notifications/barcode-qrcode"
    ],
    [
      "/internet/google-forms-mobile-notifications/29203",
      "https://digitalinspiration.com/docs/form-notifications/phone-push-notifications",
      false
    ]
  ]
}

الخطوة 3: إنشاء أ generate.js من شأنها قراءة الملف الأساسي وإنشاء ملف firebase.json الملف باستخدام عمليات إعادة التوجيه المدرجة في ملف redirects.json ملف. الجميع

const fs = require('fs');

const redirects = fs.readFileSync('firebase.redirects.json');
const { links = [] } = JSON.parse(redirects);

const linkMap = links.map((link) => {
  const [source, destination, permanent = true] = link;
  return {
    source: `${source}{,/**}`,
    destination,
    type: permanent ? 301 : 302,
  };
});

const firebase = fs.readFileSync('firebase.base.json');

const file = JSON.parse(firebase);

file.hosting.redirects = [...file.hosting.redirects, ...linkMap];

fs.writeFileSync('firebase.json', JSON.stringify(file, null, 2));

الخطوة 4: داخل package.json الملف، قم بإضافة إدخال جديد في script قسم لإنشاء الملف قبل خطوة التحميل.

{
  "scripts": {
    "generator": "node generate.js",
    "upload": "npm run generator && firebase deploy --only hosting"
  }
}

وهذا يضمن أن جديد firebase.json يتم إعادة إنشاء الملف قبل النشر.