تصحيح محلي دون ألم: تحقيق HTTPS واسم مضيف مخصص باستخدام Cloudflare Tunnel

في تطويرنا اليومي، نستخدم غالبًا http://localhost للوصول إلى تطبيقاتنا وتصحيحها، وهو كافٍ في معظم الحالات. ومع ذلك، في مواقف مثل الآتي، قد نحتاج إلى استخدام HTTPS واسم مضيف مخصص لتصحيح تطبيقاتنا:

• عندما يستخدم تطبيقك واجهة برمجة تطبيقات تتطلب HTTPS (مثل Web Crypto API أو مكتبات طرف ثالث أخرى تتطلب HTTPS)
• عندما تتطلب خدمة طرف ثالث التي تريد دمجها منك أن توفر واجهة برمجة تطبيقات قائمة على HTTPS يمكن الوصول إليها عالميًا، وتحتاج إلى تصحيح هذه الواجهة

هناك العديد من الحلول لهذه المشاكل في السوق، ولكن معظمها معقدة وقابلة للأخطاء. هنا، أود أن أقدم كيفية استخدام Cloudflare Tunnel لاستخدام HTTPS واسم مضيف مخصص بسرعة لتطوير محلي.

ما هو Cloudflare Tunnel#

Cloudflare Tunnel هي خدمة مقدمة من Cloudflare تسمح لك بالاتصال بأمان بنيتك التحتية بشبكة Cloudflare. إنها في الأساس تخلق اتصالًا آمنًا وفعالًا بين خوادمك وشبكة Cloudflare العالمية، مما يضمن أن حركة المرور على الويب لديك محمية ومحسنة.

باستخدام Cloudflare Tunnel، يمكنك بسهولة توصيل جهاز التطوير المحلي لديك بشبكة Cloudflare العالمية. بعد ذلك، يمكنك استضافة نطاقك على Cloudflare وتحويل الطلبات الخاصة بالنطاق إلى جهازك المحلي عبر Cloudflare Tunnel.

المتطلبات المسبقة#

قبل أن تبدأ، تأكد من أنك:

• تمتلك بالفعل اسم نطاق وعطلت DNSSEC في مسجل النطاق (حيث اشتريت اسم النطاق).
• قمت سابقًا بإنشاء حساب Cloudflare.

ملاحظة: في هذا الدليل، لأغراض العرض التوضيحي، نفترض أننا نستخدم demo.com كنطاق لنا.

إضافة موقع ويب إلى Cloudflare#

أولاً، تحتاج إلى تسجيل الدخول إلى لوحة تحكم Cloudflare باستخدام حسابك في Cloudflare واختيار خيار "Website" من القائمة اليسرى. ثم، انقر على زر "Get started" في الصفحة (إذا كان هناك سجل بالفعل، انقر على "Add website"). اتبع التعليمات لإكمال إضافة الموقع باستخدام النطاق الذي تمتلكه. بعد إضافة الموقع بنجاح، سترى المحتوى التالي:

كما هو موضح في الشكل، لم يتم تفعيل الموقع المضاف بعد. تحتاج إلى اتباع الدليل على الصفحة لتسجيل الدخول إلى مسجل النطاق الخاص بك وتحديث أسماء الخوادم للنطاق لتفعيل موقعك.

أخذ النطاق على Godaddy كمثال:

ادخل إلى صفحة إعدادات النطاق، ادخل إلى خيار "Nameservers" تحت علامة تبويب DNS، وقم بتغيير أسماء الخوادم إلى القيم المعروضة في الدليل:

بعد التغيير، انتظر لفترة قصيرة من الوقت، وسيتم تفعيل الموقع المقابل على Cloudflare:

بعد أن تكون قد قمت بتكوين هذه المحتويات، سيتم استضافة اسم النطاق الخاص بك على Cloudflare، وستقوم Cloudflare بتمكين HTTPS تلقائيًا للنطاق.

إنشاء نفق#

ارجع إلى الصفحة الرئيسية للوحة تحكم Cloudflare، انقر على "Zero Trust" في القائمة اليسرى، وحدد "Tunnels" تحت دليل 'Access'. ثم، انقر على "Add a tunnel" على الصفحة، وادخل اسم نفق أي (مثلاً، my-dev-tunnel). وفقًا للتعليمات على الصفحة، قم بتوصيل جهاز التطوير المحلي لديك بالنفق على Cloudflare.

أخذ MacOS كمثال، افتح نافذة الأوامر ونفذ الأمر المعروض على الصفحة:

إذا كان جهازك قد قام بتثبيت "cloudflared" مسبقًا، فلست بحاجة إلى تنفيذ brew install cloudflare/cloudflare/cloudflared.

بعد ذلك، نفذ cloudflared tunnel list في نافذة الأوامر الخاصة بك، وسترى أن جهازك متصل بالفعل بالنفق:

توجيه حركة المرور إلى النفق المُنشأ#

بعد إنشاء النفق، سنقوم بتكوين قواعد التوجيه للنفق.

نفترض أن تطبيقنا المحلي يعمل على المنفذ http://localhost:3000، ونريد تحويل جميع الطلبات ل https://dev.demo.com إلى المنفذ الذي يعمل عليه التطبيق المحلي.

أولاً، نعود إلى صفحة النفق لدينا، نجد النفق الذي أنشأناه للتو، نضغط على زر النقاط الثلاث على اليمين، ونحدد "Config".

املأ التكوينات ذات الصلة وفقًا لمتطلباتنا:

هذا التكوين يُوجه العنوان dev.demo.com إلى http://localhost:3000 على جهازنا. ثم انقر "Save hostname".

بعد انتظار قصير، قم بالوصول إلى https://dev.demo.com، وسترى التطبيق الذي يعمل على جهازنا المحلي:

ملخص#

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