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

  • 5 دقائق

في هذا التمرين، ستقوم بإنشاء مثيل تطبيقات Static Web Apps من Azure، بما في ذلك 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. بعد اكتمال التثبيت، حدد «Restart to update».

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

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

    هام

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

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

حدد اشتراكك

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

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

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

    Filter by subscription..

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

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

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

    Azure Logo..

    ملاحظة

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

  3. ضع مؤشر الماوس فوق ملصق Static Web Apps وحدد + (علامة الجمع).

    Application name.

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

    Select Subscription..

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

    Create Static Web App..

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

    Create Static Web App - Custom..

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

    Angular application code location..

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

    Angular app files path..

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

    React application code location..

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

    React app files path.

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

    Svelte application code location..

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

    Svelte app files path..

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

    Vue application code location.

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

    Vue app files path..

ملاحظة

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

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

    Open Actions in GitHub or View/Edit Config..

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

    Waiting for Deployment..

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

    GitHub Actions..

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

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

    Browse Site..

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

ملاحظة

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