البرنامج التعليمي: تكوين Azure Front Door لتطبيقات الويب الثابتة Azure

بإضافة Azure Front Door ك CDN لتطبيق الويب الثابت الخاص بك، يمكنك الاستفادة من نقطة دخول آمنة للتسليم السريع لتطبيقات الويب الخاصة بك.

مع Static Web Apps، لديك خياران للتكامل مع Azure Front Door. يمكنك إضافة Azure Front Door إلى تطبيق الويب الثابت الخاص بك عن طريق تمكين الحافة على مستوى المؤسسة، وهو تكامل مدار ل Azure Front Door مع Static Web Apps. بدلا من ذلك، يمكنك تكوين مورد Azure Front Door يدويا أمام تطبيق الويب الثابت.

ضع في اعتبارك المزايا أدناه لتحديد الخيار الأنسب لاحتياجاتك.

توفر الحافة على مستوى المؤسسة ما يلي:

• صفر تغييرات في التكوين
• لا يوجد وقت تعطل
• شهادات SSL المدارة تلقائيا والمجالات المخصصة

يمنحك إعداد Azure Front Door اليدوي التحكم الكامل في تكوين CDN بما في ذلك فرصة:

• الحد من أصل نسبة استخدام الشبكة حسب الأصل
• إضافة جدار حماية تطبيق ويب (WAF)
• التوجيه عبر تطبيقات متعددة
• استخدام ميزات أكثر تقدما ل Azure Front Door

في هذا البرنامج التعليمي، ستتعلم إضافة Azure Front Door إلى تطبيق الويب الثابت.

المتطلبات الأساسية

• المجال المخصص الذي تم تكوينه لتطبيق الويب الثابت الخاص بك مع تعيين وقت البقاء (TTL) إلى أقل من 48 ساعة.
• تطبيق تم نشره باستخدام Azure Static Web Apps يستخدم خطة الاستضافة القياسية.

تمكين الحافة على مستوى المؤسسة على مورد Static Web Apps

مدخل Microsoft Azure

1. انتقل إلى تطبيق الويب الثابت في مدخل Microsoft Azure.

2. حدد حافة على مستوى المؤسسة في القائمة اليمنى.

3. حدد المربع المسمى Enable enterprise-grade edge.

4. حدد حفظ.

5. حدد موافق لتأكيد الحفظ.

   يؤدي تمكين هذه الميزة إلى تكاليف إضافية.

Azure CLI

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

المتطلبات الأساسية

• حساب Azure مع اشتراك نشط. إنشاء حساب مجانًا
• موقع Azure Static Web Apps. إنشاء أول تطبيق ويب ثابت
• Azure Static Web Apps Standard وخطط Azure Front Door Standard / Premium. لمزيد من المعلومات، راجع أسعار Static Web Apps
• ضع في اعتبارك استخدام الحافة على مستوى المؤسسة لأحمال صفحات أسرع وأمان محسن وموثوقية محسنة للتطبيقات العمومية.

إنشاء Azure Front Door

1. سجل الدخول إلى مدخل Azure.

2. من الصفحة الرئيسية أو قائمة Azure، حدد + Create a resource. ابحث عن ملفات تعريف Front Door وCDN، ثم حدد إنشاء>ملفات تعريف Front Door وCDN.

3. في صفحة مقارنة العروض، حدد إنشاء سريع، ثم حدد متابعة لإنشاء Front Door.

4. في صفحة إنشاء ملف تعريف Front Door، أدخل الإعدادات التالية أو حددها.

   الإعداد	القيمة‬
   الوصف	حدد اشتراك Azure الخاص بك.
   مجموعة الموارد	أدخل اسم مجموعة موارد. غالبا ما يكون هذا الاسم هو نفس اسم المجموعة الذي يستخدمه تطبيق الويب الثابت.
   موقع مجموعة الموارد	إذا قمت بإنشاء مجموعة موارد جديدة، أدخل الموقع الأقرب إليك.
   الاسم	أدخل my-static-web-app-front-door.
   المستوى	حدد قياسي.
   اسم نقطة النهاية	أدخل اسما فريدا لمضيف Front Door.
   نوع الأصل	حدد Static Web App.
   اسم المضيف الأصل	حدد اسم المضيف لتطبيق الويب الثابت من القائمة المنسدلة.
   التخزين المؤقت	حدد خانة الاختيار تمكين التخزين المؤقت.
   تحديد سلوك التخزين المؤقت لسلسلة الاستعلام	حدد استخدام سلسلة الاستعلام
   الضغط	حدد تمكين الضغط
   سياسة WAF	حدد إنشاء جديد أو حدد نهج جدار حماية تطبيق ويب موجود من القائمة المنسدلة إذا كنت تريد تمكين هذه الميزة.

   إشعار

   عند إنشاء ملف تعريف Azure Front Door، يجب تحديد أصل من نفس الاشتراك الذي تم إنشاء Front Door فيه.

5. حدد مراجعة + إنشاء، ثم حدد إنشاء. قد تستغرق عملية الإنشاء بضع دقائق حتى تكتمل.

6. بعد اكتمال التوزيع، حدد Go to resource.

7. إضافة شرط.

تعطيل ذاكرة التخزين المؤقت لسير عمل المصادقة

إشعار

يتم إهمال انتهاء صلاحية ذاكرة التخزين المؤقت وسلسلة استعلام مفتاح ذاكرة التخزين المؤقت وإجراءات تجاوز مجموعة الأصل. لا يزال بإمكان هذه الإجراءات العمل بشكل طبيعي، ولكن لا يمكن تغيير مجموعة القواعد الخاصة بك. استبدل هذه التجاوزات بإجراءات تجاوز تكوين المسار الجديدة قبل تغيير مجموعة القواعد الخاصة بك.

أضف الإعدادات التالية لتعطيل نهج التخزين المؤقت ل Front Door من محاولة تخزين صفحات المصادقة والتخويل مؤقتا.

إضافة شرط

1. من Front Door، ضمن الإعدادات، حدد Rule set.

2. حدد إضافة.

3. في مربع النص Rule set name ، أدخل Security.

4. في مربع النص Rule name ، أدخل NoCacheAuthRequests.

5. حدد إضافة شرط.

6. حدد مسار الطلب.

7. حدد القائمة المنسدلة عامل التشغيل، ثم يبدأ ب.

8. حدد الارتباط Edit أعلى مربع النص Value.

9. أدخل /.auth في مربع النص، ثم حدد تحديث.

10. حدد لا خيارات من القائمة المنسدلة تحويل السلسلة.

إضافة إجراء

1. حدد القائمة المنسدلة Add an action.

2. حدد تجاوز تكوين المسار.

3. حدد معطل في القائمة المنسدلة التخزين المؤقت .

4. حدد حفظ.

إقران القاعدة بنقطة نهاية

الآن بعد إنشاء القاعدة، قم بتطبيق القاعدة على نقطة نهاية Front Door.

1. من Front Door، حدد Rule set، ثم الارتباط Unassociated .

   

2. حدد اسم نقطة النهاية الذي تريد تطبيق قاعدة التخزين المؤقت عليه، ثم حدد التالي.

3. حدد + Associate.

   

نسخ معرف Front Door

استخدم الخطوات التالية لنسخ المعرف الفريد لمثيل Front Door.

1. من Front Door، حدد ارتباط Overview على التنقل الأيسر.

2. انسخ القيمة المسماة Front Door ID والصقها في ملف لاستخدامها لاحقا.

   

تحديث تكوين تطبيق الويب الثابت

لإكمال التكامل مع Front Door، تحتاج إلى تحديث ملف تكوين التطبيق للقيام بالوظائف التالية:

• تقييد نسبة استخدام الشبكة إلى موقعك فقط من خلال Front Door
• تقييد نسبة استخدام الشبكة إلى موقعك فقط من مثيل Front Door
• تحديد المجالات التي يمكنها الوصول إلى موقعك
• تعطيل التخزين المؤقت للمسارات الآمنة

افتح الملف staticwebapp.config.json لموقعك وقم بإجراء التغييرات التالية.

1. تقييد حركة المرور لاستخدام Front Door فقط عن طريق إضافة القسم التالي إلى ملف التكوين:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. لتحديد مثيلات Azure Front Door والمجالات التي يمكنها الوصول إلى موقعك، أضف forwardingGateway القسم .

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   أولا، قم بتكوين تطبيقك للسماح فقط بحركة المرور من مثيل Front Door. في كل طلب خلفية، يضيف Front Door تلقائيا عنوانا X-Azure-FDID يحتوي على معرف مثيل Front Door. من خلال تكوين تطبيق الويب الثابت الخاص بك لطلب هذا العنوان، فإنه يقيد نسبة استخدام الشبكة حصريا إلى مثيل Front Door الخاص بك. في القسم في forwardingGateway ملف التكوين، أضف requiredHeaders المقطع وحدد X-Azure-FDID العنوان. استبدل <YOUR-FRONT-DOOR-ID> بمعرف Front Door الذي وضعته جانبا في وقت سابق.

   بعد ذلك، أضف اسم مضيف Azure Front Door (وليس اسم مضيف Azure Static Web Apps) إلى allowedForwardedHosts الصفيف. إذا كان لديك مجالات مخصصة تم تكوينها في مثيل Front Door، فضمنها أيضا في هذه القائمة.

   في هذا المثال، استبدل my-sitename.azurefd.net باسم مضيف Azure Front Door لموقعك.

3. بالنسبة لجميع المسارات الآمنة في تطبيقك، قم بتعطيل التخزين المؤقت ل Azure Front Door عن طريق إضافة "Cache-Control": "no-store" إلى تعريف رأس المسار.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

باستخدام هذا التكوين، لم يعد موقعك متوفرا عبر اسم المضيف الذي تم *.azurestaticapps.net إنشاؤه، ولكن حصريا من خلال أسماء المضيفين التي تم تكوينها في مثيل Front Door.

الاعتبارات

• المجالات المخصصة: الآن بعد أن أصبح Front Door يدير موقعك، لم تعد تستخدم ميزة المجال المخصص ل Azure Static Web Apps. يحتوي Azure Front Door على عملية منفصلة لإضافة مجال مخصص. راجع إضافة مجال مخصص إلى Front Door. عند إضافة مجال مخصص إلى Front Door، ستحتاج إلى تحديث ملف تكوين تطبيق الويب الثابت لتضمينه في allowedForwardedHosts القائمة.

• إحصائيات نسبة استخدام الشبكة: بشكل افتراضي، يقوم Azure Front Door بتكوين فحوصات السلامة التي قد تؤثر على إحصائيات نسبة استخدام الشبكة. قد تحتاج إلى تحرير القيم الافتراضية لفحوصات السلامة.

• تقديم الإصدارات القديمة: عند نشر تحديثات للملفات الموجودة في تطبيق الويب الثابت، قد يستمر Azure Front Door في تقديم الإصدارات القديمة من ملفاتك حتى تنتهي مدة صلاحيتها . قم بإزالة ذاكرة التخزين المؤقت ل Azure Front Door للمسارات المتأثرة لضمان تقديم أحدث الملفات.

تنظيف الموارد

إذا لم تعد ترغب في استخدام الموارد التي تم إنشاؤها في هذا البرنامج التعليمي، فاحذف Azure Static Web Apps ومثيلات Azure Front Door.

الخطوات التالية

إضافة واجهة برمجة تطبيقات