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

تنشر 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

فيو

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 وقم بإجراء التحديدات التالية:

   الإعداد	القيمة‬
   المشروع	أدخل 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

   فيو

   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.
Azure Functions and staging details	حدد أقرب منطقة إليك.
Source	حدد GitHub.

حدد تسجيل الدخول باستخدام GitHub وصادق باستخدام GitHub.

بعد تسجيل الدخول باستخدام GitHub، أدخل معلومات المستودع.

الإعداد	القيمة‬
المنظمة	حدد مؤسستك.
المستودع	حدد my-first-web-static-app.
فرع	حدد <branch_name>.

إشعار

إذا لم تشاهد أي مستودعات:

• قد تحتاج إلى تخويل Azure Static Web Apps في GitHub. استعرض للوصول إلى ملف تعريف GitHub وانتقل إلى الإعدادات 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	حدد أقرب منطقة إليك.
Source	حدد DevOps.
المنظمة	حدد مؤسستك.
المشروع	حدد مشروعك.
المستودع	حدد my-first-web-static-app.
فرع	حدد <branch_name>.

إشعار

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

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

لا يوجد إطار

1. حدد Custom من القائمة المنسدلة Build Presets .
2. اكتب ./src في مربع موقع التطبيق.
3. اترك مربع Api location فارغًا.
4. اكتب مربع ./srcApp artifact location .

الزاوي

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

Blazor

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

الرد

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

فيو

1. حدد Vue.js من القائمة المنسدلة Build Presets .
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. حدد نعم لتأكيد إجراء الحذف (قد يستغرق هذا الإجراء بضع لحظات لإكماله).

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

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