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:
- Membuat titik akhir jaringan pengiriman konten.
- Refresh aset singgahan.
- Menggunakan string kueri untuk mengontrol versi yang singgahan.
Prasyarat
Untuk menyelesaikan tutorial ini:
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. Untuk profil Azure CDN dari Edgio , Anda tidak dapat mengubah pengoptimalan titik akhir jaringan pengiriman konten setelah dibuat.
Membuat profil dan titik akhir jaringan pengiriman konten
Di navigasi kiri, pilih App Services, lalu pilih aplikasi yang Anda buat di mulai cepat HTML statis.
Di halaman App Service, di bagian Pengaturan, pilih Jaringan > Azure CDN.
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. |
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 merambat, titik akhir tidak segera tersedia untuk digunakan:
- Untuk profil Azure CDN Standard dari Microsoft (klasik), penyebaran biasanya selesai dalam 10 menit.
- Untuk profil Azure CDN Standard dari Edgio dan Azure CDN Premium dari Edgio , penyebaran biasanya selesai dalam waktu 90 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.
Di navigasi kiri portal, pilih Grup sumber daya, lalu pilih grup sumber daya yang Anda buat untuk aplikasi web Anda (myResourceGroup).
Dalam daftar sumber daya, pilih titik akhir jaringan pengiriman konten Anda.
Di bagian atas halaman Titik Akhir, pilih Pembersihan menyeluruh.
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
Di halaman Titik Akhir CDN portal Azure, pilih Singgahan.
Pilih Cache setiap URL unik dari daftar dropdown Perilaku penembolokan string kueri.
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:
- Membuat titik akhir jaringan pengiriman konten.
- Refresh aset singgahan.
- Menggunakan string kueri untuk mengontrol versi yang singgahan.
Pelajari cara mengoptimalkan performa jaringan pengiriman konten di artikel berikut: