التمرين - البدء
في هذا التمرين، ستُنشئ مثيل تطبيقات الويب الثابتة في Azure بما في ذلك إجراء GitHub الذي ينشئ تطبيقك وينشره تلقائياً.
تستخدم هذه الوحدة بيئة الاختبار المعزولة من Azure لتزويدك باشتراك مجاني مؤقت في Azure يمكنك استخدامه لإكمال التمرين. قبل المتابعة، تأكد من تنشيط بيئة الاختبار المعزولة في الجزء العلوي من هذه الصفحة.
تلميح
إذا واجهت مشكلات في تبعيات العقدة، فتأكد من تثبيت Node Version Manager ويمكنك التبديل إلى إصدار سابق.
إنشاء مستودع
بعد ذلك، أنشئ مستودعاً جديداً باستخدام مستودع قوالب GitHub. تتوفر سلسلة من القوالب حيث يحتوي كل منها على تطبيق بدء تم إنشاؤه باستخدام إطار أمامي مختلف.
انتقل إلى صفحة create from templateلمستودع القوالب.
- إذا كان لديك خطأ 404 بأن الصفحة غير موجودة، فسجل الدخول إلى GitHub وحاول مرة أخرى.
إذا تمت مطالبتك بدخول المالك «Owner»، فاختر أحد حسابات GitHub لديك.
امنح مستودعك الاسم my-static-web-app-authn.
حدد «Create repository from template».
انسخ تطبيقك محليًا
لقد أنشأت للتو مستودع GitHub باسم my-static-web-app-authn في حسابك على GitHub. بعد ذلك، ستقوم بنسخ الريبو وتشغيل الرمز محليًا على جهاز الكمبيوتر.
افتح وحدة طرفية على جهاز الكمبيوتر الخاص بك.
ابدأ بنسخ مستودع GitHub على جهاز الكمبيوتر الخاص بك.
git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-static-web-app-authn
انتقل إلى مجلد التعليمات البرمجية المصدر.
cd my-static-web-app-authn
تكوين CORS محليًا
لن يكون لديك ما يدعو للقلق حول مشاركة الموارد عبر المنشأ (CORS) عند نشرها إلى Azure Static Web Apps. تعمل Azure Static Web Apps تلقائيًا على تكوين تطبيقك حتى يتمكن من الاتصال بواجهة برمجة التطبيقات الخاصة بك على Azure باستخدام وكيل عكسي. ولكن عند التشغيل محلياً، تحتاج إلى تكوين CORS للسماح لتطبيق الويب وواجهة برمجة التطبيقات الخاصة بك بالاتصال.
الآن أعط تعليماتك إلى Azure Functions بالسماح لتطبيق الويب الخاص بك بتقديم طلبات HTTP إلى واجهة برمجة التطبيقات، على الكمبيوتر الخاص بك.
أنشئ ملفاً باسم api/local.settings.json.
أضف للملف المحتويات التالية:
{ "Host": { "CORS": "http://localhost:4200" } }
{ "Host": { "CORS": "http://localhost:3000" } }
{ "Host": { "CORS": "http://localhost:5000" } }
{ "Host": { "CORS": "http://localhost:8080" } }
إشعار
يُدرج ملف local.settings.json في ملف .gitignore مما يمنع دفع هذا الملف إلى GitHub. هذا لأنه يمكنك تخزين الأسرار في هذا الملف إن كنت لا تريد ذلك في GitHub. هذا هو السبب في إنشاء الملف عندما أنشأت مستودعك من القالب.
تشغيل واجهة برمجة التطبيقات
يحتوي المجلد api
على مشروع Azure Functions بنقاط نهاية HTTP لتطبيق الويب. ابدأ بتشغيل واجهة برمجة التطبيقات محليًا باتباع الخطوات التالية:
إشعار
يرجى التأكد من تثبيت أدوات Azure Functions الأساسية التي ستسمح لك بتشغيل دالات Azure محلياً.
في Visual Studio Code، افتح لوحة الأوامر بالضغط على F1.
اكتب "Terminal: Create New Integrated Terminal" وحددها.
انتقل إلى مجلد api:
cd api
شغّل تطبيق Azure Functions محليًا:
func start
شغّل تطبيق الويب
بعد ذلك، انتقل إلى مجلد إطار عمل الواجهة الأمامية المفضل، كما يلي:
cd angular-app
cd react-app
cd svelte-app
cd vue-app
الآن ثبّت تبعيات التطبيق.
npm install
وأخيراً، شغّل تطبيق عميل الواجهة الأمامية.
npm start
npm start
npm run dev
npm run serve
استعرض تطبيقك
حان الوقت لتشاهد تطبيقك وهو يعمل محلياً. يعمل كل تطبيق واجهة أمامية على منفذ مختلف.
- حدد الارتباط الذي تريد استعراضه للوصول إلى تطبيقك.
استعرض إلى
http://localhost:4200
.
استعرض إلى
http://localhost:3000
.
استعرض إلى
http://localhost:5000
.
استعرض إلى
http://localhost:8080
.
يجب أن يعرض تطبيقك قائمة بالمنتجات.
- الآن، أوقف تشغيل التطبيق عن طريق الضغط على Ctrl-C في المحطة الطرفية.
أنشأت تطبيقك وهو الآن يعمل محلياً في مستعرضك.
بعد ذلك، ستنشر تطبيقك في Azure Static Web Apps.
إنشاء تطبيق ويب ثابت
والآن بعد أن أنشأت مستودع GitHub الخاص بك، يمكنك إنشاء مثيل تطبيقات الويب الثابتة باستخدام ملحق Azure Static Web Apps لـ Visual Studio Code.
تثبيت ملحق Azure Static Web Apps من أجل تعليمة Visual Studio البرمجية
انتقل إلى «Visual Studio Marketplace»، ثم قم بتثبيت الملحق Azure Static Web Apps لـ Visual Studio Code.
عند تحميل علامة تبويب الملحق في Visual Studio Code، حدد "Install".
بعد اكتمال التثبيت، حدد Reload.
تسجيل الدخول إلى Azure في Visual Studio Code
في Visual Studio Code، قم بتسجيل الدخول إلى Azure عن طريق تحديد View>Command Palette، وإدخال Azure: Sign In.
هام
سجّل الدخول إلى Azure باستخدام الحساب نفسه المستخدم في إنشاء بيئة الاختبار المعزولة. توفر بيئة الاختبار المعزولة الوصول إلى اشتراك Concierge.
اتبع المطالبات لنسخ التعليمة البرمجية المقدمة ولصقها في مستعرض الويب، والذي يصادق على جلسة عمل Visual Studio Code الخاصة بك.
حدد اشتراكك
افتح Visual Studio Code وحدد الملف > فتح لفتح المستودع الذي نسخته في الكمبيوتر في المحرر.
تحقق من أنك قمت بتصفية اشتراكات Azure لتضمين اشتراك Concierge عن طريق فتح لوحة الأوامر F1، وإدخال
Azure: Select Subscriptions
، والضغط على Enter.حدد Concierge Subscription واضغط على Enter.
إنشاء تطبيق ويب ثابت باستخدام Visual Studio Code
افتح Visual Studio Code وحدد الملف > فتح لفتح المستودع الذي نسخته في الكمبيوتر في المحرر.
داخل Visual Studio Code، حدد شعار Azure في شريط النشاط لفتح نافذة ملحقات Azure.
إشعار
يجب تسجيل الدخول إلى Azure وGitHub. إذا لم تكن قد سجلت الدخول بالفعل إلى Azure وGitHub من Visual Studio Code، فسيطالبك الملحق بتسجيل الدخول إلى كليهما في أثناء عملية الإنشاء.
ضع مؤشر الماوس الخاص بك فوق شريط Static Web Apps وحدد + (علامة زائد).
عند فتح لوحة الأوامر في أعلى المحرر، حدد Concierge Subscription واضغط على Enter.
أدخِل my-static-web-app-and-authn، واضغط على Enter.
حدد المنطقة الأقرب إليك، واضغط على مفتاح الإدخال Enter.
حدد خيار إطار العمل المقابل، واضغط على مفتاح الإدخال Enter.
حدد «angular-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.
أدخل dist/angular-app كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.
حدد «react-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.
أدخل «build» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.
حدد «svelte-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.
أدخل «public» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.
حدد «vue-app» كموقع لتعليمة التطبيق البرمجية، واضغط على Enter.
أدخل «dist» كموقع الإخراج حيث تم إنشاء الملفات للإنتاج في التطبيق، ثم اضغط على Enter.
إشعار
يختلف مستودعك قليلاً عن المستودع الذي ربما استخدمته في الماضي. فهو يحتوي على أربعة تطبيقات مختلفة في أربعة مجلدات مختلفة. يحتوي كل مجلد على تطبيق أُنشئ في إطار عمل JavaScript مختلف. عادةً ما يكون لديك تطبيق واحد في مستودعك الرئيسي وتُحدد /
لموقع مسار التطبيق. هذا مثال رائع على سبب إتاحة Azure Static Web Apps لك تكوين المواقع في المقام الأول - يمكنك التحكم في كيفية إنشاء التطبيق بصورة كاملة.
بعد إنشاء التطبيق، يظهر إعلام تأكيد في Visual Studio Code.
بالرغم من أن التوزيع قيد التقدم، يقوم ملحق Visual Studio Code بإبلاغك بحالة الإصدار.
:::image type="content" source="../media/extension-waiting-for-deployment.png" alt-text="Screenshot showing the waiting for deployment button.":::
يمكنك عرض تقدم عملية التوزيع باستخدام إجراءات GitHub عن طريق توسيع قائمة الإجراءات.
بمجرد اكتمال عملية النشر، يمكنك الانتقال مباشرة إلى موقع الويب الخاص بك.
لعرض موقع ويب في المستعرض، انقر بزر الماوس الأيمن فوق المشروع في ملحق «Static Web Apps»، وحدد Browse Site.
تهانينا! لقد وزعت تطبيقك الأول في Azure Static Web Apps!
إشعار
لا تقلق إذا ظهرت صفحة ويب تقول بأن التطبيق لم يُنشأ وينشر بعد. تحديث المتصفح في دقيقة واحدة. يعمل إجراء GitHub تلقائيًا عند إنشاء Azure Static Web Apps. إذا كنت ترى صفحة البداية، لا يزال التطبيق قيد النشر.
سحب التغييرات من GitHub
اسحب أحدث التغييرات من GitHub لإنزال ملف سير العمل الذي أُنشئ عن طريق Azure Static Web Apps:
افتح لوحة الأوامر بالضغط على F1.
أدخل Git:Pull ثم حددها، ثم اضغط Enter.
الخطوات التالية
فيما يلي، ستتعلم كيفية دمج مصادقة المستخدم في تطبيقك.