Tutorial: Mengonfigurasi CDN untuk Azure Static Web Apps

Dengan menambahkan Azure Front Door sebagai CDN untuk aplikasi web statis Anda, Anda mendapat manfaat dari titik masuk yang aman untuk pengiriman cepat aplikasi web Anda.

Dengan Static Web Apps, Anda memiliki dua opsi untuk diintegrasikan dengan Azure Front Door. Anda dapat menambahkan Azure Front Door ke aplikasi web statis Anda dengan mengaktifkan edge kelas perusahaan, integrasi yang dikelola Azure Front Door dengan Static Web Apps. Atau, Anda dapat mengonfigurasi sumber daya Azure Front Door secara manual di depan aplikasi web statis Anda.

Pertimbangkan keuntungan di bawah ini untuk menentukan opsi mana yang paling sesuai dengan kebutuhan Anda.

Edge tingkat perusahaan menyediakan:

• Tanpa perubahan konfigurasi
• Tidak ada waktu henti
• Sertifikasi SSL yang dikelola secara otomatis dan domain kustom

Penyiapan Azure Front Door manual memberi Anda kontrol penuh atas konfigurasi CDN termasuk kesempatan untuk:

• Batasi lalu lintas berdasarkan asal
• Menambahkan firewall aplikasi web (WAF)
• Merutekan di beberapa aplikasi
• Menggunakan fitur Azure Front Door yang lebih canggih

Dalam tutorial ini, Anda belajar menambahkan Azure Front Door ke aplikasi web statis Anda.

Prasyarat

• Microsoft.Cdn terdaftar.
• Domain kustom telah dikonfigurasi untuk aplikasi web statis Anda dengan masa hidup (TTL) yang diatur kurang dari 48 jam.
• Aplikasi yang disebarkan dengan Azure Static Web Apps yang menggunakan rencana hosting Standard.

Mengaktifkan fitur tingkat perusahaan di sumber daya Static Web Apps

Portal Azure

1. Buka aplikasi web statis Anda di portal Azure.

2. Pilih Edge kelas perusahaan di menu kiri.

3. Centang kotak berlabel Aktifkan tepi tingkat perusahaan.

4. Pilih Simpan.

5. Pilih OK untuk mengonfirmasi penyimpanan.

   Mengaktifkan fitur ini dikenakan biaya tambahan.

Azure CLI

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

Prasyarat

• Akun Azure dengan langganan aktif. Membuat akun secara gratis
• Situs Azure Static Web Apps. Membangun aplikasi web statis pertama Anda
• Paket Azure Static Web Apps Standard dan Azure Front Door Standard/ Premium. Untuk informasi selengkapnya, lihat Harga Static Web Apps
• Pertimbangkan untuk menggunakan edge berkelas perusahaan untuk pemuatan halaman yang lebih cepat, keamanan yang ditingkatkan, dan keandalan yang lebih dioptimalkan untuk aplikasi global.

Membuat Azure Front Door

1. Masuk ke portal Azure.

2. Dari beranda atau menu Azure, pilih + Buat sumber daya. Cari profil Front Door dan CDN, lalu pilih > Front Door dan CDN.

3. Pada halaman Bandingkan penawaran, pilih Buat cepat, lalu pilih Lanjutkan untuk membuat Front Door.

4. Pada halaman Buat profil Front Door, masukkan atau pilih pengaturan berikut.

   Pengaturan	Nilai
   Langganan	Pilih langganan Azure Anda.
   Grup sumber daya	Masukkan nama grup sumber daya. Nama ini sering merupakan nama grup yang sama yang digunakan oleh aplikasi web statis Anda.
   Lokasi grup sumber daya	Jika Anda membuat grup sumber daya baru, masukkan lokasi terdekat Anda.
   Nama	Masukkan my-static-web-app-front-door.
   Tingkat	Pilih Standar.
   Nama titik akhir 2	Masukkan nama unik untuk host Front Door Anda.
   Jenis Asal	Pilih Aplikasi Web Statis.
   Nama host asal	Pilih nama host aplikasi web statis Anda dari menu dropdown.
   penembolokan	Centang kotak Aktifkan cache.
   Perilaku penembolokan untai (karakter) kueri	Pilih Gunakan String Kueri
   Kompresi	Pilih Aktifkan pemadatan
   Kebijakan WAF	Pilih Buat baru atau pilih kebijakan Web Application Firewall yang ada dari menu dropdown jika Anda ingin mengaktifkan fitur ini.

   Catatan

   Saat membuat profil Azure Front Door, Anda harus memilih asal dari langganan yang sama tempat Front Door dibuat.

5. Pilih Tinjau + buat, lalu pilih Buat. Proses pembuatan mungkin memerlukan waktu beberapa menit untuk diselesaikan.

6. Saat penyebaran selesai, pilih Buka sumber daya.

7. Tambahkan kondisi.

Menonaktifkan cache untuk alur kerja autentikasi

Catatan

Kedaluwarsa cache, string kueri kunci cache, dan tindakan penimpaan grup asal tidak digunakan lagi. Tindakan ini masih dapat berfungsi secara normal, tetapi seperangkat aturan Anda tidak dapat berubah. Ganti penggantian ini dengan tindakan penggantian konfigurasi rute baru sebelum mengubah seperangkat aturan Anda.

Tambahkan pengaturan berikut untuk menonaktifkan kebijakan penembolokan Front Door agar tidak mencoba menyimpan halaman terkait autentikasi dan otorisasi.

Tambahkan kondisi

1. Dari Front Door Anda, di bawah Pengaturan, pilih Set aturan.

2. Pilih Tambahkan.

3. Di kotak teks Nama himpunan aturan, masukkan Keamanan.

4. Di kotak teks Nama aturan, masukkan NoCacheAuthRequests.

5. Pilih Tambahkan kondisi.

6. Pilih Jalur permintaan.

7. Pilih menu drop-down Operator, lalu Dimulai Dengan.

8. Pilih tautan Edit di atas kotak teks Nilai.

9. Masukkan /.auth di kotak teks, lalu pilih Perbarui.

10. Jangan pilih opsi apa pun dari Transformasi string menu dropdown.

Menambahkan tindakan

1. Pilih menu dropdown Tambahkan tindakan.

2. Pilih Penimpaan konfigurasi rute.

3. Pilih Dinonaktifkan di menu dropdown Cache.

4. Pilih Simpan.

Mengaitkan aturan ke titik akhir

Sekarang setelah aturan dibuat, terapkan aturan ke titik akhir Front Door.

1. Dari Front Door Anda, pilih Set Aturan, lalu tautan Tidak Berhubungan.

   

2. Pilih nama titik akhir yang ingin Anda terapkan aturan caching, lalu pilih Berikutnya.

3. Lalu pilih Kaitkan.

   

Salin ID Pintu Depan

Gunakan langkah-langkah berikut untuk menyalin ID unik dari instans Front Door.

1. Dari Front Door Anda, pilih tautan Gambaran Umum di navigasi sebelah kiri.

2. Salin nilai berlabel ID Front Door dan tempelkan ke dalam file untuk digunakan nanti.

   

Memperbarui konfigurasi aplikasi web statis

Untuk menyelesaikan integrasi dengan Front Door, Anda perlu memperbarui file konfigurasi aplikasi untuk melakukan fungsi berikut:

• Batasi lalu lintas ke situs Anda hanya melalui Front Door
• Batasi lalu lintas ke situs Anda hanya dari instans Front Door Anda
• Tentukan domain mana yang dapat mengakses situs Anda
• Nonaktifkan cache untuk rute aman

Buka file staticwebapp.config.json untuk situs Anda dan buat perubahan berikut.

1. Batasi lalu lintas untuk hanya menggunakan Front Door dengan menambahkan bagian berikut ke file konfigurasi:

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. Untuk menentukan instans dan domain Azure Front Door mana yang dapat mengakses situs Anda, tambahkan forwardingGateway bagian tersebut.

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   Pertama, konfigurasikan aplikasi Anda untuk hanya mengizinkan lalu lintas dari instans Front Door Anda. Dalam setiap permintaan backend, Front Door secara otomatis menambahkan X-Azure-FDID header yang berisi ID instans Front Door Anda. Dengan mengonfigurasi aplikasi web statis Anda untuk memerlukan header ini, aplikasi ini membatasi lalu lintas secara eksklusif ke instans Front Door Anda. Di bagian forwardingGateway dalam file konfigurasi Anda, tambahkan bagian requiredHeaders dan tentukan header X-Azure-FDID. Ganti <YOUR-FRONT-DOOR-ID> dengan ID Front Door yang Anda tetapkan sebelumnya.

   Selanjutnya, tambahkan nama host Azure Front Door (bukan nama host Azure Static Web Apps) ke dalam allowedForwardedHosts array. Jika Anda memiliki domain kustom yang dikonfigurasi dalam instans Front Door Anda, sertakan juga dalam daftar ini.

   Dalam contoh ini, ganti my-sitename.azurefd.net dengan nama host Azure Front Door untuk situs Anda.

3. Untuk semua rute aman di aplikasi Anda, nonaktifkan penyimpanan sementara Azure Front Door dengan menambahkan "Cache-Control": "no-store" pada definisi header rute.

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

Dengan konfigurasi ini, situs Anda tidak lagi tersedia melalui nama host *.azurestaticapps.net yang dihasilkan, tetapi hanya melalui nama host yang dikonfigurasi dalam instance Front Door Anda.

Pertimbangan

• Domain kustom: Setelah Front Door mengelola situs Anda, Anda tidak lagi menggunakan fitur domain kustom Azure Static Web Apps. Azure Front Door memiliki proses terpisah untuk menambahkan domain kustom. Rujuk pada Tambahkan domain kustom ke Front Door Anda. Saat Anda menambahkan domain kustom ke Front Door, Anda harus memperbarui file konfigurasi aplikasi web statis Anda untuk memasukkannya ke dalam allowedForwardedHosts daftar.

• Statistik lalu lintas: Secara default, Azure Front Door mengonfigurasi pemeriksaan kesehatan yang dapat memengaruhi statistik lalu lintas Anda. Anda mungkin ingin mengedit nilai default untuk probes kesehatan.

• Melayani versi lama: Saat Anda menyebarkan pembaruan ke file yang ada di aplikasi web statis Anda, Azure Front Door mungkin terus melayani versi file yang lebih lama hingga waktu hidupnya kedaluwarsa. Bersihkan cache Azure Front Door untuk jalur yang terpengaruh agar file terbaru dapat disajikan.

Membersihkan sumber daya

Jika Anda tidak lagi ingin menggunakan sumber daya yang dibuat dalam tutorial ini, hapus instans Azure Static Web Apps dan Azure Front Door.

Langkah berikutnya

Menambahkan API