التشغيل السريع: إنشاء أول تطبيق ويب ثابت

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

المتطلبات الأساسية

• إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.
• حساب GitHub

• إذا لم يكن لديك اشتراك Azure، فأنشئ حساباً تجريبياً مجانياً.
• مؤسسة Azure DevOps

إنشاء مستودع

تستخدم هذه المقالة مستودع قالب GitHub لتسهيل بدء التشغيل. يتميز القالب بتطبيق بدء التشغيل لنشره في Azure Static Web Apps.

لا يوجد إطار

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. قم بتسمية مستودعك باسم my-first-static-web-app

إشعار

تتطلب Azure Static Web Apps ملف HTML واحد على الأقل لإنشاء تطبيق ويب. يتضمن المستودع الذي تنشئه في هذه الخطوة ملفًا واحدًا index.html.

الزاوي

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:
   1. https://github.com/staticwebdev/angular-basic/generate
2. قم بتسمية مستودعك باسم my-first-static-web-app

Blazor

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. قم بتسمية مستودعك باسم my-first-static-web-app

تفاعل

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:
   1. https://github.com/staticwebdev/react-basic/generate
2. قم بتسمية مستودعك باسم my-first-static-web-app

Vue

1. انتقل إلى الموقع التالي لإنشاء مستودع جديد:
   1. https://github.com/staticwebdev/vue-basic/generate
2. قم بتسمية مستودعك باسم my-first-static-web-app

حدد إنشاء مستودع.

إنشاء مستودع

تستخدم هذه المقالة مستودع Azure DevOps لتسهيل البدء. يتميز المستودع بتطبيق بداية يستخدم للتوزيع باستخدام Azure Static Web Apps.

1. قم بتسجيل الدخول إلى Azure DevOps.

2. حدد New repository.

3. في نافذة Create new project ، قم بتوسيع قائمة Advanced وقم بإجراء التحديدات التالية:

   الإعداد	القيمة‬
   Project	أدخل my-first-web-static-app.
   الرؤية	حدد خاص.
   التحكم بالإصدار	حدد Git.
   عملية عنصر العمل	حدد الخيار الذي يناسب أساليب التطوير الخاصة بك.

4. حدد إنشاء.

5. حدد عنصر القائمة Repos.

6. حدد عنصر القائمة ملفات.

7. ضمن بطاقة Import repository ، حدد Import.

8. انسخ عنوان URL للمستودع لإطار العمل الذي تختاره، والصقه في مربع Clone URL .

   لا يوجد إطار

   https://github.com/staticwebdev/vanilla-basic.git

   الزاوي

   https://github.com/staticwebdev/angular-basic.git

   Blazor

   https://github.com/staticwebdev/blazor-basic.git

   تفاعل

   https://github.com/staticwebdev/react-basic.git

   Vue

   https://github.com/staticwebdev/vue-basic.git

9. حدد استيراد وانتظر حتى تكتمل عملية الاستيراد.

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

الآن بعد إنشاء المستودع، يمكنك إنشاء تطبيق ويب ثابت من مدخل Azure.

1. انتقل إلى مدخل Azure.
2. حدد Create a Resource.
3. البحث عن Static Web Apps.
4. حدد "Static Web Apps".
5. حدد إنشاء.

في قسم Basics ، ابدأ بتكوين تطبيقك الجديد وربطه بمستودع GitHub.

الإعداد	القيمة‬
الاشتراك	حدد اشتراك Azure الخاص بك.
مجموعة الموارد	حدد الارتباط Create new، وأدخل static-web-apps-test في مربع النص.
الاسم	أدخل my-first-static-web-app في مربع النص.
نوع الخطة	حدد Free.
المصدر	حدد GitHub وسجل الدخول إلى GitHub إذا لزم الأمر.

إذا لزم الأمر، فسجل الدخول باستخدام GitHub، وأدخل معلومات المستودع التالية.

الإعداد	القيمة‬
مؤسسة	حدد مؤسستك.
المستودع	حدد my-first-web-static-app.
فرع	حدد "main".

إشعار

إذا لم تشاهد قائمة بالمستودعات:

• قد تحتاج إلى تخويل Azure Static Web Apps في GitHub. استعرض للوصول إلى ملف تعريف GitHub وانتقل إلى Settings > Applications > Authorized OAuth Apps، وحدد Azure Static Web Apps، ثم حدد Grant.

• قد تحتاج إلى تخويل Azure Static Web Apps في مؤسسة Azure DevOps. يجب أن تكون مالكا للمؤسسة لمنح الأذونات. طلب الوصول إلى تطبيق جهة خارجية عبر OAuth. لمزيد من المعلومات، راجع تخويل الوصول إلى واجهات برمجة تطبيقات REST باستخدام OAuth 2.0.

في قسم Basics ، ابدأ بتكوين تطبيقك الجديد وربطه بمستودع Azure DevOps.

الإعداد	القيمة‬
الاشتراك	حدد اشتراك Azure الخاص بك.
مجموعة الموارد	حدد الارتباط Create new، وأدخل static-web-apps-test في مربع النص.
الاسم	أدخل my-first-static-web-app في مربع النص.
نوع الخطة	حدد Free.
Azure Functions and staging details	حدد أقرب منطقة إليك.
المصدر	حدد Azure DevOps.
مؤسسة	حدد مؤسستك.
Project	حدد مشروعك.
المستودع	حدد my-first-web-static-app.
فرع	حدد "main".

إشعار

تأكد من أن الفرع الذي تستخدمه غير محمي، وأن لديك أذونات كافية push لإصدار أمر. للتحقق، استعرض للوصول إلى مستودع DevOps وانتقل إلى Repos ->Branches وحدد المزيد من الخيارات. بعد ذلك، حدد الفرع الخاص بك، ثم نهج الفرع لضمان عدم تمكين النهج المطلوبة.

في قسم Build Details ، أضف تفاصيل التكوين الخاصة لإطار عمل الواجهة الأمامية المفضل لديك.

لا يوجد إطار

1. من القائمة المنسدلة Build Presets، حدد Custom.
2. في مربع App location ، أدخل ./src.
3. اترك مربع Api location فارغًا.
4. في مربع Output location ، أدخل ./src.

الزاوي

1. من القائمة المنسدلة Build Presets، حدد Angular.
2. احتفظ بالقيمة الافتراضية في مربع موقع التطبيق.
3. اترك مربع Api location فارغًا.
4. في مربع Output location ، أدخل dist/angular-basic.

Blazor

1. من القائمة المنسدلة Build Presets ، حدد Blazor.
2. احتفظ بالقيمة الافتراضية للعميل في مربع موقع التطبيق.
3. اترك مربع Api location فارغًا.
4. احتفظ بالقيمة الافتراضية ل wwwroot في مربع موقع الإخراج.

تفاعل

1. من القائمة المنسدلة Build Presets، حدد React.
2. احتفظ بالقيمة الافتراضية في مربع موقع التطبيق.
3. اترك مربع Api location فارغًا.
4. في مربع Output location ، أدخل build.

Vue

1. من القائمة المنسدلة Build Presets، حدد Vue.js.
2. احتفظ بالقيمة الافتراضية في مربع موقع التطبيق.
3. اترك مربع Api location فارغًا.
4. احتفظ بالقيمة الافتراضية في مربع موقع البيانات الاصطناعية للتطبيق.

حدد "Review + create".

حدد إنشاء.

إشعار

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

حدد إنشاء.

حدد الانتقال إلى المورد.

عرض الموقع الإلكتروني

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

قبل أن تتمكن من الانتقال إلى موقعك الثابت الجديد، يجب أن ينتهي إنشاء النشر أولا من التشغيل.

تعرض نافذة Static Web Apps Overview سلسلة من الارتباطات التي تساعدك على التفاعل مع تطبيق الويب الخاص بك.

1. يؤدي التحديد على الشعار الذي يقول ، حدد هنا للتحقق من حالة عمليات تشغيل GitHub Actions الخاصة بك إلى إجراءات GitHub التي تعمل مقابل المستودع الخاص بك. بمجرد التحقق من اكتمال مهمة النشر، يمكنك الانتقال إلى موقع الويب الخاص بك عبر عنوان URL الذي تم إنشاؤه.

2. بمجرد اكتمال سير عمل الإجراءات GitHub، يمكنك تحديد رابط URL لفتح موقع الويب في علامة تبويب جديدة.

بمجرد اكتمال سير العمل، يمكنك تحديد ارتباط URL لفتح موقع الويب في علامة تبويب جديدة.

تنظيف الموارد

إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مثيل Azure Static Web Apps عن طريق تشغيل الأمر التالي:

1. افتح مدخل Azure.
2. ابحث عن my-first-web-static-app من شريط البحث العلوي.
3. حدد اسم التطبيق
4. حدد حذف.
5. حدد نعم لتأكيد إجراء الحذف (قد يستغرق هذا الإجراء بضع لحظات لإكماله).

المحتوى ذو الصلة

• سلسلة الفيديو: نشر مواقع الويب على السحابة باستخدام Azure Static Web Apps

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

إضافة واجهة برمجة تطبيقات