التمرين - إنشاء تطبيق Static Web App من Azure

  • 5 دقائق

في هذا التمرين، ستقوم بإنشاء مثيل Azure Static Web Apps بما في ذلك GitHub Action التي ستقوم تلقائيًا بإنشاء التطبيق الخاص بك ونشره.

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

الآن بعد إنشاء مستودع GitHub الخاص بك، يمكنك إنشاء مثيل Static Web Apps من مدخل Microsoft Azure.

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

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

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

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

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

  3. بعد اكتمال التثبيت، حدد إعادة التشغيل للتحديث إذا تمت مطالبتك.

تسجيل الدخول إلى 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 عن طريق فتح لوحة الأوامر وإدخال Azure: Select Subscriptions، واضغط على Enter.

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

    Screenshot of VS Code showing how to filter by subscription.

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

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

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

    Screenshot of the Azure Logo in VS Code.

    إشعار

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

  3. ضع الماوس فوق عنوان Static Web Apps ، وانقر بزر الماوس الأيمن، وحدد Create Static Web App.

    Screenshot showing where to go to create a web app.

  4. أدخل my-first-static-web-app، واضغط على Enter.

    Screenshot showing how to create a Static Web App.

  5. حدد موقعك واضغط على مفتاح الإدخال Enter.

    Screenshot showing how to select a subscription.

  6. حدد الخيار «Custom» ثم اضغط على Enter

    Screenshot showing the custom option selected.

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

    Screenshot showing the code location entered as Angular app.

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

    Screenshot showing how to enter the build output location for Angular.

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

    Screenshot showing the code location entered as react app.

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

    Screenshot showing how to enter the build output location for React.

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

    Screenshot showing the code location entered as Svelte app.

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

    Screenshot showing how to enter the build output location for Svelte.

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

    Screenshot showing the code location entered as Vue app.

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

    Screenshot showing how to enter the build output location for Vue

إشعار

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

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

    Screenshot of the confirmation code asking the user to open actions in GitHub or View/Edit Configure.

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

    Screenshot of the VS Code UI showing waiting for deployment.

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

    Screenshot showing how to check progress via GitHub Actions.

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

  3. لعرض موقع ويب في المستعرض، انقر بزر الماوس الأيمن فوق المشروع في ملحق «تطبيقات الويب الثابتة»، وحدد «موقع الاستعراض».

    Screenshot showing how to browse to your static web app site.

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

إشعار

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