Tutorial: Menggunakan konfigurasi dinamis di JavaScript

Dalam tutorial ini, Anda mempelajari cara mengaktifkan konfigurasi dinamis di aplikasi JavaScript Anda. Contoh dalam tutorial ini dibangun pada aplikasi sampel yang diperkenalkan dalam mulai cepat JavaScript. Sebelum melanjutkan, selesaikan Buat aplikasi JavaScript dengan Azure App Configuration.

Prasyarat

• Selesaikan mulai cepat Membuat aplikasi JavaScript dengan Azure App Configuration.
• Perbarui paket ke @azure/app-configuration-provider versi 2.0.0 atau yang lebih baru.

Menambahkan nilai kunci

Tambahkan nilai kunci berikut ke penyimpanan Azure App Configuration Anda. Untuk informasi selengkapnya tentang cara menambahkan nilai kunci ke penyimpanan menggunakan portal Azure atau CLI, buka Membuat nilai kunci.

Tombol	Nilai	Etiket	Jenis konten
pesan	Halo Dunia!	Biarkan kosong	Biarkan kosong

Aplikasi konsol

Contoh berikut menunjukkan cara menggunakan nilai konfigurasi yang dapat di-refresh di aplikasi konsol. Pilih instruksi berikut berdasarkan cara aplikasi Anda menggunakan data konfigurasi yang dimuat dari App Configuration, baik sebagai Map objek konfigurasi atau .

Memuat data dari App Configuration

Anda dapat tersambung ke App Configuration menggunakan ID Microsoft Entra (disarankan) atau string koneksi. Cuplikan kode berikut menunjukkan penggunaan ID Microsoft Entra. Anda menggunakan DefaultAzureCredential untuk mengautentikasi ke penyimpanan App Configuration Anda. Saat menyelesaikan mulai cepat yang tercantum dalam prasyarat, Anda sudah menetapkan kredensial Anda peran Pembaca Data App Configuration.

1. Buka file app.js dan perbarui load fungsi . refreshOptions Tambahkan parameter untuk mengaktifkan refresh dan mengonfigurasi opsi refresh. Konfigurasi yang dimuat akan diperbarui ketika perubahan terdeteksi pada server. Secara default, interval refresh 30 detik digunakan, tetapi Anda dapat menggantinya dengan refreshIntervalInMs properti .

   Menggunakan konfigurasi sebagai Peta

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

   Gunakan konfigurasi sebagai objek

   Objek konfigurasi dibangun dengan fungsi panggilan constructConfigurationObject . Untuk memastikan konfigurasi terbaru, perbarui objek konfigurasi dalam panggilan balik yang onRefresh dipicu setiap kali perubahan konfigurasi terdeteksi dan konfigurasi diperbarui.

   // 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();
   });
   
   

   Catatan

   Jika Anda mendapatkan kesalahan: "Refresh diaktifkan tetapi tidak ada pengaturan yang ditonton yang ditentukan.", harap perbarui @azure/app-configuration-provider paket ke versi 2.0.0 atau yang lebih baru.

   Petunjuk / Saran

   Untuk informasi selengkapnya tentang memantau perubahan konfigurasi, lihat Praktik terbaik untuk refresh konfigurasi.

2. refreshOptions Menyiapkan saja tidak akan secara otomatis menyegarkan konfigurasi. Anda perlu memanggil refresh metode untuk memicu refresh. Desain ini mencegah permintaan yang tidak perlu ke App Configuration saat aplikasi Anda diam. Anda harus menyertakan refresh panggilan tempat aktivitas aplikasi Anda terjadi. Ini dikenal sebagai refresh konfigurasi berbasis aktivitas. Misalnya, Anda dapat memanggil refresh saat memproses pesan masuk atau pesanan, atau di dalam iterasi tempat Anda melakukan tugas yang kompleks. Atau, Anda dapat menggunakan timer jika aplikasi Anda selalu aktif. Dalam contoh ini, refresh dipanggil dalam perulangan untuk tujuan demonstrasi. Bahkan jika refresh panggilan gagal karena alasan apa pun, aplikasi Anda akan terus menggunakan konfigurasi cache. Upaya lain akan dilakukan ketika interval refresh yang dikonfigurasi telah berlalu dan refresh panggilan dipicu oleh aktivitas aplikasi Anda. refresh Panggilan adalah no-op sebelum interval refresh yang dikonfigurasi berlalu, sehingga dampak performanya minimal bahkan jika sering dipanggil.

   Tambahkan kode berikut ke perubahan konfigurasi polling dari nilai kunci yang diawasi.

   Menggunakan konfigurasi sebagai Peta

   // 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
   }
   

   Gunakan konfigurasi sebagai objek

   // 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. Sekarang file app.js akan terlihat seperti cuplikan kode berikut:

   Menggunakan konfigurasi sebagai Peta

   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);
   

   Gunakan konfigurasi sebagai objek

   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);
   

Jalankan aplikasi

1. Jalankan skrip Anda:

   node app.js
   

2. Verifikasi Output:

   Hello World!
   

   Ini terus mencetak "Halo Dunia!" di baris baru setiap 5 detik.

3. Perbarui nilai kunci berikut ke penyimpanan Azure App Configuration. Perbarui nilai kunci message.

   Tombol	Nilai	Etiket	Jenis konten
   pesan	Halo Dunia - Diperbarui!	Biarkan kosong	Biarkan kosong

4. Setelah nilai diperbarui, nilai yang diperbarui dicetak setelah interval refresh.

   Hello World - Updated!
   

Aplikasi server

Contoh berikut menunjukkan cara memperbarui server http yang ada untuk menggunakan nilai konfigurasi yang dapat di-refresh.

1. Buat file JavaScript baru bernama server.js dan tambahkan kode berikut:

   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. Jalankan skrip Anda:

   node server.js
   

3. Kunjungi http://localhost:3000 dan Anda akan melihat responsnya:

   

Memuat data dari App Configuration

1. server.js Perbarui untuk menggunakan App Configuration dan aktifkan refresh dinamis:

   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());
   

Refresh konfigurasi berbasis permintaan

Dalam kebanyakan kasus, operasi refresh penyedia App Configuration dapat diperlakukan sebagai no-op. Ini hanya akan mengirim permintaan untuk memeriksa nilai di App Configuration ketika waktu interval refresh yang Anda tetapkan telah berlalu.

Sebaiknya terapkan refresh konfigurasi berbasis permintaan untuk aplikasi web Anda. Refresh konfigurasi dipicu oleh permintaan masuk ke aplikasi web Anda. Tidak ada refresh yang akan terjadi jika aplikasi Anda diam, saat tidak ada permintaan masuk. Saat aplikasi aktif, Anda dapat menggunakan middleware atau mekanisme serupa untuk memicu appConfig.refresh() panggilan pada setiap permintaan masuk ke aplikasi Anda.

• Jika permintaan ke App Configuration untuk deteksi perubahan gagal, aplikasi Anda akan terus menggunakan konfigurasi cache. Upaya baru untuk memeriksa perubahan akan dilakukan secara berkala sementara ada permintaan masuk baru ke aplikasi Anda.

• Refresh konfigurasi terjadi secara asinkron dengan pemrosesan permintaan masuk aplikasi Anda. Ini tidak akan memblokir atau memperlambat permintaan masuk yang memicu refresh. Permintaan yang memicu refresh mungkin tidak mendapatkan nilai konfigurasi yang diperbarui, tetapi nantinya permintaan akan mendapatkan nilai konfigurasi baru.

Jalankan aplikasi

1. Jalankan kembali server http Anda:

   node server.js
   

2. Kunjungi http://localhost:3000 dan verifikasi respons yang merupakan message kunci di penyimpanan App Configuration Anda.

   

3. Perbarui nilai kunci berikut ke penyimpanan Azure App Configuration. Perbarui nilai kunci message.

   Tombol	Nilai	Etiket	Jenis konten
   pesan	Halo Dunia - Diperbarui!	Biarkan kosong	Biarkan kosong

4. Setelah sekitar 15 detik, refresh halaman selama beberapa kali dan pesan harus diperbarui.

   

Membersihkan sumber daya

Jika Anda tidak ingin terus menggunakan sumber daya yang dibuat dalam artikel ini, hapus grup sumber daya yang Anda buat di sini untuk menghindari biaya.

Penting

Penghapusan grup sumber daya tidak bisa dipulihkan. Grup sumber daya dan semua sumber daya yang ada di dalamnya akan dihapus secara permanen. Pastikan Anda tidak menghapus grup atau sumber daya yang salah secara tidak sengaja. Jika Anda membuat sumber daya untuk artikel ini dalam grup sumber daya yang ada yang berisi sumber daya lain yang ingin disimpan, hapus setiap sumber daya satu per satu dari panelnya masing-masing, bukan menghapus grup sumber daya.

1. Masuk ke portal Azure, lalu pilih Grup sumber daya.
2. Dalam kotak Filter menurut nama, masukkan nama grup sumber daya Anda.
3. Dalam daftar hasil, pilih nama grup sumber daya untuk melihat gambaran umum.
4. Pilih Hapus grup sumber daya.
5. Anda akan diminta untuk mengonfirmasi penghapusan grup sumber daya. Masukkan nama grup sumber daya Anda untuk mengonfirmasi, dan pilih Hapus.

Setelah beberapa saat, grup sumber daya dan semua sumber dayanya akan dihapus.

Langkah berikutnya

Dalam tutorial ini, Anda mengaktifkan aplikasi JavaScript untuk merefresh pengaturan konfigurasi secara dinamis dari Azure App Configuration. Untuk mempelajari cara menggunakan identitas terkelola Azure untuk menyederhanakan akses ke Azure App Configuration, lanjutkan ke tutorial berikutnya.

Integrasi identitas terkelola

Untuk rundown fitur lengkap pustaka penyedia konfigurasi JavaScript, lanjutkan ke dokumen berikut.

Penyedia konfigurasi JavaScript