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

  • 7 دقائق

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

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

تلميح

إذا واجهت مشكلات في تبعيات العقدة، فتأكد من تثبيت Node Version Manager ويمكنك التبديل إلى إصدار سابق.

إنشاء مستودع

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

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

    • إذا كان لديك خطأ 404 بأن الصفحة غير موجودة، فسجل الدخول إلى GitHub وحاول مرة أخرى.

  2. إذا تمت مطالبتك بدخول المالك «Owner»، فاختر أحد حسابات GitHub لديك.

  3. امنح مستودعك الاسم my-static-web-app-authn.

  4. حدد «Create repository from template».

انسخ تطبيقك محليًا

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

  1. افتح وحدة طرفية على جهاز الكمبيوتر الخاص بك.

  2. ابدأ بنسخ مستودع GitHub على جهاز الكمبيوتر الخاص بك.

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

  3. انتقل إلى مجلد التعليمات البرمجية المصدر.

    cd my-static-web-app-authn

تكوين CORS محليًا

لن يكون لديك ما يدعو للقلق حول مشاركة الموارد عبر المنشأ (CORS) عند نشرها إلى Azure Static Web Apps. تعمل Azure Static Web Apps تلقائيًا على تكوين تطبيقك حتى يتمكن من الاتصال بواجهة برمجة التطبيقات الخاصة بك على Azure باستخدام وكيل عكسي. ولكن عند التشغيل محلياً، تحتاج إلى تكوين CORS للسماح لتطبيق الويب وواجهة برمجة التطبيقات الخاصة بك بالاتصال.

الآن أعط تعليماتك إلى Azure Functions بالسماح لتطبيق الويب الخاص بك بتقديم طلبات HTTP إلى واجهة برمجة التطبيقات، على الكمبيوتر الخاص بك.

  1. أنشئ ملفاً باسم api/local.settings.json.

  2. أضف للملف المحتويات التالية:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

إشعار

يُدرج ملف local.settings.json في ملف .gitignore مما يمنع دفع هذا الملف إلى GitHub. هذا لأنه يمكنك تخزين الأسرار في هذا الملف إن كنت لا تريد ذلك في GitHub. هذا هو السبب في إنشاء الملف عندما أنشأت مستودعك من القالب.

تشغيل واجهة برمجة التطبيقات

يحتوي المجلد apiعلى مشروع Azure Functions بنقاط نهاية HTTP لتطبيق الويب. ابدأ بتشغيل واجهة برمجة التطبيقات محليًا باتباع الخطوات التالية:

إشعار

يرجى التأكد من تثبيت أدوات Azure Functions الأساسية التي ستسمح لك بتشغيل دالات Azure محلياً.

  1. في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.

  2. اكتب "Terminal: Create New Integrated Terminal" وحددها.

  3. انتقل إلى مجلد api:

    cd api

  4. شغّل تطبيق Azure Functions محليًا:

    func start

شغّل تطبيق الويب

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

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  2. الآن ثبّت تبعيات التطبيق.

    npm install

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

    npm start

    npm start

    npm run dev

    npm run serve

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

حان الوقت لتشاهد تطبيقك وهو يعمل محلياً. يعمل كل تطبيق واجهة أمامية على منفذ مختلف.

  1. حدد الارتباط الذي تريد استعراضه للوصول إلى تطبيقك.

  1. استعرض إلى http://localhost:4200.

    Screenshot showing the UI of your Angular web app.

  1. استعرض إلى http://localhost:3000.

    Screenshot showing the UI of your React web app.

  1. استعرض إلى http://localhost:5000.

    Screenshot showing the UI of your Svelte web app.

  1. استعرض إلى http://localhost:8080.

    Screenshot showing the UI of your Vue web app.

يجب أن يعرض تطبيقك قائمة بالمنتجات.

  1. الآن، أوقف تشغيل التطبيق عن طريق الضغط على Ctrl-C في المحطة الطرفية.

أنشأت تطبيقك وهو الآن يعمل محلياً في مستعرضك.

بعد ذلك، ستنشر تطبيقك في Azure Static Web Apps.

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

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

تثبيت ملحق Azure Static Web Apps من أجل تعليمة Visual Studio البرمجية

  1. انتقل إلى «Visual Studio Marketplace»، ثم قم بتثبيت الملحق Azure Static Web Apps لـ Visual Studio Code.

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

  3. بعد اكتمال التثبيت، حدد Reload.

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

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

    هام

    سجّل الدخول إلى Azure باستخدام الحساب نفسه المستخدم في إنشاء بيئة الاختبار المعزولة. توفر بيئة الاختبار المعزولة الوصول إلى اشتراك Concierge.

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

حدد اشتراكك

  1. افتح Visual Studio Code وحدد الملف > فتح لفتح المستودع الذي نسخته في الكمبيوتر في المحرر.

  2. تحقق من أنك قمت بتصفية اشتراكات Azure لتضمين اشتراك Concierge عن طريق فتح لوحة الأوامر F1، وإدخال Azure: Select Subscriptions، والضغط على Enter.

  3. حدد Concierge Subscription واضغط على Enter.

    Screenshot showing how to filter by subscription.

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

  1. افتح Visual Studio Code وحدد الملف > فتح لفتح المستودع الذي نسخته في الكمبيوتر في المحرر.

  2. داخل Visual Studio Code، حدد شعار Azure في شريط النشاط لفتح نافذة ملحقات Azure.

    Screenshot of the Azure Logo in VS Code.

    إشعار

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

  3. ضع مؤشر الماوس الخاص بك فوق شريط Static Web Apps وحدد + (علامة زائد).

    Screenshot showing the application name typed out.

  4. عند فتح لوحة الأوامر في أعلى المحرر، حدد Concierge Subscription واضغط على Enter.

    Screenshot showing how to select a subscription.

  5. أدخِل my-static-web-app-and-authn، واضغط على Enter.

    Screenshot showing how to create Static Web Apps.

  6. حدد المنطقة الأقرب إليك، واضغط على مفتاح الإدخال Enter.

    Screenshot showing location selection.

  7. حدد خيار إطار العمل المقابل، واضغط على مفتاح الإدخال Enter.

  1. حدد «angular-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.

    Screenshot showing the Angular application code location.

  2. أدخل dist/angular-app كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.

    Screenshot showing the Angular app files path.

  1. حدد «react-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.

    Screenshot showing the React application code location.

  2. أدخل «build» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.

    Screenshot showing the React app files path.

  1. حدد «svelte-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.

    Screenshot showing the Svelte application code location.

  2. أدخل «public» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.

    Screenshot showing the Svelte app files path.

  1. حدد «vue-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.

    Screenshot showing the Vue application code location.

  2. أدخل «dist» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.

    Screenshot showing the Vue app files path.

إشعار

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

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

    Screenshot showing the Open Actions in GitHub or View/Edit Config pop-up window.

بالرغم من أن التوزيع قيد التقدم، يقوم ملحق Visual Studio Code بإبلاغك بحالة الإصدار.

:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::

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

    Screenshot showing the GitHub Actions menu in VS Code.

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

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

    Screenshot showing the browse site button.

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

إشعار

لا تقلق إذا ظهرت صفحة ويب تقول بأن التطبيق لم يُنشأ وينشر بعد. تحديث المتصفح في دقيقة واحدة. يعمل إجراء GitHub تلقائيًا عند إنشاء Azure Static Web Apps. إذا كنت ترى صفحة البداية، لا يزال التطبيق قيد النشر.

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

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

  1. افتح لوحة الأوامر بالضغط على F1.

  2. أدخل Git:Pull ثم حددها، ثم اضغط Enter.

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

فيما يلي، ستتعلم كيفية دمج مصادقة المستخدم في تطبيقك.