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 tingkat perusahaan, integrasi terkelola 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:

• Perubahan konfigurasi nol
• 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:

• Membatasi asal 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

• Domain kustom yang dikonfigurasi untuk aplikasi web statis Anda dengan time to live (TTL) diatur ke kurang dari 48 jam.
• Aplikasi yang disebarkan dengan Azure Static Web Apps yang menggunakan rencana hosting Standard.

Mengaktifkan tepi tingkat perusahaan pada sumber daya Static Web Apps

Portal Azure

1. Buka aplikasi web statis Anda di portal Azure.

2. Pilih Tepi tingkat perusahaan di menu sebelah 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 tepi tingkat perusahaan untuk pemuatan halaman yang lebih cepat, keamanan yang ditingkatkan, dan keandalan yang dioptimalkan untuk aplikasi global.

Membuat profil 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 Buat>profil 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 penembolokan .
   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 penimpaan ini dengan tindakan ambil alih 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.

Menambahkan kondisi

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

2. Pilih Tambahkan.

3. Di kotak teks Nama kumpulan 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. Pilih tidak ada opsi dari menu dropdown Transformasi string.

Menambahkan tindakan

1. Pilih menu dropdown Tambahkan tindakan.

2. Pilih Penimpaan konfigurasi rute.

3. Pilih Dinonaktifkan di menu dropdown Penembolokan.

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 Seperangkat aturan, lalu tautan Tidak Terkait .

   

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

3. Lalu pilih Kaitkan.

   

Salin ID Front Door

Gunakan langkah-langkah berikut untuk menyalin pengidentifikasi unik 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
• Menonaktifkan penembolokan 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 forwardingGateway bagian dalam file konfigurasi Anda, tambahkan requiredHeaders bagian dan tentukan X-Azure-FDID header. 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 penembolokan Azure Front Door dengan menambahkan "Cache-Control": "no-store" ke definisi header rute.

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

Dengan konfigurasi ini, situs Anda tidak lagi tersedia melalui *.azurestaticapps.net nama host yang dihasilkan, tetapi secara eksklusif melalui nama host yang dikonfigurasi dalam instans 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. Lihat Menambahkan 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 pemeriksaan kondisi.

• 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 terkena dampak untuk memastikan file terbaru 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