البرنامج التعليمي: نشر موقع VuePress إلىAzure Static Web Apps

توضح هذه المقالة كيفية إنشاء تطبيق ويب VuePress وتوزيعه إلى Azure Static Web Apps. والنتيجة النهائية هي تطبيق zure Static Web Apps جديد مع إجراءات GitHub المقترنة التي تمنحك التحكم في كيفية بناء التطبيق ونشره.

في هذا البرنامج التعليمي، تتعلم كيفية:

• قم بإنشاء تطبيق VuePress
• إعداد Azure Static Web Apps
• قم بنشر تطبيق VuePress إلى Azure

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

• حساب Azure باشتراك نشط. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• حساب GitHub. إذا لم يكن لديك حساب، يمكنك إنشاء حساب مجانًا.
• تم تثبيت إعداد Git. إذا لم يكن لديك واحد، يمكنك تثبيت Git.
• ⁧⁩Node.JS مثبت⁧⁩.

إنشاء تطبيق VuePress

إنشاء تطبيق VuePress من واجهة سطر الأوامر (CLI):

1. إنشاء مجلد جديد لتطبيق VuePress.

   mkdir static-site
   

2. قم بإضافة ⁧⁩ملف README.md⁧⁩إلى المجلد.

   echo '# Hello From VuePress' > README.md
   

3. تهيئة ملف ⁧⁩package.js⁧⁩.

   npm init -y
   

4. إضافة VuePress ك ⁧devDependency⁩.

   npm install --save-dev vuepress
   

5. افتح ملف ⁧⁩package.js⁧⁩ في محرر نص ثم قم بإضافة أمر إنشاء إلى ⁧⁩⁧scripts⁩⁧⁩ المقطع.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. إنشاء ملف .gitignore لاستبعاد مجلد node_modules .

   echo 'node_modules' > .gitignore
   

7. قم بتهيئة مستودع Git.

    git init
    git add -A
    git commit -m "initial commit"
   

ادفع تطبيقك إلى GitHub

تحتاج إلى مستودع على GitHub للاتصال بـAzure Static Web Apps. توضح لك الخطوات التالية كيفية إنشاء مستودع لموقعك.

1. أنشئ مستودع GitHub فارغًا (لا تقم بإنشاء README) من ⁧⁩⁧ https://github.com/new ⁩⁧⁩ اسمه ⁧⁩vuepress-static-app⁧⁩.

2. إضافة مستودع GitHub كجهاز تحكم عن بعد إلى مستودع محلي خاص بك. تأكد من إضافة اسم مستخدم GitHub بدلاً من العنصر النائب ⁧<YOUR_USER_NAME>⁩ في الأمر التالي.

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. قم بدفع المستودع المحلي الخاص بك إلى GitHub.

   git push --set-upstream origin main
   

قم بنشر تطبيق الويب الخاص بك

توضح لك الخطوات التالية كيفية إنشاء تطبيق موقع ثابت جديد ونشره في بيئة إنتاج.

إنشاء التطبيق

1. انتقل إلى ⁧⁩مدخل Microsoft Azure⁧⁩

2. حدد ⁧⁩Create a Resource⁧⁩

3. ابحث عن ⁧⁩Static Web Apps⁧⁩

4. حدد ⁧⁩Static Web Apps⁧⁩

5. حدد ⁧⁩Create⁧⁩

6. في علامة التبويب Basics، أدخل القيم التالية.

   الخاصية	القيمة
   الاشتراك	اسم اشتراك Azure خاصتك.
   مجموعة الموارد	⁧⁩my-vuepress-group⁧⁩
   الاسم	⁧⁩vuepress-static-app⁧⁩
   ⁧⁩نوع الخطة⁧⁩	مجاني
   “Region for Azure Functions API and staging environments”	حدد أقرب منطقة إليك.
   المصدر	GitHub

7. حدد ⁧⁩Sign in with GitHub⁧⁩ ثم قم بالمصادقة باستخدام GitHub.

8. أدخل قيم GitHub التالية.

   الخاصية	القيمة
   ⁧⁩المؤسسة⁧⁩	حدد مؤسسة GitHub المطلوبة.
   ⁧⁩المستودع⁧⁩	حدد ⁧⁩vuepress-static-app⁧⁩.
   ⁧⁩الفرع⁧⁩	حدد ⁧⁩"main"⁧⁩.

   ملاحظة

   إذا لم تشاهد أي مستودعات، فقد تحتاج إلى تخويل Azure Static Web Apps على GitHub. استعرض للوصول إلى مستودع GitHub وانتقل إلى Settings > Applications > Authorized OAuth Apps، وحدد Azure Static Web Apps، ثم حدد Grant. بالنسبة لمستودعات المؤسسة، يجب أن تكون مالكًا للمؤسسة لمنح الأذونات.

9. في قسم ⁧⁩Build Details،⁧⁩ حدد ⁧⁩VuePress⁧⁩ من القائمة المنسدلة ⁧⁩Build Presets⁧⁩ واحتفظ بالقيم الافتراضية.

المراجعة والإنشاء

1. حدد Review + Create للتحقق من صحة التفاصيل.

2. حدد Create لبدء إنشاء App Service Static Web App وتوفير GitHub Actions للتوزيع.

3. بمجرد اكتمال التوزيع، حدد Go to resource.

4. في شاشة المورد، حدد ارتباط URL لفتح التطبيق المنشور. قد تحتاج إلى الانتظار دقيقة أو دقيقتين حتى تكتمل إجراءات GitHub.

   

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

إذا كنت لن تستمر في استخدام هذا التطبيق، يمكنك حذف مورد تطبيق Azure Static Web من خلال الخطوات التالية:

1. افتح ⁧⁩مدخل Microsoft Azure⁧⁩
2. في شريط البحث العلوي، ابحث عن تطبيقك بالاسم الذي قدمته سابقًا
3. انقر فوق التطبيق
4. انقر فوق الزر⁧⁩Delete⁧⁩
5. انقر فوق ⁧⁩Yes⁧⁩ لتأكيد إجراء الحذف

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

إضافة مجال مخصص