Tutorial: Menambahkan Azure Content Delivery Network ke aplikasi web Azure App Service

Tutorial ini menunjukkan cara menambahkan Azure Content Delivery Network ke aplikasi web di Azure App Service. Aplikasi web adalah layanan untuk menghosting aplikasi web, REST API, dan back end seluler.

Berikut adalah beranda dari sampel situs HTML statis yang anda kerjakan:

Apa yang Anda pelajari:

Prasyarat

Untuk menyelesaikan tutorial ini:

• Pasang Git
• Instal Azure CLI

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Buat aplikasi web

Untuk membuat aplikasi web yang bekerja dengan Anda, ikuti mulai cepat HTML statis melalui langkah Telusuri ke aplikasi .

Masuk ke portal Microsoft Azure.

Buka browser dan masuk ke portal Azure.

Pengoptimalan akselerasi situs dinamis

Jika Anda ingin mengoptimalkan titik akhir jaringan pengiriman konten untuk akselerasi situs dinamis (DSA), Anda harus menggunakan portal jaringan pengiriman konten untuk membuat profil dan titik akhir Anda. Dengan pengoptimalan DSA, performa halaman web dengan konten dinamis ditingkatkan secara terukur. Untuk instruksi tentang cara mengoptimalkan titik akhir jaringan pengiriman konten untuk DSA dari portal jaringan pengiriman konten, lihat konfigurasi titik akhir jaringan pengiriman konten untuk mempercepat pengiriman file dinamis. Sebaliknya, jika Anda tidak ingin mengoptimalkan titik akhir baru, Anda bisa menggunakan portal aplikasi web untuk membuatnya dengan mengikuti langkah-langkah di bagian berikutnya.

Membuat profil dan titik akhir jaringan pengiriman konten

1. Di navigasi kiri, pilih App Services, lalu pilih aplikasi yang Anda buat di mulai cepat HTML statis.

2. Di halaman App Service , di bagian Pengaturan , pilih Jaringan > Azure CDN.

   

3. Di halaman Azure Content Delivery Network, berikan pengaturan Titik Akhir baru seperti yang ditentukan dalam tabel.

   Pengaturan	Nilai yang disarankan	Deskripsi
   profil jaringan pengiriman konten	myCDNProfile	Profil jaringan pengiriman konten adalah kumpulan titik akhir jaringan pengiriman konten dengan tingkat harga yang sama.
   Tingkat harga	Jaringan pengiriman konten Microsoft (klasik)	Tingkat harga menentukan penyedia dan fitur yang tersedia.
   nama titik akhir jaringan pengiriman konten	Nama apa pun yang unik di domain azureedge.net	Anda mengakses sumber daya yang singgahan anda di domain < endpointname >.azureedge.net.

4. Pilih Buat untuk membuat profil jaringan pengiriman konten. Azure membuat profil dan titik akhir. Titik akhir baru muncul di daftar Titik Akhir, dan ketika disediakan, statusnya Berjalan.

   

Menguji titik akhir jaringan pengiriman konten

Karena perlu waktu bagi pendaftaran untuk disebarluaskan, titik akhir tidak segera tersedia untuk digunakan. Untuk profil Azure CDN Standard dari Microsoft (klasik), penyebaran biasanya selesai dalam waktu 10 menit.

Aplikasi sampel memiliki file index.html dan folder css, img, dan js yang berisi aset statis lainnya. Jalur konten untuk semua file ini sama di titik akhir jaringan pengiriman konten. Misalnya, kedua URL berikut ini mengakses file bootstrap.css di folder css:

http://<appname>.azurewebsites.net/css/bootstrap.css

http://<endpointname>.azureedge.net/css/bootstrap.css

Navigasikan browser ke URL berikut:

http://<endpointname>.azureedge.net/index.html

Anda melihat halaman yang sama dengan yang Anda jalankan sebelumnya di aplikasi web Azure. Azure Content Delivery Network telah mengambil aset aplikasi web asal dan melayaninya dari titik akhir jaringan pengiriman konten

Untuk memastikan bahwa halaman ini di-cache di jaringan pengiriman konten, refresh halaman. Dua permintaan untuk aset yang sama terkadang diperlukan untuk jaringan pengiriman konten untuk menyimpan konten yang diminta.

Untuk informasi selengkapnya tentang membuat profil dan titik akhir Azure Content Delivery Network, lihat Mulai menggunakan Azure Content Delivery Network.

Menghapus menyeluruh jaringan pengiriman konten

Jaringan pengiriman konten secara berkala me-refresh sumber dayanya dari aplikasi web asal berdasarkan konfigurasi time to live (TTL). TTL default adalah tujuh hari.

Terkadang Anda mungkin perlu me-refresh jaringan pengiriman konten sebelum TTL kedaluwarsa; misalnya, saat Anda menyebarkan konten yang diperbarui ke aplikasi web. Untuk memicu refresh, hapus menyeluruh sumber daya jaringan pengiriman konten secara manual.

Di bagian tutorial ini, Anda menyebarkan perubahan ke aplikasi web dan menghapus menyeluruh jaringan pengiriman konten untuk memicu jaringan pengiriman konten untuk merefresh cache-nya.

Menyebarkan perubahan ke aplikasi web

Buka file index.html dan tambahkan - V2 ke judul H1, seperti yang diperlihatkan dalam contoh berikut:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

Lakukan perubahan Anda dan sebarkan ke aplikasi web.

git commit -am "version 2"
git push azure main

Setelah penyebaran selesai, telusuri ke URL aplikasi web untuk melihat perubahan.

http://<appname>.azurewebsites.net/index.html

Jika Anda menelusuri KE URL titik akhir jaringan pengiriman konten untuk halaman beranda, Anda tidak melihat perubahan karena versi cache di jaringan pengiriman konten belum kedaluwarsa.

http://<endpointname>.azureedge.net/index.html

Menghapus menyeluruh jaringan pengiriman konten di portal

Untuk memicu jaringan pengiriman konten untuk memperbarui versi cache-nya, hapus menyeluruh jaringan pengiriman konten.

1. Di navigasi kiri portal, pilih Grup sumber daya, lalu pilih grup sumber daya yang Anda buat untuk aplikasi web Anda (myResourceGroup).

2. Dalam daftar sumber daya, pilih titik akhir jaringan pengiriman konten Anda.

3. Di bagian atas halaman Titik Akhir, pilih Pembersihan menyeluruh.

   

4. Masukkan jalur konten yang ingin Anda bersihkan secara menyeluruh. Anda dapat melewati jalur file lengkap untuk membersihkan file individual, atau segmen jalur untuk membersihkan dan menyegarkan semua konten dalam folder. Karena Anda mengubah index.html, pastikan ada di salah satu jalur. Di bagian bawah halaman, pilih Bersihan menyeluruh.

   

Verifikasi bahwa jaringan pengiriman konten diperbarui

Tunggu sampai permintaan pembersihan selesai diproses, yang biasanya perlu beberapa menit. Untuk melihat status saat ini, pilih ikon bel di bagian atas halaman.

Saat menelusuri KE URL titik akhir jaringan pengiriman konten untuk index.html, Anda akan melihat V2 yang Anda tambahkan ke judul di halaman beranda, yang menunjukkan bahwa cache jaringan pengiriman konten telah disegarkan.

http://<endpointname>.azureedge.net/index.html

Untuk informasi selengkapnya, lihat Menghapus menyeluruh titik akhir Azure Content Delivery Network.

Menggunakan string kueri untuk versi konten

Azure Content Delivery Network menawarkan opsi perilaku penembolokan berikut:

• Mengabaikan string kueri
• Melewati caching untuk string kueri
• Cache setiap URL unik

Opsi pertama adalah default, yang berarti hanya ada satu versi aset yang di-cache terlepas dari string kueri di URL.

Di bagian tutorial ini, Anda mengubah perilaku penembolokan untuk melakukan cache setiap URL unik.

Mengubah perilaku singgahan

1. Di halaman Titik Akhir CDN portal Azure, pilih Singgahan.

2. Pilih Cache setiap URL unik dari daftar dropdown Perilaku penembolokan string kueri.

3. Pilih Simpan.

   

Pastikan URL unik di-cache secara terpisah

Di browser, navigasikan ke halaman beranda di titik akhir jaringan pengiriman konten, dan sertakan string kueri:

http://<endpointname>.azureedge.net/index.html?q=1

Azure Content Delivery Network mengembalikan konten aplikasi web saat ini, yang mencakup V2 dalam judul.

Untuk memastikan bahwa halaman ini di-cache di jaringan pengiriman konten, refresh halaman.

Buka index.html, ubah V2 ke V3, lalu sebarkan perubahan.

git commit -am "version 3"
git push azure main

Di browser, buka URL titik akhir jaringan pengiriman konten dengan string kueri baru, seperti q=2. Azure Content Delivery Network mendapatkan file index.html saat ini dan menampilkan V3. Namun, jika Anda menavigasi ke titik akhir jaringan pengiriman konten dengan q=1 string kueri, Anda akan melihat V2.

http://<endpointname>.azureedge.net/index.html?q=2

http://<endpointname>.azureedge.net/index.html?q=1

Output ini menampilkan bahwa setiap string kueri diperlakukan secara berbeda:

• q=1 digunakan sebelumnya, sehingga konten yang di-cache dikembalikan (V2).
• q=2 baru, sehingga konten aplikasi web terbaru diambil dan dikembalikan (V3).

Untuk informasi selengkapnya, lihat Mengontrol perilaku penembolokan Azure Content Delivery Network dengan string kueri.

Membersihkan sumber daya

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Jika Anda tidak membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah berikut ini di Cloud Shell:

az group delete --name myResourceGroup

Perintah ini mungkin perlu waktu beberapa saat untuk dijalankan.

Langkah berikutnya

Apa yang Anda pelajari:

Pelajari cara mengoptimalkan performa jaringan pengiriman konten di artikel berikut: