كيفية عرض تطبيق Django التجريبي على الإنترنت باستخدام Ngrok؟

نشرت: 2021-05-02

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

تكوين بيئة نشر مرحلية فقط لإظهار عرض توضيحي لتطبيق Django أمر مروع. أكثر من ذلك ، إذا كنت تحتاج فقط إلى عنوان URL لبضع دقائق ، لإظهاره للعميل أو زميله في الفريق.

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

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

قبل البدء في تشغيل جميع التعليمات البرمجية في هذا البرنامج التعليمي ، ستكون متاحة في مستودع Github هذا.

متطلبات مبدئية

  • Python 3.6+ مثبت في نظامك
  • خبرة قليلة في واجهات سطر الأوامر
  • المعرفة الأساسية لـ Django
  • فهم سكربتات Django-admin و management.py

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

إنشاء تطبيق Django

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

بيئة افتراضية

بادئ ذي بدء ، لنقم بإنشاء بيئة افتراضية Python.

  • لذا افتح محطة النظام (أو shell).
  • إذا وجدت أنه من الصعب جدًا فتح محطة النظام ، فحاول استخدام المحطة المضمنة لمحرر التعليمات البرمجية.

  • انقر فوق Terminal> محطة جديدة ، وستظهر قذيفة في الجزء السفلي من الشاشة.
  • اكتب الأمر التالي لإنشاء بيئة افتراضية ، باستخدام أداة Python المدمجة.
 python -m venv .venv

إنها تعني في الأساس:

مرحبًا Python ، أنشئ أمر بيئة افتراضية (-m venv) باسم .venv

  • الآن إذا قمت بإدراج ملفات دليلك الحالي ، فسترى مجلد .venv .
 $ ls -l drwxr-xr-x - daniel 30 abr 23:12 .venv # Other files ...
  • لتنشيط البيئة الافتراضية ، نسمي الأمر source .
 source .venv/bin/activate
  • إذا وجدت أي مشكلة ، فيرجى الرجوع إلى الجدول التالي المستخرج من وثائق Python الرسمية.
برنامج الصدف أمر لتنشيط البيئة الافتراضية
بوسيكس باش / zsh المصدر $ <venv> / bin / تفعيل
السمكة المصدر $ <venv> /bin/activate.fish
csh / tcsh المصدر $ <venv> /bin/activate.csh
بوويرشيل كور $ <venv> /bin/Activate.ps1
شبابيك cmd.exe C: \> <venv> \ Scripts \ active.bat
بوويرشيل ملاحظة C: \> <venv> \ Scripts \ Activate.ps1

الآن إذا قمت بتشغيل الأمر الصحيح ، يجب أن يكون للقشرة الخاصة بك اسم البيئة الافتراضية فيها.

 $ source .venv/bin/activate.fish (.venv) $

قم بتثبيت Django

بعد تنشيط بيئتك الافتراضية ، يمكنك الآن تثبيت أي إصدار تريده من Django. في هذه الحالة ، يعد تثبيت الإصدار الأحدث اختيارًا جيدًا.

 $ pip install django Collecting django Using cached Django-3.2-py3-none-any.whl (7.9 MB) Collecting pytz Using cached pytz-2021.1-py2.py3-none-any.whl (510 kB) Collecting asgiref<4,>=3.3.2 Using cached asgiref-3.3.4-py3-none-any.whl (22 kB) Collecting sqlparse>=0.2.2 Using cached sqlparse-0.4.1-py3-none-any.whl (42 kB) Installing collected packages: pytz, asgiref, sqlparse, django Successfully installed asgiref-3.3.4 django-3.2 pytz-2021.1 sqlparse-0.4.1

حان الوقت الآن لإنشاء الهيكل الأساسي للمشروع لتطبيق Django الذي تريد كشفه.

 $ django-admin startproject mytestingproject

سيؤدي هذا إلى إنشاء مشروع Django باسم mytestingproject . بعد إنشائه ، نريد أن تدخل الدليل حيث يوجد هيكل المشروع. لذلك دعونا ندخله ونقوم بتشغيل خادم Django.

 # Enter to the project directory (.venv)$ cd mytestingproject/ # Listing the files inside the project (.venv) $ ls mytestingproject manage.py

الآن بعد أن أصبحت مشتركًا ، دعنا نشغل خادم Django لنرى كيف يبدو.

 (.venv) $python manage.py runserver Watching for file changes with StatReloader Performing system checks... System check identified no issues (0 silenced). You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions. Run 'python manage.py migrate' to apply them. May 01, 2021 - 04:34:25 Django version 3.2, using settings 'mytestingproject.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.

في الأساس ، يخبرنا Django أن خادمًا محليًا يعمل على مضيفنا المحلي (يشير 127.0.0.1 دائمًا إليه) ، على المنفذ الافتراضي ، 8000.

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

 http://localhost:8000/ # Do you note that localhost and 127.0.0.1 are the same?

إذا كان كل شيء يعمل بشكل جيد ، يجب أن ترى قالب Django الجميل.

هذا كل شيء عن تركيبنا Django.

لنبدأ الآن في الكشف عن مشروع Django. إذا كنت تعمل في مشروع أكثر تعقيدًا ، فستعمل الطرق التالية لكشف تطبيقات Django أيضًا.

تعريض تطبيق Django مع Ngrok

كما قلت من قبل Ngrok هي إحدى الأدوات التي ستتيح لنا الوصول إلى خادمنا المحلي على الإنترنت. لذلك أولاً وقبل كل شيء قم بتنزيل Ngrok من الموقع الرسمي.

بمجرد تثبيته ، دعنا نتابع الأوامر المطلوبة.

افتح صدفة أخرى ، واحتفظ بالمحطة التي يعمل بها خادم Django حاليًا ، واكتب.

 $ ngrok help NAME: ngrok - tunnel local ports to public URLs and inspect traffic More commands ....

سيعطيك هذا نظرة سريعة على الأوامر المتاحة التي يقدمها Ngrok ، وسيمنحك أيضًا أن عملية التثبيت تمت بشكل صحيح.

من أجل إنشاء عنوان URL حيث يمكن للأشخاص الوصول إلى خادمنا ، فلنعمل.

 $ ngrok http 8000
 # secure public URL for port 8000 web server

نقوم بتشغيل وسيطة http ، لإنشاء عنوان URL الذي سيتصل بالمنفذ 8000 من مضيفنا المحلي.

هذه هي النتيجة التي من المحتمل أن تحصل عليها.

 ngrok by @inconshreveable (Ctrl+C to quit) Session Status online Session Expires 1 hour, 59 minutes Update update available (version 2.3.39, Ctrl-U to update) Version 2.3.35 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://cac2165aa7f8.ngrok.io -> http://localhost:8000 Forwarding https://cac2165aa7f8.ngrok.io -> http://localhost:8000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00

كما تقول Ngrok وتوجيه أن URL غريبة وقبيحة، لدينا localhost . لكن السحر يحدث ، عندما تضغط على المتصفح بعنوان URL الذي قدمه لك نجروك.

صفحة الخطأ.

تغيير الإعدادات

واو ، ماذا حدث للتو؟

يبدو أن Django يخطئ بسبب إعداد DisallowedHost . إذا قمت بفحص الصدفة التي تقوم بتشغيل خادم Django فيها ، وتلك التي تحتوي على جلسة Ngrok ، فستتلقى بعض رسائل التصحيح.

 # Django messages Invalid HTTP_HOST header: 'cac2165aa7f8.ngrok.io'. You may need to add 'cac2165aa7f8.ngrok.io' to ALLOWED_HOSTS. Bad Request: / [01/May/2021 05:07:46] "GET / HTTP/1.1" 400 65196 Invalid HTTP_HOST header: 'cac2165aa7f8.ngrok.io'. You may need to add 'cac2165aa7f8.ngrok.io' to ALLOWED_HOSTS. # Ngrok messages HTTP Requests ------------- GET /favicon.ico 400 Bad Request GET / 400 Bad Request

كما يخبرنا Django ، يجب أن نضيف المجال الذي نربطه بمتغير التكوين ALLOWED_HOSTS. لكن لدينا مشكلة ، وهي أن اسم المجال كبير جدًا ومربك.

لذلك دعونا نغير إعدادات Django قليلاً لحل هذا الخطأ. افتح ملف settings.py الموجود في مجلد المشروع.

 # mytestingproject/settings.py # Line 28 # Change from ALLOWED_HOSTS = [] # To ALLOWED_HOSTS = ["*"]

إذا كنت تعرف بعضًا من regex ، فيمكنك تقدير أننا نضع حرف بدل ، حيث سيتم السماح لجميع المضيفين.

الآن أعد تحميل الموقع ، وشاهد النتيجة.

صفحة العمل

كل شيء يعمل بشكل مثالي الآن! وإذا بدأت في إنشاء تطبيقات للمشروع وتعيين عناوين URL وطرق العرض ، فسينعكس كل ذلك على عنوان URL العام هذا.

ملاحظة: لا تنس تغيير ALLOWED_HOSTS في الإنتاج ، حيث سيؤدي ذلك إلى ثغرة أمنية ضخمة.

الاستنتاجات

في هذا البرنامج التعليمي ، تعلمت كيفية إنشاء عنوان URL تجريبي لمشروع Django الخاص بك ، دون الحاجة إلى نشره.

لقد تدربت على كيفية بدء مشروع Django والعمل مع ملف settings.py في Django.

أخيرًا ، تعلمت كيفية استخدام Ngrok ، وكيفية كشف أي خادم محلي به.

بعد ذلك ، استكشف بعض أطر عمل Python الشهيرة لبناء API.