00:00:00مرحباً بالجميع.
00:00:24أهلاً بكم في جلسة البث المباشر لهذا الأسبوع لمجتمع Vercel.
00:00:27أنا إيمي، وترافقني مايا اليوم.
00:00:31أهلاً بالجميع.
00:00:32نحن نعمل معاً في فريق مجتمع Vercel.
00:00:35نبث هذا اللقاء مباشرة على منصة X ويوتيوب،
00:00:37ولكن إذا أردتم طرح أي أسئلة،
00:00:39تأكدوا من تسجيل الدخول عبر الرابط [community.vercel.com/live](https://community.vercel.com/live)
00:00:43للانضمام إلى الدردشة لضمان رؤيتنا لأسئلتكم.
00:00:47بالتأكيد. إذا كنتم تتواجدون في دردشتنا الآن،
00:00:50فنود تذكيركم بلطف بضرورة التحلي بالاحترام،
00:00:52واتباع مدونة السلوك الخاصة بنا،
00:00:54لمساعدتنا في جعل هذا المكان مريحاً للجميع.
00:00:56موضوع جلسة اليوم هو شبكة توصيل المحتوى (CDN) الخاصة بـ Vercel.
00:01:00حقيقة ممتعة، إذا كنتم تشاهدوننا من منصتنا،
00:01:04فأنتم تستخدمون بالفعل Vercel CDN، وهذا أمر رائع حقاً.
00:01:07لذا إذا كنتم تشعرون بالفضول تجاه ذلك،
00:01:10فقد قام جايكوب باريس، وهو زميلنا في فريق هندسة تجربة المطورين (DX)،
00:01:13بنشر مقال رائع في المدونة حول
00:01:15تطبيق ذلك مؤخراً على موقع Vercel الإلكتروني.
00:01:19لقد أرسلتُ الرابط للتو في الدردشة،
00:01:22لمن يرغب في قراءته، ستجدونه هناك.
00:01:25أيضاً، إذا كنتم تتابعون تحديثاتنا،
00:01:28فستلاحظون أننا أطلقنا الكثير من التحديثات
00:01:30في سجل التغييرات المتعلقة بـ Vercel CDN.
00:01:33لذلك أردنا استضافة أعضاء من
00:01:35الفريق هنا ليحدثونا أكثر عن ذلك،
00:01:37ويطلعوكم على كافة الطرق التي بنيناه بها،
00:01:40وكيفية استخدامه، وجميع الميزات المتاحة.
00:01:43لذا نرحب بضيوفنا على المسرح،
00:01:45مارك، وأندرو، وياش للتحدث معكم حول هذا الموضوع.
00:01:48سنترك لكم الساحة يا شباب.
00:01:51شكراً إيمي ومايا.
00:01:55مرحباً جميعاً، اسمي مارك.
00:01:57أنا مهندس برمجيات في فريق الـ CDN،
00:01:59وأنا هنا مع أندرو وياش.
00:02:03أنا أتحدث إليكم من مكتب Vercel الجميل
00:02:06في سان فرانسيسكو، حيث الجو دافئ تماماً هذا الأسبوع هنا في كاليفورنيا.
00:02:09اليوم، أردت التحدث عن
00:02:12ميزات الـ CDN الحديثة التي كنا نعمل عليها.
00:02:15أنا متحمس جداً لمناقشتها.
00:02:18في البداية، أود تقديم نبذة عن Vercel CDN.
00:02:21سأعرض بعض الشرائح التي أعددناها حول ذلك،
00:02:25ثم سأترك المجال لأندرو،
00:02:27الذي سيبدأ بجولة تجريبية في لوحة تحكم الـ CDN.
00:02:32رائع. أردت فقط توضيح كيفية عمل Vercel CDN.
00:02:39قد لا تعرفون ذلك، ولكن كل مشروع
00:02:42يتم نشره على Vercel يستخدم Vercel CDN تلقائياً.
00:02:44أنتم تحصلون على هذه الميزة مجاناً.
00:02:46لكنها قد تكون ميزة خفية لا تدركون آلية عملها.
00:02:51تقوم Vercel CDN
00:02:54باستقبال الطلبات من العميل،
00:02:56سواء من المتصفح أو جهاز الكمبيوتر الخاص بك،
00:02:58وتوجهها إلى أقرب نقطة تواجد (PoP).
00:03:01نقاط التواجد هذه منتشرة في جميع أنحاء العالم.
00:03:03لدينا أكثر من 125 نقطة موزعة جغرافياً حول العالم.
00:03:07ثم تنتقل البيانات إلى منطقة Vercel حيث نقوم بفك تشفير (TLS)،
00:03:14وبعد ذلك نتعامل مع الطلب.
00:03:16هنا نقوم بعملية التخزين المؤقت (Caching).
00:03:18كما نقوم أيضاً بتوجيه المسارات (Routing).
00:03:19إذا لم يجد الطلب نسخة مخزنة مؤقتاً،
00:03:21نقوم بتحويله إلى منطقة الدوال (Functions) حيث يمكننا القيام
00:03:25بإعادة التوليد الاستاتيكي التدريجي (ISR) عبر دالة، وهكذا.
00:03:29سأشرح هذا المخطط بمزيد من التفصيل عندما نتحدث عن التخزين المؤقت لاحقاً.
00:03:33كجزء من هذا، تحصلون على دخول البيانات،
00:03:35وجدار حماية، وتوجيه للمسارات،
00:03:38وميزات إدارة الحركة مثل حماية الانحراف (Skew Protection)،
00:03:40والإصدارات المتدرجة، والواجهات الأمامية الدقيقة، وغيرها الكثير.
00:03:44إذن، ما الذي يميز Vercel CDN؟
00:03:49إن Vercel CDN تفهم كود إطارات العمل (Frameworks) بشكل أصيل.
00:03:52ما يعنيه ذلك هو أنه عند نشر مشروع على Vercel،
00:03:56فإن الكود والإعدادات
00:03:57تُترجم تلقائياً إلى
00:04:00ملفات برمجية تعالجها Vercel CDN محلياً وبشكل مباشر.
00:04:04في معظم شبكات CDN الأخرى، يتعين عليك ضبط الإعدادات بنفسك.
00:04:07أما هنا، فالميزة تأتي جاهزة إذا كنت تستخدم أحد إطارات العمل المدعومة.
00:04:10ستحصل على تسريع مدمج للطلبات،
00:04:13وتوافر عالٍ للخدمة كما ذكرت سابقاً.
00:04:16كما تحصل أيضاً على ميزة مثل ISR،
00:04:19وهي إعادة التوليد الاستاتيكي التدريجي.
00:04:21هذه ميزة أساسية لدينا،
00:04:23وهذا يعني أنه يمكنك تحديث الصفحات دون إعادة نشر
00:04:27الكود الخاص بك، فقط من خلال إرسال
00:04:29طلب API أو Webhook واستهداف صفحات محددة.
00:04:34ومرة أخرى، تحصل على حماية غير محدودة
00:04:36ودائمة ضد هجمات DDoS لكل مشاريعك.
00:04:40هذه الميزة مجانية وتتعامل باستمرار مع التهديدات عبر التطبيقات،
00:04:46بالإضافة إلى جدار حماية لتطبيقات الويب وإدارة برامج البوت القابلة للضبط.
00:04:51خلال الأشهر القليلة الماضية،
00:04:53عملنا على عدد من الميزات الجديدة التي
00:04:56أصبحت متاحة الآن داخل لوحة تحكم Vercel،
00:05:00وسوف نستعرض هذه الميزات اليوم.
00:05:02تشمل هذه الميزات تجربة جديدة تماماً للوحة تحكم CDN،
00:05:06والقدرة على تحديد قواعد التوجيه على
00:05:09مستوى المشروع دون الحاجة إلى عملية نشر جديدة،
00:05:12وعلامة تبويب جديدة تماماً للتخزين المؤقت،
00:05:13وأيضاً القدرة على تحديد ما يصل إلى مليون عملية إعادة توجيه (Redirects).
00:05:18والآن، سأنتقل إلى أندرو،
00:05:22ليأخذنا في جولة داخل لوحة تحكم CDN. تفضل يا أندرو.
00:05:27شكراً يا مارك. أهلاً بكم.
00:05:29مرحباً جميعاً، أنا أندرو غازيك.
00:05:31أنا مهندس برمجيات في فريق الـ CDN، كما هو واضح.
00:05:36أنا مقيم في ولاية نيو هامبشاير.
00:05:38اليوم، تبلغ الحرارة حوالي 35 درجة فهرنهايت والجو مشمس، لكنه لا يزال بارداً جداً.
00:05:45أتطلع بشوق إلى أيام الصيف الدافئة قريباً.
00:05:49سأقوم اليوم بمشاركة شاشتي،
00:05:53وسأستعرض معكم تطبيقاً تجريبياً صغيراً
00:05:56قمنا ببنائه لجلسة المجتمع اليوم.
00:05:59لدينا هذا التطبيق المبني بـ Next.js.
00:06:02وهو يحتوي على مجموعة من المسارات لمدونة.
00:06:08يمكننا عرض لوحة التحكم.
00:06:10وهناك مسار API يعيد البيانات، وما إلى ذلك.
00:06:16لكن ليس هذا ما جئنا من أجله.
00:06:18نحن هنا من أجل التغييرات في لوحة التحكم.
00:06:22عندما تكون في لوحة تحكم Vercel،
00:06:25ستلاحظ الآن وجود علامة تبويب جديدة باسم CDN هنا.
00:06:28إذا نقرت عليها،
00:06:30ستنقلك إلى صفحة النظرة العامة هذه حيث نعرض
00:06:35جميع مناطق Vercel التي تقوم حالياً
00:06:39بخدمة مشروعك خلال الفترة الزمنية المحددة.
00:06:45لدينا هنا آخر 12 ساعة.
00:06:47يمكننا أن نرى أن الزيارات القادمة من سان فرانسيسكو
00:06:49وواشنطن تصل إلى موقعنا.
00:06:52يمكنك تمرير المؤشر فوق هذه النقاط لرؤية المزيد من التفاصيل.
00:06:55ويمكنك فتح قسم قابلية المراقبة (Observability)
00:06:58للتعمق أكثر في بيانات حركة الزوار.
00:07:04الأمر الرائع في هذه الصفحة هو أنه يمكنك عرض خريطة ثلاثية الأبعاد،
00:07:08أو العودة إلى الخريطة ثنائية الأبعاد،
00:07:10وكذلك رؤية المزيد من بيانات المراقبة هنا،
00:07:17والتي ترتبط أيضاً بصفحات المراقبة المخصصة.
00:07:22هذه هي صفحة النظرة العامة.
00:07:27الغرض منها هو إعطاؤك لمحة سريعة عن
00:07:30حركة الزوار في مشروعك،
00:07:35بالإضافة إلى إظهار مواقع الدوال الخاصة بك أيضاً.
00:07:38يمكنك أن ترى أن منطقة الدوال لهذا المشروع هي واشنطن.
00:07:44الشيء التالي الذي أريد استعراضه هو عمليات إعادة التوجيه.
00:07:48عمليات إعادة التوجيه الكبيرة (Bulk Redirects)، عفواً.
00:07:52أوه لا، يبدو أن هذا كان من المفترض أن يحدث.
00:08:00دعونا نرى. سأحاول تجربة مشروع مختلف هنا.
00:08:07حسناً، لنجرب مشروعاً آخر.
00:08:18نعتذر عن هذا الإزعاج.
00:08:22لدينا هذا المشروع الخاص بإعادة التوجيه الكبيرة.
00:08:27لنحاول إضافة بعض عمليات إعادة التوجيه إليه.
00:08:30لإنشاء عملية إعادة توجيه،
00:08:35تأتي إلى هذه الصفحة، وتنقر على "يدوي" (Manual).
00:08:37الآن، لنفترض أنني أريد توجيه المسار flash-demo إلى،
00:08:44دعونا نرى، blog-2020-about،
00:08:51بأسلوب معين، لنتأكد، شيء من هذا القبيل.
00:08:57تنقر على "إنشاء"، ويتم إنشاؤه في الخلفية،
00:09:02ثم ستظهر نافذة مراجعة التغييرات هذه.
00:09:07حالياً، هذه التغييرات ليست مفعلة في بيئة الإنتاج.
00:09:11إنها في بيئة تجريبية (Staging)،
00:09:13ويمكنك اختبار إعادة التوجيه الجديدة من خلال هذا.
00:09:18بالنقر هنا، نجد أن هذه الصفحة لا وجود لها حالياً.
00:09:24ولكن نعم، هذه هي طريقة العمل.
00:09:27بعد ذلك، إذا أردت نشرها في بيئة الإنتاج، تنقر على "نشر" (Publish).
00:09:30وإذا أردت إبقاءها في البيئة التجريبية، تنقر على "إلغاء"،
00:09:34وعندها يمكنك عرض تغييرات البيئة التجريبية التي قمنا بها هنا.
00:09:39إذا قمنا بنشر هذا في بيئة الإنتاج،
00:09:42ستختفي هذه التغييرات من هنا.
00:09:45من المفترض أن نراها مفعلة في الإنتاج.
00:09:58الآن يمكنك البحث.
00:10:01ويمكنك عرض سجل التغييرات الخاص بك.
00:10:05يمكنك مقارنة التغييرات الحالية بالتغييرات السابقة،
00:10:14ويمكنك استعادة هذا الإصدار إذا أردت.
00:10:17بالنقر على "استعادة" (Restore)، سنرى أن المسار التجريبي لم يعد موجوداً.
00:10:26ممتاز. رائع. سأنتقل الآن إلى ياش ليقدم عرضه التجريبي.
00:10:34شكراً لك يا أندرو. مرحباً بالجميع.
00:10:38اسمي ياش، أنا متدرب هندسي في فريق الـ CDN،
00:10:42وأنا أيضاً مقيم في المقر الرئيسي في سان فرانسيسكو
00:10:55لجامعة كاليفورنيا سان فرانسيسكو.
00:10:58أنا متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:03أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:08أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:14أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:18أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:23أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:26أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:32أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:37أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:41أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:46أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:50أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:11:57أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:02أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:07أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:13أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:17أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:22أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:27أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:32أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:37أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:41أنا أيضاً متدرب هندسي في جامعة كاليفورنيا سان فرانسيسكو.
00:12:45لو أردنا فعل الشيء نفسه برمجياً، لتعين علينا إعادة نشر المشروع.
00:12:49لكن الآن، يتم الأمر بشكل فوري.
00:12:53الآن سأقوم بإنشاء مسار ثانٍ، سيكون أكثر تعقيداً قليلاً.
00:12:56بدلاً من ملء النموذج كما فعلت في المرة السابقة، سأقوم بكتابة ما أريده هنا.
00:13:00سوف نستخدم الذكاء الاصطناعي لإنشاء المسار.
00:13:02لدي لوحة تحكم، وأنا أقوم بصنع الإصدار الثاني، والذي أريد طرحه تدريجياً لمستخدمي النسخة التجريبية فقط.
00:13:08لذلك يمكنني إعادة توجيه لوحة التحكم الخاصة بنا إلى الإصدار الثاني منها.
00:13:14لنرى ما إذا كان لدى المستخدم ملف تعريف ارتباط "بيتا" بقيمة "صحيح".
00:13:21الآن يمكننا إنشاء القاعدة، وخلال ثوانٍ قليلة سيقوم الذكاء الاصطناعي بملء النموذج لنا.
00:13:27يمكننا إلقاء نظرة على القاعدة التي أنشأناها. إنها تحول المسار من dashboard إلى dashboard v2.
00:13:32هذا يعني أن المستخدم سيظل يرى كلمة dashboard في رابط المتصفح،
00:13:35لكن سيظهر له المحتوى الجديد من لوحة التحكم الجديدة.
00:13:39وهناك هذا الشرط هنا. ما يعنيه هو أن قاعدة إعادة الكتابة ستطبق فقط
00:13:43إذا كان لدى المستخدم ملف تعريف ارتباط يسمى beta وقيمته تساوي true.
00:13:46لذا إذا كان لديهم هذا الكوكيز، سيرون لوحة التحكم الجديدة، وإلا سيرون القديمة.
00:13:53ومرة أخرى، يمكننا اختبار ذلك بسرعة كبيرة.
00:13:58هذه هي لوحة التحكم القديمة، ولكن الآن إذا وضعنا كوكيز باسم beta وقيمته true،
00:14:09وقمنا بتحديث الصفحة، سنرى لوحة التحكم الجديدة، لكن الرابط لا يزال dashboard وليس dashboard/v2.
00:14:16هذا لأننا استخدمنا إعادة الكتابة (rewrite) بدلاً من إعادة التوجيه (redirect)، ويمكننا نشرها الآن.
00:14:22وآخر قاعدة كتابة أريد أن أريكم إياها تتعلق بترويسات التخزين المؤقت (caching headers).
00:14:26هذا شيء يمكنك ضبطه لتحسين أداء موقعك،
00:14:30وبشكل خاص أريد تحسين الصور الثابتة.
00:14:33لذا يمكنني القول إننا نريد تحسين التخزين المؤقت للصور الثابتة،
00:14:41وضبط ترويسة cache-control لتكون عامة ولمدة عام وغير قابلة للتغيير لصورنا.
00:14:52ومرة أخرى، يمكننا إنشاء القاعدة باستخدام الذكاء الاصطناعي.
00:14:55والآن أنشأنا هذه القاعدة التي ستضبط تخزيناً مؤقتاً لمدة عام لجميع الصور.
00:14:59فبدلاً من أن يقوم المتصفح بطلب الصورة من الخادم في كل مرة،
00:15:03سيحاول جلبها محلياً وهذا يحسن الأداء ويوفر التكاليف.
00:15:08هناك قيم أخرى كثيرة يمكنك ضبط ترويسة cache-control عليها،
00:15:11لكنني أعتقد أن هذه هي الأفضل للأصول الثابتة.
00:15:14لذا يمكنك مرة أخرى الإنشاء ثم نشر المسار.
00:15:19وكما ذكرت سابقاً، كل هذه المسارات يمكن تعريفها برمجياً أيضاً.
00:15:23ولدينا هذا النموذج هنا حيث يمكنك
00:15:26تحويل جميع مساراتك في لوحة التحكم إلى شيء يمكنك نسخه ولصقه
00:15:30إما في ملف Vercel.json أو Vercel.ts أيهما تفضل.
00:15:35الفائدة الرئيسية لوضعها في الكود هي اتباع أفضل ممارسات التحكم في الإصدار،
00:15:40لكن إذا أجريت تغييرات هنا، تذكر أنك ستحتاج لإعادة نشر مشروعك لتفعيلها.
00:15:46والشيء الآخر الذي أريد أن أريكم إياه هو صفحة السجل (history).
00:15:49هذا مشابه لما عرضه أندرو في صفحة إعادة التوجيه الجماعي.
00:15:52يمكنك رؤية الإصدارات السابقة وما الذي تغير.
00:15:55ولنقل إننا نريد التراجع عن أحدث تغيير قمنا به وهو إضافة قاعدة التخزين المؤقت.
00:16:00يمكننا استعادتها فوراً بمجرد الضغط على زر الاستعادة (restore).
00:16:04والآن وبشكل فوري تقريباً ستختفي القاعدة، نلاحظ أنها لم تعد موجودة هنا.
00:16:09يمكنك أيضاً البحث والتصفية حسب النوع، فإذا أردت رؤية كل عمليات إعادة التوجيه يمكنك ذلك.
00:16:14وهذا كل ما يخص إضافة المسارات للمشروع.
00:16:16كل الوظائف التي عرضتها متاحة أيضاً عبر واجهة برمجة التطبيقات (API) وواجهة السطر الأوامر (CLI) والمكتبات البرمجية (SDK).
00:16:22شكراً جزيلاً لكم، وسأترك الكلمة لمارك.
00:16:26رائع، شكراً جزيلاً يا ياش، كان عرضاً ممتعاً.
00:16:29أعجبتني ميزة اللغة الطبيعية.
00:16:31سأعرض الميزة الأخيرة في تبويبات CDN الجديدة وهي تبويب التخزين المؤقت (caching).
00:16:41تماماً كما كان يتحدث ياش عن إمكانية ضبط ترويسة التحكم في التخزين،
00:16:46بشكل افتراضي في CDN الخاص بـ Vercel، تحصل على التخزين المؤقت مجاناً عند استخدام ميزات مثل
00:16:53تجديد الموقع الثابت التدريجي (ISR) أو يمكنك التحكم في الترويسات بنفسك.
00:16:56هنا في تبويب التخزين المؤقت في الأعلى، لدينا هذا المخطط التوضيحي.
00:17:04أردت قضاء بعض الوقت في شرح هذا لأنه بخلاف شبكات CDN الأخرى، هناك
00:17:09مستويات متعددة هنا تساعدك على تحسين موقعك.
00:17:12إذا كنت تستخدم ISR، فهذا هو المخطط الذي رأيناه سابقاً.
00:17:17يتم استقبال الطلب في مكان قريب جداً من العميل.
00:17:20ثم يمر إلى أقرب منطقة لـ Vercel.
00:17:22هناك 20 منطقة حول العالم حيث يتم فحص الطلب مقابل ذاكرة CDN المؤقتة.
00:17:27إذا لم يتوفر المحتوى هناك، يذهب إلى منطقة الوظائف (function region) حيث توجد ذاكرة مؤقتة أخرى
00:17:33لـ ISR، وإذا تطلب الأمر تنفيذ الوظيفة، فهناك أيضاً ذاكرة مؤقتة يمكنك استخدامها لـ
00:17:39طلب البيانات من الأنظمة الخلفية (backends) لحمايتها.
00:17:43هناك أنواع مختلفة من الطلبات التي يمكنك إجراؤها.
00:17:47على سبيل المثال، إذا كنت تجري طلباً لواجهة برمجة تطبيقات وتستخدم ترويسات التحكم في التخزين،
00:17:52كما في الوثائق، فإنه يستخدم أيضاً ذاكرة CDN المؤقتة.
00:17:56ويتخطى ذاكرة ISR المؤقتة لكنه لا يزال يحتفظ بذاكرة الوظائف ووقت التشغيل.
00:18:00وأخيراً، إذا كنت تقوم بإعادة توجيه (rewrite) على CDN الخاص بـ Vercel إلى مصدر خارجي،
00:18:07لنفترض أنك تمرر الطلب لنظام Vercel الخلفي، فستستفيد من ميزات CDN مثل
00:18:14التخزين المؤقت وجدار الحماية، ثم يذهب الطلب إلى المصدر الخارجي.
00:18:18وهذا يقودنا إلى وظيفة مسح ذاكرة التخزين المؤقت (purge cache).
00:18:22لنفترض أنك لسبب ما تريد التحقق من صحة المحتوى من جديد.
00:18:26هنا في هذه الصفحة لدي مثال على استخدام ISR مع جلب بيانات (fetch) بوسم تخزين محدد.
00:18:36يسمى هذا هنا وسم بيانات الجلب (fetch data tag).
00:18:38يمكنكم رؤية أنه تم تجديده منذ حوالي ساعة ويستخدم هذا الوسم.
00:18:45إذا أردت مسح ذلك، لنقل أريد تجديد الصفحة، لدي بضعة خيارات.
00:18:54يمكنني المسح حسب وسم التخزين، لذا سأدخل وسم fetch data.
00:18:58وبعد ذلك يمكنني الاختيار بين إبطال المحتوى (invalidate) أو حذفه (delete).
00:19:04الإبطال يسمح لنا بتقديم صفحة قديمة مؤقتاً بينما يتم تجديد الصفحة في
00:19:09الخلفية، ولهذا ننصح به المستخدمين حتى لا يواجهوا تأخيراً في
00:19:14الطلب التالي.
00:19:16لنفترض أنني فعلت هذا، سأضغط على مسح، نعم أريد المسح.
00:19:21عندما أحدث الصفحة الآن، لم يتغير الوقت، لا يزال يتزايد.
00:19:27لكن إذا حدثت الصفحة مرة أخرى، سترون أن الوقت تمت إعادة ضبطه كأنها
00:19:33جددت للتو.
00:19:34يمكنني أيضاً فعل الشيء نفسه مع خيار حذف المحتوى.
00:19:39إذا حذفت هذا المحتوى وضغطت على مسح، في المرة التالية التي أحدث فيها الصفحة سترون
00:19:45أن الوقت تمت إعادة ضبطه فوراً.
00:19:48هذا لأن الطلب التالي انتظر تجديد الصفحة بالكامل
00:19:53قبل تقديمها للمستخدم.
00:19:55لذا ننصح باستخدام خيار الإبطال (invalidate) عندما تريد تحديث المحتوى لأنه يقدم
00:20:00المحتوى القديم بينما يتم التجديد في الخلفية.
00:20:05يمكنك المسح حسب وسم التخزين، أو حسب صورة المصدر بنفس الطريقة.
00:20:11كما يمكنك مسح كل محتوى الذاكرة المؤقتة بالكامل، وفعل ذلك على المستويين
00:20:16اللذين ناقشناهما سابقاً، إما ذاكرة CDN أو ذاكرة وقت التشغيل والبيانات.
00:20:21وهذا يمسح كل شيء، أي يحذف كل المحتوى لذا الطلب التالي سيتم حجزه
00:20:28حتى يتم تحديث هذا المحتوى.
00:20:30هذا كل ما لدينا بخصوص الميزات الجديدة اليوم، وسنفتح المجال للأسئلة
00:20:39أخبرونا عما تودون معرفته.
00:20:43حسناً، شكراً لكم.
00:20:44مرحباً يا رفاق، لدينا بضعة أسئلة في الدردشة.
00:20:50سأبدأ بالسؤال الأول.
00:20:51بعد نشر تطبيقي على Vercel، كيف أستخدم الـ CDN وكيف يتم احتساب التكلفة؟
00:21:10سؤال ممتاز.
00:21:11كل تطبيق على Vercel يحصل على CDN مجاناً، وهذا يعني أنه عند نشر
00:21:20تطبيقك، نقوم تلقائياً بفحص محتواه وتحسينه لتقديمه عبر
00:21:27شبكة Vercel CDN.
00:21:28إذا كنت تستخدم إطار عمل يدعم ISR، فسنقوم بتعيين ميزة SSG (توليد المواقع الثابتة)
00:21:35وربط المحتوى بذاكرة ISR وذاكرة CDN.
00:21:40لذا، في الغالب لن تحتاج لتهيئة أي شيء للبدء.
00:21:46ومع ذلك، يمكنك فعل ذلك تماماً إذا أردت، فمثلاً إذا كنت تعرف طلباً لواجهة برمجة تطبيقات
00:21:53يمكنك ضبط ترويسات التحكم في التخزين لتخصيص ذلك، أو كما أظهر ياش
00:22:00إذا كنت تقدم محتوىً ثابتاً من مجلد مختلف عن المجلد القياسي، يمكنك ضبط
00:22:07قاعدة تخزين مؤقت لكل ذلك المحتوى.
00:22:11بالنسبة لمستخدمي خطة الهواة (Hobby)، هذا متاح مجاناً، وبالنسبة لمستخدمي خطة المحترفين (Pro)
00:22:21تحصلون على حصة محددة من الطلبات وحجم نقل البيانات، وبعد ذلك هناك رسوم
00:22:26تعتمد على المنطقة ويمكنكم العثور عليها في موقعنا.
00:22:27السؤال الثاني.
00:22:31ماذا لو كان لدي بالفعل CDN أمام تطبيقي؟
00:22:38كيف يمكنني الانتقال إلى Vercel؟
00:22:40سؤال رائع أيضاً.
00:22:44هذا أمر يمكننا دعمه بكل تأكيد.
00:22:47في الغالب، أعتقد أن هناك مرحلتين للقيام بالهجرة.
00:22:54الأولى هي إذا كنت تستخدم CDN بالفعل أمام Vercel، فيمكنك ببساطة تمرير
00:22:58المحتوى ليقوم Vercel بمعالجة التخزين المؤقت والتقديم وأيضاً
00:23:04قواعد التوجيه، وبمجرد أن تنقل كل تلك الإعدادات إلى Vercel
00:23:10كل ما عليك فعله هو تغيير الـ DNS ليوجه الطلبات إلى Vercel مباشرة
00:23:15لتصل الطلبات إلى Vercel تلقائياً.
00:23:18لدينا دليل سنضعه في التعليقات حول كيفية الانتقال إلى Vercel DNS
00:23:23دون أي توقف للموقع.
00:23:25إذا كانت لديكم أسئلة حول الاختلافات في الإعدادات، لدينا عدة أدلة في
00:23:33قاعدة المعرفة الخاصة بنا تساعد في ربط المفاهيم المختلفة من شبكات CDN الأخرى
00:23:37بمفاهيم Vercel، وسنقدم روابط لذلك.
00:23:41ربما أحيل هذا السؤال إلى أندرو.
00:23:49كيف يمكنني تحليل حركة مرور CDN الخاصة بي؟
00:23:52نعم، هناك طريقتان.
00:23:55الطريقة الأولى هي ما عرضته سابقاً.
00:24:00هل تسمعونني؟
00:24:00نعم، حسناً شكراً.
00:24:04الطريقة الأولى التي عرضتها هي عبر تبويب نظرة عامة على CDN الذي يظهر لك لقطة
00:24:11لحركة مرور مشروعك على CDN الخاص بـ Vercel خلال فترة زمنية محددة.
00:24:17مكان آخر يمكنك الذهاب إليه هو صفحة طلبات الحافة (edge request) في قسم المراقبة (observability)
00:24:24ويمكنك تصنيف كل حركة المرور حسب فئات متنوعة.
00:24:34نعم، وصفحة المراقبة في Vercel تحتوي على الكثير من التصنيفات الغنية
00:24:44التي يمكنك استكشافها، لذا لا تترددوا في البحث فيها.
00:24:48سؤال آخر أراه يتكرر كثيراً هو: هل يتعامل الـ CDN مع هجمات DDoS؟
00:24:57وما هي أنواع الأمان المضافة أو المتاحة مع الـ CDN؟
00:25:04سؤال رائع جداً.
00:25:06Vercel يأتي مع حماية غير محدودة وتلقائية للتخفيف من هجمات DDoS.
00:25:12ما يعنيه هذا هو أنها مجانية وتغطي مجموعة واسعة من
00:25:19أنواع الهجمات المختلفة التي يحميك منها Vercel تلقائياً.
00:25:23فلدينا جدار حماية لتطبيقات الويب (WAF) وأيضاً حماية في الطبقات L3 و L4 و L7 لـ
00:25:32مواجهة الهجمات التي تتراوح من مجرد زيادة مفاجئة في عدد الطلبات لمسار معين إلى
00:25:39هجمات أكثر تعقيداً تقوم بتغيير عناوين الـ IP أو معلومات أخرى يمكننا رصدها وحمايتكم
00:25:47منها.
00:25:48لذا نعم، هي متوفرة تلقائياً لجميع المشاريع.
00:25:52ويمكنك أيضاً تحديد قواعد مخصصة إذا أردت.
00:25:57هذا متاح في تبويب جدار الحماية (firewall) في لوحة التحكم، وهي جلسة
00:26:02يجب أن نخصص لها وقتاً قريباً بالتأكيد.
00:26:04وهناك يمكنك تحديد قواعد أكثر دقة لتطبيقك إذا كان هناك شيء
00:26:09معين تود حظره.
00:26:13الأمان موضوع كبير بالتأكيد ويمكننا تخصيص جلسة كاملة له.
00:26:22أحب حقاً كل ما تفعلونه لتقليل العقبات في
00:26:27كل هذه العمليات المختلفة.
00:26:29وبالمناسبة، هناك سؤال غريب نوعاً ما، لقد رأيت على تويتر الكثير من الثناء على
00:26:34رسوم الـ 2D والـ 3D المتحركة في صفحة الـ CDN.
00:26:38هل يمكنك عرض ذلك لنا وربما تقديم بعض التفاصيل؟
00:26:42نعم، يمكنني مشاركة شاشتي مرة أخرى.
00:26:49دعونا نرى، لمن لم يشاهدها بعد.
00:26:52في صفحة نظرة عامة على CDN نعرض خريطة ثنائية الأبعاد، وإذا ضغطت على الكرة الأرضية تحصل
00:27:00على خريطة ثلاثية الأبعاد.
00:27:01إنها تفاعلية للغاية ويمكنك تدويرها في أي اتجاه تريده.
00:27:07يمكنك تمرير الفأرة فوقها والعودة مرة أخرى.
00:27:12وهذا كل شيء.
00:27:18شكراً.
00:27:19أعشق هذه الرسوم وأحب مدى سهولة انتقالك منها إلى جانب المراقبة
00:27:24حيث يمكنني رؤية حركة المرور بصرياً ثم
00:27:29التعمق في التفاصيل.
00:27:30بالضبط.
00:27:32سؤال آخر يتعلق ببعض المشاكل التي رأيت الناس يواجهونها قبل
00:27:43إضافة هذه الميزات، وأيضاً شيء أتساءل عنه لأنني لم
00:27:47أتعمق في أحدث الميزات.
00:27:50كل شيء جديد جداً.
00:27:51ما هي الضمانات المتاحة للمساعدة في منع أو اكتشاف خطأ في الإعدادات أو
00:27:58بشكل عام كشف خدمة داخلية أو بيانات حساسة لا تريد أن
00:28:03يراها الآخرون؟
00:28:04نعم، بالتأكيد.
00:28:07هناك عدة أنواع من الحماية لإخفاء المسارات الداخلية.
00:28:15بشكل افتراضي، تتمتع المشاريع بحماية للنشر تتيح لك استخدام مصادقة Vercel
00:28:23أو كلمات مرور لحماية موقعك من الزوار غير المرغوب فيهم، وهذا يمكنه حماية النشر بالكامل.
00:28:31هناك أيضاً إمكانية استخدام ملفات تعريف الارتباط ومكتبات المصادقة لمسارات محددة
00:28:43للحماية من ذلك.
00:28:46وهناك أيضاً قواعد جدار حماية مخصصة يمكنك استخدامها لحماية مسارات معينة.
00:28:54لذا هناك خيارات عديدة.
00:28:56داخل لوحة التحكم سترى الكثير من بيانات المراقبة للمسارات التي يتم خدمتها.
00:29:04ستجد أيضاً لكل عملية نشر ملخصاً حول جميع المسارات
00:29:10لذا يمكنك فحص معلومات كل من هذه المسارات والوظائف التي تراها.
00:29:15جرب الأمر، وإذا كان لديك أي سؤال سأكون سعيداً بالإجابة بمزيد من التفاصيل.
00:29:22مذهل.
00:29:34حسناً، لنرى سؤالاً آخر رأيته يتكرر، وربما تطرقتم إليه
00:29:41قليلاً ولكن نود المزيد من التفاصيل.
00:29:43هل يمكن استخدام مسارات مستوى المشروع لتوجيه حركة المرور إلى واجهات برمجة تطبيقات خارجية أو خدمات مصغرة؟
00:29:51نعم، بالتأكيد.
00:29:55هناك قالب متاح، ربما ياش هل تود التحدث عن ذلك بما أنك تعمل
00:30:04عليه؟ بالتأكيد، يمكنني ذلك.
00:30:06نعم، يمكنك بالتأكيد إعادة توجيه كل طلبات الـ API الخاصة بك إلى مصادر خارجية.
00:30:11سأشارك المزيد حول هذا في الأسابيع القادمة، لكن يمكنك إعداد قواعد كتابة.
00:30:15يمكنني في الواقع مشاركة شاشتي.
00:30:18إذا قمت بضبط قاعدة إعادة كتابة، يمكنني مثلاً ضبط تحويل من الـ API الخاص بي.
00:30:35إلى أي مصدر خارجي، فمثلاً إذا كان الرابط api-external.com
00:30:44يمكنك فعل شيء كهذا لتمرير الـ API الخاص بك لمصدر خارجي.
00:30:50هذا مدعوم بالتأكيد ويمكنك القيام به عبر الـ CLI
00:31:00أو أي طرق أخرى تفضلها.
00:31:04جميل، هذا يجعل الأمر سهلاً للغاية عند الانتقال تدريجياً، أعرف أننا نستخدم
00:31:10جزءاً من ذلك في موقع المجتمع الخاص بنا لنتمكن من بناء بعض الميزات الإضافية.
00:31:16بحيث لا يكون كل شيء جزءاً من نظام discourse ولكننا لا نريد تركه
00:31:21بالكامل أيضاً، فهو الأساس لموقع المجتمع ولدينا إضافات فوقه،
00:31:25لذا كان ذلك مريحاً جداً لنا.
00:31:27نعم، لقد كان ذلك بمثابة قفزة كبيرة.
00:31:31نعم، أعتقد حقاً أنه من المفيد جداً الاستفادة من طبقة التخزين المؤقت،
00:31:35وجدار الحماية وأيضاً قواعد التوجيه حيث يمكنك تحديد ما تريد بفضل هذه الصيغة
00:31:42السهلة، وفي نفس الوقت التمكن من استخدام أنظمة خلفية مختلفة لديك محتوى عليها.
00:31:48رائع، وأعتقد أن هذه هي كل الأسئلة من الدردشة، لكن أود أن أسأل: ما التالي؟
00:31:56هل يمكنك إخبارنا بأي شيء؟
00:32:00أوه، سؤال رائع.
00:32:02حسناً، هناك العديد من الأمور القادمة، لكنني أعتقد أن أحد الأشياء التي
00:32:09تحدثنا عنها سابقاً ويجب أن نركز عليها أكثر هو الأمان، فترقبوا المزيد من المحتوى حوله قريباً.
00:32:15رائع، شكراً لكم يا رفاق لانضمامكم إلينا، أعلم أنكم مشغولون جداً وسنترككم
00:32:22تعودون لأعمالكم، لكننا نقدر حقاً تخصيصكم الوقت لتكونوا هنا.
00:32:25شكراً جزيلاً لاستضافتنا.
00:32:28نعم، شكراً جزيلاً لكم.
00:32:30شكراً للجميع.
00:32:30حسناً، كان ذلك رائعاً، ما الذي ينتظرنا لاحقاً يا مايا؟
00:32:37لدينا جلسة "اسألني عن أي شيء" في البيئة التجريبية (sandbox) يوم الخميس.
00:32:45لذا ابقوا مترقبين لذلك.
00:32:47لدينا أيضاً، وأريد الترويج لهذا، بعض الفعاليات المثيرة في
00:32:54نهاية الأسبوع لفعاليات Zero to Agent Vercel. ولدينا أيضاً فعالية Ship القادمة في يونيو، وإذا لم
00:33:03تشاهدوها بعد، اذهبوا إلى [vercel.com/ship](https://vercel.com/ship) حيث يمكنكم صنع حقيبتكم الصغيرة الخاصة.
00:33:09لقد أبدع فريق التصميم حقاً في هذه الصفحة، لذا اذهبوا لتفقدها وتأكدوا من حفظ الموعد
00:33:15لهذه الفعاليات حول العالم، ونعم، لدينا المزيد من جلسات المجتمع القادمة،
00:33:21يمكنكم رؤيتها جميعاً على [community.vercel.com/events](https://www.google.com/search?q=https://community.vercel.com/events).
00:33:26شكراً للجميع، كان وقتاً رائعاً.
00:33:28وداعاً!