البرنامج التعليمي: استخدام التكوين الديناميكي في JavaScript

في هذا البرنامج التعليمي، ستتعلم كيفية تمكين التكوين الديناميكي في تطبيقات JavaScript. يعتمد المثال في هذا البرنامج التعليمي على نموذج التطبيق المقدم في التشغيل السريع ل JavaScript. قبل المتابعة، قم بإنهاء إنشاء تطبيق JavaScript باستخدام Azure App Configuration.

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

• قم بإنهاء التشغيل السريع إنشاء تطبيق JavaScript باستخدام Azure App Configuration.
• تحديث الحزمة @azure/app-configuration-provider إلى الإصدار 2.0.0 أو أحدث.

إضافة قيم المفاتيح

أضف قيمة المفتاح التالية إلى مخزن Azure App Configuration. لمزيد من المعلومات حول كيفية إضافة قيم المفاتيح إلى مخزن باستخدام مدخل Microsoft Azure أو CLI، انتقل إلى إنشاء قيمة مفتاح.

مفتاح	القيمة‬	تسمية	نوع المحتوى
رسالة	مرحبًا بالعالم!	اتركه فارغًا	اتركه فارغًا

تطبيقات وحدة التحكم

توضح الأمثلة التالية كيفية استخدام قيم التكوين القابلة للتحديث في تطبيقات وحدة التحكم. اختر الإرشادات التالية استنادا إلى كيفية استهلاك تطبيقك لبيانات التكوين المحملة من App Configuration، إما كعنصر Map تكوين أو .

تحميل البيانات من App Configuration

يمكنك الاتصال بتكوين التطبيق باستخدام معرف Microsoft Entra (مستحسن) أو سلسلة الاتصال. يوضح مقتطف التعليمات البرمجية التالي استخدام معرف Microsoft Entra. يمكنك استخدام DefaultAzureCredential للمصادقة على متجر App Configuration. أثناء إكمال التشغيل السريع المدرج في المتطلبات الأساسية، قمت بالفعل بتعيين بيانات الاعتماد الخاصة بك دور App Configuration Data Reader.

1. افتح الملف app.js وقم بتحديث الدالة load . أضف معلمة refreshOptions لتمكين خيارات التحديث وتكوينها. سيتم تحديث التكوين المحمل عند الكشف عن تغيير على الخادم. بشكل افتراضي، يتم استخدام فاصل تحديث مدته 30 ثانية، ولكن يمكنك تجاوزه باستخدام الخاصية refreshIntervalInMs .

   استخدام التكوين كخريطة

   // Connecting to Azure App Configuration using endpoint and token credential
   const appConfig = await load(endpoint, credential, {
       // Enabling the dynamic refresh
       refreshOptions: {
           enabled: true
       }
   });
   

   استخدام التكوين ككائن

   يتم إنشاء كائن التكوين عن طريق استدعاء constructConfigurationObject الدالة . لضمان تكوين محدث، قم بتحديث كائن التكوين في رد الاتصال الذي onRefresh تم تشغيله كلما تم الكشف عن تغيير التكوين وتحديث التكوين.

   // Connecting to Azure App Configuration using endpoint and token credential
   const appConfig = await load(endpoint, credential, {
       // Enabling the dynamic refresh
       refreshOptions: {
           enabled: true
       }
   });
   
   // Constructing configuration object
   let config = appConfig.constructConfigurationObject();
   
   // Setting up callback to ensure `config` object is updated once configuration is changed.
   appConfig.onRefresh(() => {
       config = appConfig.constructConfigurationObject();
   });
   
   

   إشعار

   إذا تلقيت رسالة الخطأ: "تم تمكين التحديث ولكن لم يتم تحديد إعدادات مراقب." يرجى تحديث الحزمة @azure/app-configuration-provider إلى الإصدار 2.0.0 أو أحدث.

   تلميح

   لمزيد من المعلومات حول مراقبة تغييرات التكوين، راجع أفضل الممارسات لتحديث التكوين.

2. لن يؤدي الإعداد refreshOptions وحده إلى تحديث التكوين تلقائيا. تحتاج إلى استدعاء refresh الأسلوب لتشغيل تحديث. يمنع هذا التصميم الطلبات غير الضرورية إلى App Configuration عندما يكون تطبيقك الخاما. يجب تضمين refresh الاستدعاء حيث يحدث نشاط التطبيق الخاص بك. يعرف هذا باسم تحديث التكوين المستند إلى النشاط. على سبيل المثال، يمكنك الاتصال refresh عند معالجة رسالة واردة أو طلب، أو داخل تكرار حيث تقوم بتنفيذ مهمة معقدة. بدلا من ذلك، يمكنك استخدام مؤقت إذا كان التطبيق الخاص بك نشطا دائما. في هذا المثال، refresh يتم استدعاء في حلقة لأغراض العرض التوضيحي. حتى إذا refresh فشل الاستدعاء لأي سبب من الأسباب، فسيستمر تطبيقك في استخدام التكوين المخزن مؤقتا. سيتم إجراء محاولة أخرى عند مرور الفاصل الزمني للتحديث الذي تم تكوينه وتشغيل refresh الاستدعاء بواسطة نشاط التطبيق الخاص بك. الاستدعاء refresh ليس عملية قبل انقضاء الفاصل الزمني للتحديث المكون، لذلك يكون تأثير الأداء الخاص به ضئيلا حتى إذا تم استدعاؤه بشكل متكرر.

   أضف التعليمات البرمجية التالية إلى تغييرات تكوين الاستقصاء لقيم المفاتيح التي تمت مراقبتها.

   استخدام التكوين كخريطة

   // Polling for configuration changes every 5 seconds
   while (true) {
       console.log(appConfig.get("message")); // Consume current value of message from a Map
       appConfig.refresh(); // Refreshing the configuration setting asynchronously
       await sleepInMs(5000); // Waiting before the next refresh
   }
   

   استخدام التكوين ككائن

   // Polling for configuration changes every 5 seconds
   while (true) {
       console.log(config.message); // Consume current value of message from an object
       appConfig.refresh(); // Refreshing the configuration setting asynchronously
       await sleepInMs(5000); // Waiting before the next refresh
   }
   

3. الآن يجب أن يبدو الملف app.js مثل قصاصة التعليمات البرمجية التالية:

   استخدام التكوين كخريطة

   const sleepInMs = require("util").promisify(setTimeout);
   const { load } = require("@azure/app-configuration-provider");
   const { DefaultAzureCredential } = require("@azure/identity");
   const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
   const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility
   
   async function run() {
       // Connecting to Azure App Configuration using endpoint and token credential
       const appConfig = await load(endpoint, credential, {
           // Enabling the dynamic refresh
           refreshOptions: {
               enabled: true
           }
       });
   
       // Polling for configuration changes every 5 seconds
       while (true) {
           console.log(appConfig.get("message")); // Consume current value of message from a Map
           appConfig.refresh(); // Refreshing the configuration setting asynchronously
           await sleepInMs(5000); // Waiting before the next refresh
       }
   }
   
   run().catch(console.error);
   

   استخدام التكوين ككائن

   const sleepInMs = require("util").promisify(setTimeout);
   const { load } = require("@azure/app-configuration-provider");
   const { DefaultAzureCredential } = require("@azure/identity");
   const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
   const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility
   
   async function run() {
       // Connecting to Azure App Configuration using endpoint and token credential
       const appConfig = await load(endpoint, credential, {
           // Enabling the dynamic refresh
           refreshOptions: {
               enabled: true
           }
       });
   
       // Constructing configuration object
       let config = appConfig.constructConfigurationObject();
   
       // Setting up callback to ensure `config` object is updated once configuration is changed.
       appConfig.onRefresh(() => {
           config = appConfig.constructConfigurationObject();
       });
   
       // Polling for configuration changes every 5 seconds
       while (true) {
           console.log(config.message); // Consume current value of message from an object
           appConfig.refresh(); // Refreshing the configuration setting asynchronously
           await sleepInMs(5000); // Waiting before the next refresh
       }
   }
   
   run().catch(console.error);
   

شغّل التطبيق

1. تشغيل البرنامج النصي الخاص بك:

   node app.js
   

2. تحقق من الإخراج:

   Hello World!
   

   يستمر في طباعة "مرحبًا بالعالم!" في سطر جديد كل 5 ثوان.

3. قم بتحديث قيم المفاتيح التالية إلى مخزن Azure App Configuration. تحديث قيمة المفتاح message.

   مفتاح	القيمة‬	تسمية	نوع المحتوى
   رسالة	مرحبًا بالعالم - تم التحديث!	اتركه فارغًا	اتركه فارغًا

4. بمجرد تحديث القيم، تتم طباعة القيمة المحدثة بعد الفاصل الزمني للتحديث.

   Hello World - Updated!
   

تطبيق الخادم

يوضح المثال التالي كيفية تحديث خادم http موجود لاستخدام قيم التكوين القابلة للتحديث.

1. أنشئ ملف JavaScript جديدا باسم server.js وأضف التعليمات البرمجية التالية:

   const http = require('http');
   
   function startServer() {
       const server = http.createServer((req, res) => {
           res.statusCode = 200;
           res.setHeader('Content-Type', 'text/plain');
           res.end("Hello World!");
       });
   
       const hostname = "localhost";
       const port = 3000;
       server.listen(port, hostname, () => {
       console.log(`Server running at http://localhost:${port}/`);
       });
   }
   
   startServer();
   

2. تشغيل البرنامج النصي الخاص بك:

   node server.js
   

3. تفضل بزيارة http://localhost:3000 وسترى الاستجابة:

   

تحميل البيانات من App Configuration

1. قم بتحديث server.js لاستخدام App Configuration وتمكين التحديث الديناميكي:

   const http = require("http");
   
   const { load } = require("@azure/app-configuration-provider");
   const { DefaultAzureCredential } = require("@azure/identity");
   const endpoint = process.env.AZURE_APPCONFIG_ENDPOINT;
   const credential = new DefaultAzureCredential(); // For more information, see https://learn.microsoft.com/azure/developer/javascript/sdk/credential-chains#use-defaultazurecredential-for-flexibility
   
   let appConfig;
   async function initializeConfig() {
       appConfig = await load(endpoint, credential, {
           refreshOptions: {
               enabled: true,
               refreshIntervalInMs: 15_000 // set the refresh interval
           }
       });
   }
   
   function startServer() {
       const server = http.createServer((req, res) => {
           // refresh the configuration asynchronously when there is any incoming request
           appConfig.refresh();
           res.statusCode = 200;
           res.setHeader('Content-Type', 'text/plain');
           res.end(appConfig.get("message"));
       });
   
       const hostname = "localhost";
       const port = 3000;
       server.listen(port, hostname, () => {
       console.log(`Server running at http://localhost:${port}/`);
       });
   }
   
   // Initialize the configuration and then start the server
   initializeConfig()
       .then(() => startServer());
   

تحديث التكوين المستند إلى الطلب

في معظم الحالات، يمكن التعامل مع عملية التحديث لموفر تكوين التطبيق على أنها عملية غير عملية. سيرسل طلبات للتحقق من القيمة في App Configuration فقط عند مرور وقت الفاصل الزمني للتحديث الذي قمت بتعيينه.

نوصي بتنفيذ تحديث التكوين المستند إلى الطلب لتطبيق الويب الخاص بك. يتم تشغيل تحديث التكوين من خلال الطلبات الواردة إلى تطبيق الويب الخاص بك. لن يحدث أي تحديث إذا كان تطبيقك الخاما، عندما لا يكون هناك طلب وارد. عندما يكون تطبيقك نشطا، يمكنك استخدام برنامج وسيط أو آلية مماثلة appConfig.refresh() لتشغيل المكالمة عند كل طلب وارد إلى تطبيقك.

• إذا فشل طلب تكوين التطبيق للكشف عن التغيير، فسيستمر تطبيقك في استخدام التكوين المخزن مؤقتا. سيتم إجراء محاولات جديدة للتحقق من وجود تغييرات بشكل دوري أثناء وجود طلبات واردة جديدة لتطبيقك.

• يحدث تحديث التكوين بشكل غير متزامن لمعالجة الطلبات الواردة لتطبيقك. لن يمنع أو يبطئ الطلب الوارد الذي قام بتشغيل التحديث. قد لا يحصل الطلب الذي قام بتشغيل التحديث على قيم التكوين المحدثة، ولكن الطلبات اللاحقة ستحصل على قيم تكوين جديدة.

شغّل التطبيق

1. إعادة تشغيل خادم http الخاص بك:

   node server.js
   

2. قم بزيارة http://localhost:3000 الاستجابة والتحقق منها وهي message المفتاح في متجر App Configuration.

   

3. قم بتحديث قيم المفاتيح التالية إلى مخزن Azure App Configuration. تحديث قيمة المفتاح message.

   مفتاح	القيمة‬	تسمية	نوع المحتوى
   رسالة	مرحبًا بالعالم - تم التحديث!	اتركه فارغًا	اتركه فارغًا

4. بعد حوالي 15 ثانية، قم بتحديث الصفحة عدة مرات ويجب تحديث الرسالة.

   

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

إذا كنت لا تريد مواصلة استخدام الموارد التي تم إنشاؤها في هذه المقالة، يوصى بحذف مجموعة الموارد التي أنشأتها هنا لتجنب الرسوم.

هام

حذف مجموعة الموارد لا يمكن التراجع عنه. يتم حذف مجموعة الموارد وجميع الموارد المضمنة فيها نهائيًا. تأكد من عدم حذفك للموارد أو مجموعة المورد الخاطئة عن غير قصد. في حالة إنشاء الموارد لهذه المقالة داخل مجموعة موارد تشتمل على موارد أخرى تريد الاحتفاظ بها، احذف كل مورد على حدة من الجزء الخاص به بدلًا من حذف مجموعة الموارد.

1. سجل الدخول إلى مدخل Microsoft Azure، وحدد Resource groups.
2. في المربع تصفية حسب الاسم ، أدخل اسم مجموعة الموارد الخاصة بك.
3. في قائمة النتائج، حدد اسم مجموعة الموارد لاستعراض نظرة عامة.
4. حدد Delete resource group.
5. يُطلب منك تأكيد حذف مجموعة الموارد. أدخل اسم مجموعة الموارد للتأكيد وحدد "Delete".

بعد بضع لحظات، يتم حذف مجموعة الموارد وكافة مواردها.

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

في هذا البرنامج التعليمي، قمت بتمكين تطبيق JavaScript لتحديث إعدادات التكوين ديناميكيا من Azure App Configuration. لمعرفة كيفية استخدام هوية مدارة من Azure لتبسيط الوصول إلى Azure App Configuration، تابع إلى البرنامج التعليمي التالي.

تكامل الهوية المدارة

للتشغيل الكامل للميزة لمكتبة موفر تكوين JavaScript، تابع إلى المستند التالي.

موفر تكوين JavaScript