التمرين - البدء

  • 7 دقائق

في هذا التمرين، ستُنشئ مثيل تطبيقات الويب الثابتة في Azure بما في ذلك إجراء GitHub الذي ينشئ تطبيقك وينشره تلقائياً.

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

إنشاء المستودع

دعنا ننشئ المستودع باستخدام قالب GitHub. حددت Azure سلسلة من قوالب مستودع GitHub، يحتوي كل منها على تطبيق بداية ومجموعة من أطر عمل الواجهة الأمامية لتطبيق البداية.

  1. انتقل إلى GitHub create from template page لفتح مستودع القوالب.

    ملاحظة

    إذا حدث 404 Page Not Found خطأ، قم بتسجيل الدخول إلى GitHub أولا ثم حاول مرة أخرى.

  2. إذا طُلب منك Owner، فاختر أحد حسابات GitHub الخاصة بك.

  3. للحصول على repository name، أدخل my-static-web-app-and-api.

  4. حدد «Create repository from template». يبني GitHub مستودعك.

تشغيل تطبيقك محلياً

لقد أنشأت للتو مستودع GitHub الخاص بك باسم my-static-web-app-and-api في حسابك على GitHub. بعد ذلك، ستقوم باستنساخ مستودع GitHub وتشغيل التعليمات البرمجية محليا على جهاز الكمبيوتر الخاص بك.

  1. افتح نافذة طرفية على الكمبيوتر (في مربع البحث في Windows مربع النظام، أدخل cmd.

  2. ابدأ بنسخ مستودع GitHub على جهاز الكمبيوتر الخاص بك. الصق التعليمة البرمجية التالية في Command Prompt النافذة، واستبدله <YOUR_GITHUB_USERNAME> باسم المستخدم GitHub.

    git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-and-api

    ملاحظة

    إذا واجهتك مشكلة في النسخ إلى Command Prompt جلسة عمل المحطة الطرفية، انقر بزر الماوس الأيمن فوق الرمز في شريط العنوان، وفي علامة التبويب Properties تأكد من تحديد Use Ctrl+Shift+C/V as Copy/Paste.

  3. انتقل إلى الدليل للحصول على التعليمات البرمجية المصدر التي قمت بنسخها.

    cd my-static-web-app-and-api

  4. بعد ذلك، انتقل إلى الدليل لإطار العمل الأمامي المفضل لديك. يجب تشغيل كل نهاية أمامية في

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  5. تثبيت تبعيات التطبيق وتحديثها إلى الأحدث بإدخال الأوامر التالية

    npm install
npm audit fix

  6. وأخيراً، شغّل تطبيق عميل الواجهة الأمامية.

    npm start

    npm start

    npm run dev

    npm run serve

استعرض تطبيقك

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

  1. المضيف المحلي لـ angular هو http://localhost:4200.

    local host for your Angular web app.

  1. المضيف المحلي للرد هو http://localhost:3000.

    local host for your React web app.

  1. المضيف المحلي لـ Svelte هو http://localhost:5000.

    local host for your Svelte web app.

  1. المضيف المحلي لـ vue هو http://localhost:8080.

    Browsing to your Vue web app.

  • يجب أن يقول التطبيق الخاص بك ⁧⁩جارٍ تحميل البيانات ...⁧⁩ لأنه لا توجد بيانات أو واجهة برمجة التطبيقات حتى الآن. ستضيف واجهة برمجة التطبيقات إلى تطبيق الويب في وقت لاحق في هذه الوحدة.
  1. في جلسة العمل الطرفية، اضغط Ctrl+C لإيقاف وظيفة الدفعة. اضغط على y+enter للتأكيد.

تهانينا! بنيت التطبيق الخاص بك ورأيت تشغيله محليًا في المتصفح الخاص بك. الآن، دعنا ننشر التطبيق الخاص بك إلى خدمة Azure Static Web Apps.

إنشاء تطبيق ويب ثابت

الآن بعد أن قمت بإنشاء مستودع GitHub الخاص بك، يمكنك إنشاء مثيل تطبيق ويب ثابت باستخدام ملحق تطبيقات الويب الثابتة Azure لـ Visual Studio Code.

تثبيت ملحق Azure Static Web Apps لـ Visual Studio Code

  1. في قائمة Visual Studio Code، حدد Extensions وأدخل Azure Static Web Apps.

  2. عند تحميل علامة تبويب الملحق في Visual Studio Code، حدد "Install".

  3. بعد اكتمال التثبيت، في قائمة التعليمات البرمجية Visual Studio، حدد Settings (الترس)، ثم حدد Restart to Update.

    Screenshot of Visual Studio Code menu showing restart to update.

تسجيل الدخول إلى Azure في Visual Studio Code

  1. في Visual Studio Code، قم بتسجيل الدخول إلى Azure عن طريق تحديد View>Command Palette (Ctrl+Shift+P) وإدخال Azure: Sign In.

    Screenshot of Command Palette in VS Code menu.

    هام

    قم بتسجيل الدخول إلى Azure باستخدام نفس الحساب الذي استخدمته لتنشيط رمل بحيث يمكنك الوصول إلى Concierge Subscription.

  2. إذا طلب منك ذلك، قم بنسخ ولصق التعليمات البرمجية المتوفرة في مستعرض ويب للمصادقة على جلسة عمل Visual Studio Code.

اختر اشتراكك

  1. في Visual Studio Code، حدد فتح المجلد وحدد مجلد المستودع الخاص بي الثابت على my-static-web-app-and-api الذي قمت بنسخه إلى الكمبيوتر، ثم حدد Open.

  2. افتح لوحة الأوامر (Ctrl + Shift + P)، وأدخل، Azure: Select Subscriptions والغي كافة التحديدات باستثناء Concierge Subscription.

    Screenshot showing concierge subscription is selected.

إنشاء تطبيق ويب ثابت باستخدام Visual Studio Code

  1. في جزء Visual Studio Code EXPLORER، حدد MY-STATIC-WEB-APP-AND-API.

  2. في القائمة Visual Studio Code، حدد Azure (Ctrl+Shift+A) لفتح ملحقات Azure. يجب أن تشاهد أربع لوحات تظهر اشتراك Concierge و Local Project الخاص بك.

    Screenshot showing Azure Logo and static web apps extensions.

    ملاحظة

    يجب تسجيل الدخول إلى Azure وGitHub. إذا لم تكن قد سجلت الدخول بالفعل إلى Azure وGitHub من Visual Studio Code، فسيطالبك الملحق بتسجيل الدخول إلى كليهما في أثناء عملية الإنشاء.

  3. ضع الفأرة فوق عنوان لوحة Static Web Apps وحدد + (plus sign) لإنشاء Static Web App.

    Add button on the static web app menu.

  4. يقوم Visual Studio Code بالتحقق من تسجيل الدخول الخاص بك ويطالبك بإلتزام التغييرات التي أجريتها في repo المحلي الخاص بك. حدد Commit، ثم اضغط على Enter.

    Screenshot of dialog box prompting you to commit changes. Concierge subscription filter shows in the background.

  5. Create Static Web App (1/5) يطالبك بإدخال اسم لتطبيق الويب الثابت الجديد، الذي يتم ملؤه مسبقا بتطبيق my-static-web-app-and-api. تحقق من الاسم، ثم اضغط على Enter للتأكيد.

    Screenshot of Create Static Web App 1 of 5.

  6. Create Static Web App (2/5) يطالبك بتحديد منطقة. حدد West US 2، ثم اضغط على Enter.

    Screenshot Create Static Web App 2 of 5.

  7. Create Static Web App (3/5) يطالبك بتحديد إعداد مسبق للبناء لتكوين بنية المشروع الافتراضية. حدد الخيار Custom ثم اضغط على Enter.

    Screenshot Create Static Web App 3 of 5.

  1. Create Static Web App (4/5) يطالبك بإدخال موقع رمز التطبيق الخاص بك. أدخل angular-app كمسار نسبي لرمز التطبيق، ثم اضغط على Enter.

    Angular application code location.

  2. Create Static Web App (5/5) يطالبك بإدخال موقع إخراج البناء الخاص بك. أدخل dist/angular-app كموقع إخراج البناء للتطبيق، ثم اضغط على Enter.

    Angular app build output path.

  1. Create Static Web App (4/5) يطالبك بإدخال موقع رمز التطبيق الخاص بك. أدخل React-app كمسار نسبي لرمز التطبيق، ثم اضغط على Enter.

    React application code location.

  2. Create Static Web App (5/5) يطالبك بإدخال موقع إخراج البناء الخاص بك. أدخل build كموقع إخراج البنية للتطبيق، ثم اضغط على Enter.

    React app build output path.

  1. Create Static Web App (4/5) يطالبك بإدخال موقع رمز التطبيق الخاص بك. أدخلsvelte-app كموقع للتعليمة البرمجية للتطبيق ثم اضغط على Enter.

    Svelte application code location..

  2. Create Static Web App (5/5) يطالبك بإدخال موقع إخراج البناء الخاص بك. أدخل build كموقع إخراج البنية للتطبيق، ثم اضغط على Enter.

    Svelte app build output path..

  1. Create Static Web App (4/5) يطالبك بإدخال موقع رمز التطبيق الخاص بك. أدخل vue-app كموقع للتعليمة البرمجية للتطبيق ثم اضغط على "Enter".

    Vue application code location..

  2. Create Static Web App (5/5) يطالبك بإدخال موقع إخراج البناء الخاص بك. أدخل dist كموقع إخراج البنية لتطبيقك، ثم اضغط على Enter.

    Vue app build output path..

ملاحظة

يختلف مستودعك لهذا التطبيق عن عمليات إعادة الشراء التي استخدمتها في الماضي. يحتوي هذا المستودع على أربعة تطبيقات مختلفة في أربعة مجلدات مختلفة. يحتوي كل مجلد على تطبيق أُنشئ في إطار عمل JavaScript مختلف. عادة، سيكون لديك تطبيق واحد فقط في جذر المستودع الخاص بك وبالتالي الافتراضي / لموقع مسار التطبيق. هذا مثال رائع على سبب إتاحة Azure Static Web Apps لك تكوين المواقع في المقام الأول - يمكنك التحكم في كيفية إنشاء التطبيق بصورة كاملة.

  1. بمجرد إنشاء التطبيق، يظهر إشعار تأكيد في Visual Studio Code.

Open Actions in GitHub or View/Edit Config..

أثناء تكوين البنية، يبلغك Visual Studio Code بحالة البناء.

Waiting for Deployment..

  1. يمكنك عرض تقدم عملية التوزيع باستخدام GitHub Actions عن طريق توسيع قائمة Actions.

    GitHub Actions..

    بمجرد اكتمال عملية التوزيع، يمكنك الانتقال مباشرة إلى موقع الويب الخاص بك.

  2. لعرض موقع ويب في المتصفح، انقر بزر الماوس الأيمن فوق المشروع في ملحق Static Web Apps، وحدد Browse Site.

    Browse Site..

يجب أن يقول التطبيق الخاص بك ⁧⁩جارٍ تحميل البيانات ...⁧⁩ لأنه لا توجد بيانات أو واجهة برمجة التطبيقات حتى الآن. ستضيف API إلى تطبيق الويب الخاص بك في وقت لاحق في هذه الوحدة.

تهانينا! لقد وزعت تطبيقك الأول في Azure Static Web Apps!

ملاحظة

لا تقلق إذا ظهرت صفحة ويب تقول بأن التطبيق لم يُنشأ وينشر بعد. حاول تحديث المستعرض خلال دقيقة. تعمل خدمة GitHub Action تلقائياً عند إنشاء تطبيقات الويب الثابتة من Azure. لذلك إذا رأيت صفحة البداية، فلا يزال التطبيق قيد النشر.

سحب التغييرات من GitHub

اسحب أحدث التغييرات من GitHub لإنزال ملف سير العمل الذي أُنشئ عن طريق Azure Static Web Apps service.

  1. افتح Command Palette بالضغط على Ctrl+Shift+P.

  2. أدخل Git: Pull وحدده.

  3. اضغط على إدخال.

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

بعد ذلك ستتعلم كيفية إنشاء واجهة برمجة التطبيقات الخاصة بك وتشغيلها باستخدام مشروع Azure Functions.