Konfigurasikan Azure Static Web Apps

Artikel
05/02/2024

Anda dapat menentukan konfigurasi untuk Azure Static Web Apps dalam file staticwebapp.config.json , yang mengontrol pengaturan berikut:

Perutean
Autentikasi
Authorization
Aturan fallback
Penimpaan respons HTTP
Definisi header HTTP global
Jenis MIME kustom
Jaringan

Catatan

routes.json yang sebelumnya digunakan untuk mengonfigurasi perutean tidak digunakan lagi. Gunakan staticwebapp.config.json seperti yang dijelaskan dalam artikel ini untuk mengonfigurasi perutean dan pengaturan lain untuk aplikasi web statis Anda.

Dokumen ini menjelaskan cara mengonfigurasi Azure Static Web Apps, yang merupakan produk mandiri dan terpisah dari fitur hosting situs web statis Azure Storage.

Lokasi file

Lokasi yang direkomendasikan untuk staticwebapp.config.json berada di folder yang diatur sebagai app_location di file alur kerja. Namun, Anda dapat menempatkan file di subfolder apa pun dalam folder yang ditetapkan sebagai app_location. Selain itu, jika ada langkah build, Anda harus memastikan bahwa langkah build menghasilkan file ke akar output_location.

Lihat file contoh konfigurasi untuk detailnya.

Penting

File routes.json yang tidak digunakan lagi diabaikan jikastaticwebapp.config.json ada.

Rute

Anda dapat menentukan aturan untuk satu atau beberapa rute di aplikasi web statis Anda. Aturan rute memungkinkan Anda membatasi akses ke pengguna dalam peran tertentu atau melakukan tindakan seperti pengalihan atau penulisan ulang. Rute didefinisikan sebagai array aturan perutean. Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Aturan ditentukan dalam array routes, bahkan jika Anda hanya memiliki satu rute.
Aturan dievaluasi dalam urutan saat muncul dalam routes array.
Evaluasi aturan berhenti pada kecocokan pertama. Kecocokan route terjadi ketika properti dan nilai dalam methods array (jika ditentukan) cocok dengan permintaan. Setiap permintaan dapat mencocokkan paling banyak satu aturan.

Perhatian perutean tumpang tindih secara signifikan dengan konsep autentikasi (mengidentifikasi pengguna) dan otorisasi (menetapkan kemampuan kepada pengguna). Pastikan untuk membaca panduan autentikasi dan otorisasi bersama dengan artikel ini.

Menentukan rute

Setiap aturan terdiri dari pola rute, bersama satu atau beberapa properti aturan opsional. Aturan rute ditentukan dalam array routes. Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Penting

route Hanya properti dan methods (jika ditentukan) yang digunakan untuk menentukan apakah aturan cocok dengan permintaan.

Properti aturan	Wajib	Nilai default	Komentar
`route`	Ya	n/a	Pola rute yang diminta oleh penelepon. Wildcard didukung di akhir jalur rute. Misalnya, rute /admin* cocok dengan rute apa pun yang dimulai dengan /admin.
`methods`	No	Semua metode	Menentukan array metode permintaan yang cocok dengan rute. Metode yang tersedia meliputi: `GET`, `HEAD`, `POST`, `PUT`, `DELETE`, `CONNECT`, `OPTIONS`, `TRACE`, dan `PATCH`.
`rewrite`	No	n/a	Menentukan file atau jalur yang diberikan dari permintaan. Saling eksklusif untuk satu aturan `redirect`. Menulis ulang aturan tidak mengubah lokasi browser. Nilai harus relatif terhadap akar aplikasi.
`redirect`	No	n/a	Menentukan tujuan pengalihan file atau jalur untuk permintaan. Saling eksklusif untuk satu aturan `rewrite`. Aturan pengalihan mengubah lokasi browser. Kode respons default adalah `302` (pengalihan sementara), tetapi Anda dapat mengesampingkannya dengan `301` (pengalihan permanen).
`statusCode`	No	`301` atau `302` untuk pengalihan	Kode status HTTP respons.
`headers`	No	n/a	Kumpulan header HTTP ditambahkan ke respons. Header khusus rute mengambil alih `globalHeaders` saat header khusus rute sama seperti header global yang berada dalam respons. Untuk menghapus header, atur nilai ke string kosong.
`allowedRoles`	No	anonim	Menentukan array nama peran yang diperlukan untuk mengakses rute. Karakter yang valid termasuk `a-z`, `A-Z`, `0-9`, dan `_`. Peran bawaan, `anonymous`, berlaku untuk semua pengguna. Peran bawaan, `authenticated`, berlaku untuk pengguna yang masuk. Pengguna harus menjadi bagian dari setidaknya satu peran. Peran dicocokkan berdasarkan OR. Jika pengguna menjadi bagian dari salah satu peran yang tercantum, akses akan diberikan. Tiap-tiap pengguna dikaitkan dengan peran melalui undangan.

Setiap properti memiliki tujuan khusus dalam alur permintaan/respons.

Tujuan	Properti
Cocokkan rute	`route`, `methods`
Proses setelah aturan dicocokkan dan diotorisasi	`rewrite` (memodifikasi permintaan) `redirect`, `headers`, `statusCode` (memodifikasi respons)
Otorisasi setelah rute dicocokkan	`allowedRoles`

Tentukan pola rute

Properti route dapat menjadi rute yang tepat atau pola kartubebas.

Rute yang tepat

Untuk menentukan rute yang tepat, tempatkan jalur lengkap file di route properti .

{
  "route": "/profile/index.html",
  "allowedRoles": ["authenticated"]
}

Aturan ini cocok dengan permintaan untuk file /profile/index.html. Karena index.html adalah file default, aturan juga cocok dengan permintaan untuk folder (/profile atau /profile/).

Penting

Jika Anda menggunakan jalur folder (/profile atau ) di route properti , jalur tersebut tidak akan cocok dengan permintaan untuk file /profile/index.html/profile/. Saat melindungi rute yang melayani file, selalu gunakan jalur lengkap file seperti /profile/index.html.

Pola wildcard

Aturan kartubebas cocok dengan semua permintaan dalam pola rute, dan hanya didukung di akhir jalur. Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Misalnya, untuk menerapkan rute untuk aplikasi kalender, Anda dapat menulis ulang semua URL yang termasuk dalam rute kalender untuk melayani satu file.

{
  "route": "/calendar*",
  "rewrite": "/calendar.html"
}

File calendar.html kemudian dapat menggunakan perutean sisi klien untuk menyajikan tampilan yang berbeda untuk variasi URL seperti /calendar/january/1, /calendar/2020, dan /calendar/overview.

Catatan

Pola rute cocok dengan /calendar/* semua permintaan di bawah jalur /calendar/ . Namun, ini tidak akan cocok dengan permintaan untuk jalur /kalender atau /calendar.html. Gunakan /calendar* untuk mencocokkan semua permintaan yang dimulai dengan /calendar.

Anda dapat memfilter wildcard yang cocok menggunakan ekstensi file. Misalnya, jika Anda ingin menambahkan aturan yang hanya cocok dengan file HTML di jalur tertentu, Anda dapat membuat aturan berikut:

{
  "route": "/articles/*.html",
  "headers": {
    "Cache-Control": "public, max-age=604800, immutable"
  }
}

Untuk memfilter beberapa ekstensi file, Anda menyertakan opsi-opsinya dalam kurung kurawal, seperti yang diperlihatkan dalam contoh ini:

{
  "route": "/images/thumbnails/*.{png,jpg,gif}",
  "headers": {
    "Cache-Control": "public, max-age=604800, immutable"
  }
}

Kasus penggunaan umum untuk rute wildcard meliputi:

Menyajikan file tertentu untuk seluruh pola jalur
Menegakkan aturan autentikasi dan otorisasi
Menerapkan aturan penembolokan khusus

Rute aman dengan peran

Rute diamankan dengan menambahkan satu atau beberapa nama peran ke dalam larik allowedRoles di aturan. Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Penting

Aturan perutean hanya dapat mengamankan permintaan HTTP ke rute yang dilayani dari Static Web Apps. Banyak kerangka kerja front-end menggunakan perutean sisi klien yang memodifikasi rute di browser tanpa mengeluarkan permintaan ke Static Web Apps. Aturan perutean tidak mengamankan rute sisi klien. Klien harus memanggil API HTTP untuk mengambil data sensitif. Pastikan API memvalidasi identitas pengguna sebelum mengembalikan data.

Secara default, setiap pengguna termasuk dalam peran anonymous bawaan, dan semua pengguna yang masuk adalah anggota peran authenticatedtersebut. Jika ingin, pengguna dikaitkan dengan peran khusus melalui undangan.

Misalnya, untuk membatasi sebuah rute agar hanya dapat diakses oleh pengguna yang diautentikasi, tambahkan peran authenticated bawaan ke larik allowedRoles.

{
  "route": "/profile*",
  "allowedRoles": ["authenticated"]
}

Anda dapat membuat peran baru sesuai kebutuhan dalam larik allowedRoles. Untuk membatasi sebuah rute hanya ke administrator, Anda dapat menentukan peran Anda sendiri yang bernama administrator, dalam array allowedRoles.

{
  "route": "/admin*",
  "allowedRoles": ["administrator"]
}

Anda memiliki kendali penuh atas nama peran; tidak ada daftar yang harus dipatuhi oleh peran Anda.
Tiap-tiap pengguna dikaitkan dengan peran melalui undangan.

Penting

Saat mengamankan konten, tentukan file yang tepat jika memungkinkan. Jika Anda memiliki banyak file untuk diamankan, gunakan kartubebas setelah awalan bersama. Misalnya: /profile* mengamankan semua kemungkinan rute yang dimulai dengan /profile, termasuk /profile.

Membatasi akses ke seluruh aplikasi

Anda sering kali ingin memerlukan autentikasi untuk setiap rute dalam aplikasi Anda. Untuk mengunci rute Anda, tambahkan aturan yang cocok dengan semua rute dan sertakan peran bawaan authenticatedallowedRoles dalam array.

Contoh konfigurasi berikut memblokir akses anonim dan mengalihkan semua pengguna yang tidak diautentikasi ke halaman masuk Microsoft Entra.

{
  "routes": [
    {
      "route": "/*",
      "allowedRoles": ["authenticated"]
    }
  ],
  "responseOverrides": {
    "401": {
      "statusCode": 302,
      "redirect": "/.auth/login/aad"
    }
  }
}

Catatan

Secara default, semua penyedia identitas yang telah dikonfigurasi sebelumnya diaktifkan. Untuk memblokir penyedia autentikasi, lihat Autentikasi dan otorisasi.

Rute fallback

Aplikasi Satu Halaman sering mengandalkan perutean sisi klien. Aturan perutean sisi klien ini memperbarui lokasi jendela browser tanpa membuat permintaan kembali ke server. Jika Anda me-refresh halaman, atau langsung masuk ke URL yang dihasilkan oleh aturan perutean sisi klien, rute fallback sisi server diperlukan untuk melayani halaman HTML yang sesuai. Halaman fallback sering ditunjuk sebagai index.html untuk aplikasi sisi klien Anda.

Anda dapat menentukan aturan fallback dengan menambahkan bagian navigationFallback. Contoh berikut mengembalikan /index.html untuk semua permintaan file statis yang tidak cocok dengan file yang disebarkan.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Anda dapat mengontrol permintaan mana yang menampilkan file fallback dengan menentukan filter. Di contoh berikut, permintaan untuk rute tertentu dalam folder /images dan semua file dalam folder /css dikecualikan dari menampilkan file fallback.

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  }
}

Misalnya, dengan struktur direktori berikut, aturan fallback navigasi di atas akan menghasilkan hasil yang dirinci dalam tabel berikut.

├── images
│   ├── logo.png
│   ├── headshot.jpg
│   └── screenshot.gif
│
├── css
│   └── global.css
│
└── index.html

Permintaan ke...	mengembalikan...	dengan status...
/about/	File /index.html .	`200`
/images/logo.png	File gambar.	`200`
/images/icon.svg	File /index.html - karena ekstensi file svg tidak tercantum dalam `/images/*.{png,jpg,gif}` filter.	`200`
/images/unknown.png	Kesalahan file tidak ditemukan.	`404`
/css/unknown.css	Kesalahan file tidak ditemukan.	`404`
/css/global.css	File lembar gaya.	`200`
File lain di luar folder /images atau /css	File /index.html .	`200`

Penting

Jika Anda melakukan migrasi dari file routes.json yang tidak digunakan lagi, jangan menyertakan rute fallback warisan ("route": "/*") di aturan perutean.

Header global

Bagian ini globalHeaders menyediakan sekumpulan header HTTP yang diterapkan ke setiap respons, kecuali ditimpa oleh aturan header rute, jika tidak, penyatuan kedua header dari rute dan header global dikembalikan.

Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Untuk menghapus header, atur nilai ke string kosong ("").

Beberapa kasus penggunaan umum untuk header global meliputi:

Aturan penembolokan (caching) kustom
Kebijakan keamanan
Pengaturan pengodean
Konfigurasi berbagi sumber daya lintas asal (CORS)

Contoh berikut mengimplementasikan konfigurasi CORS kustom.

{
  "globalHeaders": {
    "Access-Control-Allow-Origin": "https://example.com",
    "Access-Control-Allow-Methods": "POST, GET, OPTIONS"
  }
}

Catatan

Header global tidak memengaruhi respons API. Header dalam respons API dipertahankan dan dikembalikan ke klien.

Pengesampingan respons

Bagian responseOverrides ini memberikan kesempatan untuk menentukan respons kustom ketika server mengembalikan kode kesalahan. Lihat file konfigurasi contoh untuk contoh pemakaiannya.

Kode HTTP berikut ini tersedia untuk diambil alih:

Kode status	Makna	Kemungkinan penyebab
400	Permintaan Buruk	Tautan undangan tidak valid
401	Tidak diizinkan	Permintaan ke halaman terbatas saat tidak diautentikasi
403	Terlarang	Pengguna masuk tetapi tidak memiliki peran yang diperlukan untuk melihat halaman. Pengguna masuk tetapi runtime tidak bisa mendapatkan detail pengguna dari klaim identitas mereka. Terlalu banyak pengguna yang masuk ke situs dengan peran kustom, oleh karena itu runtime tidak dapat memasukkan pengguna.
404	Tidak ditemukan	File tidak ditemukan

Contoh konfigurasi berikut menunjukkan cara mengambil alih kode galat.

{
  "responseOverrides": {
    "400": {
      "rewrite": "/invalid-invitation-error.html"
    },
    "401": {
      "statusCode": 302,
      "redirect": "/login"
    },
    "403": {
      "rewrite": "/custom-forbidden-page.html"
    },
    "404": {
      "rewrite": "/custom-404.html"
    }
  }
}

Platform

Bagian ini platform mengontrol pengaturan khusus platform, seperti versi runtime bahasa API.

Pilih versi runtime bahasa API

Untuk mengonfigurasi versi runtime bahasa API, atur apiRuntime properti di bagian platform ke salah satu nilai yang didukung berikut.

Versi runtime bahasa	Sistem operasi	Versi Azure Functions	`apiRuntime` nilai	Tanggal akhir dukungan
.NET Core 3.1	Windows	3.x	`dotnet:3.1`	Sabtu, 03 Desember 2022
.NET 6.0 dalam proses	Windows	4.x	`dotnet:6.0`	-
.NET 6.0 terisolasi	Windows	4.x	`dotnet-isolated:6.0`	-
.NET 7.0 terisolasi	Windows	4.x	`dotnet-isolated:7.0`	-
.NET 8.0 terisolasi	Windows	4.x	`dotnet-isolated:8.0`	-
Node.js 12.x	Linux	3.x	`node:12`	Sabtu, 03 Desember 2022
Node.js 14.x	Linux	4.x	`node:14`	-
Node.js 16.x	Linux	4.x	`node:16`	-
Node.js 18.x	Linux	4.x	`node:18`	-
Python 3.8	Linux	4.x	`python:3.8`	-
Python 3.9	Linux	4.x	`python:3.9`	-
Python 3.10	Linux	4.x	`python:3.10`	-

.NET

Untuk mengubah versi runtime di aplikasi .NET, ubah TargetFramework nilai dalam file csproj . Meskipun opsional, jika Anda menetapkan nilai dalam file staticwebapp.config.json, pastikan nilainya cocok dengan apa yang Anda tentukan dalam file csproj.apiRuntime

Contoh berikut menunjukkan cara memperbarui TargetFramework elemen untuk NET 8.0 sebagai versi runtime bahasa API dalam file csproj .

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework>
    ...
  </PropertyGroup>
...

Node.js

Contoh konfigurasi berikut menunjukkan cara menggunakan apiRuntime properti untuk memilih Node.js 16 sebagai versi runtime bahasa API dalam file staticwebapp.config.json .

{
  ...
  "platform": {
    "apiRuntime": "node:16"
  }
  ...
}

Python

Contoh konfigurasi berikut menunjukkan cara menggunakan apiRuntime properti untuk memilih Python 3.8 sebagai versi runtime bahasa API dalam file staticwebapp.config.json .

{
  ...
  "platform": {
    "apiRuntime": "python:3.8"
  }
  ...
}

Jaringan

Bagian networking mengontrol konfigurasi jaringan aplikasi web statik Anda. Untuk membatasi akses ke aplikasi Anda, tentukan daftar blok alamat IP yang diizinkan di allowedIpRanges. Untuk informasi selengkapnya tentang jumlah blok alamat IP yang diizinkan, lihat Kuota di Azure Static Web Apps.

Catatan

Konfigurasi jaringan hanya tersedia dalam Azure Static Web Apps paket Standar.

Tentukan setiap blok alamat IPv4 dalam notasi Classless Inter-Domain Routing (CIDR). Untuk mempelajari notasi CIDR lebih lanjut, lihat Perutean Antar-Domain Tanpa Kelas. Setiap blok alamat IPv4 dapat menunjukkan ruang alamat publik atau pribadi. Jika Anda hanya ingin mengizinkan akses dari satu Alamat IP, Anda dapat menggunakan /32 blok CIDR.

{
  "networking": {
    "allowedIpRanges": [
      "10.0.0.0/24",
      "100.0.0.0/32",
      "192.168.100.0/22"
    ]
  }
}

Ketika satu atau beberapa blok alamat IP ditentukan, permintaan yang berasal dari alamat IP yang tidak cocok dengan nilai di ditolak allowedIpRanges aksesnya.

Selain pemblokiran alamat IP, Anda juga dapat menentukan tag layanan dalam array allowedIpRanges untuk membatasi lalu lintas ke layanan Azure tertentu.

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

Autentikasi

Penyedia autentikasi default tidak memerlukan pengaturan dalam file konfigurasi.
Penyedia autentikasi khusus menggunakan bagian auth dari file setelan.

Untuk detail tentang cara membatasi rute ke pengguna yang diautentikasi, lihat Mengamankan rute dengan peran.

Menonaktifkan cache untuk jalur terautentikasi

Jika Anda menyiapkan integrasi manual dengan Azure Front Door, Anda mungkin ingin menonaktifkan penembolokan untuk rute aman Anda. Dengan edge tingkat perusahaan diaktifkan, penembolokan sudah dinonaktifkan untuk rute aman Anda.

Untuk menonaktifkan penembolokan Azure Front Door untuk rute aman, tambahkan "Cache-Control": "no-store" ke definisi header rute.

Contohnya:

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

Penerusan gateway

Bagian ini forwardingGateway mengonfigurasi bagaimana aplikasi web statis diakses dari gateway penerusan seperti Content Delivery Network (CDN) atau Azure Front Door.

Catatan

Konfigurasi gateway penerusan hanya tersedia dalam paket Standar Azure Static Web Apps.

Host yang Diizinkan Diteruskan

Daftar allowedForwardedHosts menentukan nama host mana yang akan diterima di header X-Forwarded-Host. Jika domain yang cocok ada dalam daftar, Static Web Apps menggunakan X-Forwarded-Host nilai saat membuat URL pengalihan, seperti setelah berhasil masuk.

Agar Static Web Apps berfungsi dengan benar di belakang gateway penerusan, permintaan dari gateway harus menyertakan nama host yang benar di header X-Forwarded-Host dan nama host yang sama harus dicantumkan di allowedForwardedHosts.

"forwardingGateway": {
  "allowedForwardedHosts": [
    "example.org",
    "www.example.org",
    "staging.example.org"
  ]
}

Jika header X-Forwarded-Host tidak cocok dengan nilai dalam daftar, permintaan tetap berhasil, tetapi header tidak digunakan dalam tanggapan.

Header wajib

Header wajib adalah header HTTP yang harus dikirim bersama setiap permintaan ke situs Anda. Salah satu penggunaan header yang diperlukan adalah untuk menolak akses ke situs kecuali semua header yang diperlukan ada di setiap permintaan.

Misalnya, konfigurasi berikut menunjukkan bagaimana Anda dapat menambahkan pengenal unik untuk Azure Front Door yang membatasi akses ke situs Anda dari instance Azure Front Door tertentu. Lihat tutorial Konfigurasi Azure Front Door untuk detail lengkap.

"forwardingGateway": {
  "requiredHeaders": {
    "X-Azure-FDID" : "692a448c-2b5d-4e4d-9fcc-2bc4a6e2335f"
  }
}

Pasangan kunci/nilai dapat berupa rangkaian string arbitrer apa pun
Kunci tidak peka huruf besar-kecil
Nilai peka huruf besar/kecil

Garis miring berikutnya

Garis miring berikutnya adalah / di akhir URL. SECARA konvensional, URL garis miring berikutnya mengacu pada direktori di server web, sementara garis miring nontrailing menunjukkan file.

Mesin pencari memperlakukan dua URL secara terpisah, terlepas dari apakah itu file atau direktori. Ketika konten yang sama dirender di kedua URL ini, situs web Anda melayani konten duplikat, yang dapat berdampak negatif pada pengoptimalan mesin pencari (SEO). Saat dikonfigurasi secara eksplisit, Static Web Apps menerapkan serangkaian normalisasi URL dan aturan pengalihan yang membantu meningkatkan performa dan SEO situs web Anda.

Aturan normalisasi dan pengalihan berikut berlaku untuk setiap konfigurasi yang tersedia:

Selalu

Saat Anda mengatur trailingSlash ke always, semua permintaan yang tidak menyertakan garis miring berikutnya dialihkan ke URL garis miring berikutnya. Misalnya, /contact dialihkan ke /contact/.

"trailingSlash": "always"

Permintaan ke...	mengembalikan...	dengan status...	dan jalur...
/Tentang	File /about/index.html	`301`	/about/
/about/	File /about/index.html	`200`	/about/
/about/index.html	File /about/index.html	`301`	/about/
/Hubungi	File /contact.html	`301`	/Hubungi/
/Hubungi/	File /contact.html	`200`	/Hubungi/
/contact.html	File /contact.html	`301`	/Hubungi/

Tidak pernah

Saat mengatur trailingSlash ke never, semua permintaan yang berakhiran garis miring berikutnya dialihkan ke URL garis miring nontrailing. Misalnya, /contact/ dialihkan ke /contact.

"trailingSlash": "never"

Permintaan ke...	mengembalikan...	dengan status...	dan jalur...
/Tentang	File /about/index.html	`200`	/Tentang
/about/	File /about/index.html	`301`	/Tentang
/about/index.html	File /about/index.html	`301`	/Tentang
/Hubungi	File /contact.html	`200`	/Hubungi
/Hubungi/	File /contact.html	`301`	/Hubungi
/contact.html	File /contact.html	`301`	/Hubungi

Otomatis

Saat Anda mengatur trailingSlash ke auto, semua permintaan ke folder dialihkan ke URL dengan garis miring berikutnya. Semua permintaan ke file dialihkan ke URL garis miring nontrailing.

"trailingSlash": "auto"

Permintaan ke...	mengembalikan...	dengan status...	dan jalur...
/Tentang	File /about/index.html	`301`	/about/
/about/	File /about/index.html	`200`	/about/
/about/index.html	File /about/index.html	`301`	/about/
/Hubungi	File /contact.html	`200`	/Hubungi
/Hubungi/	File /contact.html	`301`	/Hubungi
/contact.html	File /contact.html	`301`	/Hubungi

Untuk performa situs web yang optimal, konfigurasikan strategi garis miring berikutnya menggunakan salah alwayssatu mode , , neveratau auto .

Secara default, saat konfigurasi dihilangkan trailingSlash , Static Web Apps menerapkan aturan berikut:

Permintaan ke...	mengembalikan...	dengan status...	dan jalur...
/Tentang	File /about/index.html	`200`	/Tentang
/about/	File /about/index.html	`200`	/about/
/about/index.html	File /about/index.html	`200`	/about/index.html
/Hubungi	File /contact.html	`200`	/Hubungi
/Hubungi/	File /contact.html	`301`	/Hubungi
/contact.html	File /contact.html	`200`	/contact.html

Contoh file konfigurasi

{
  "trailingSlash": "auto",
  "routes": [
    {
      "route": "/profile*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/admin/index.html",
      "allowedRoles": ["administrator"]
    },
    {
      "route": "/images/*",
      "headers": {
        "cache-control": "must-revalidate, max-age=15770000"
      }
    },
    {
      "route": "/api/*",
      "methods": ["GET"],
      "allowedRoles": ["registeredusers"]
    },
    {
      "route": "/api/*",
      "methods": ["PUT", "POST", "PATCH", "DELETE"],
      "allowedRoles": ["administrator"]
    },
    {
      "route": "/api/*",
      "allowedRoles": ["authenticated"]
    },
    {
      "route": "/customers/contoso*",
      "allowedRoles": ["administrator", "customers_contoso"]
    },
    {
      "route": "/login",
      "rewrite": "/.auth/login/github"
    },
    {
      "route": "/.auth/login/twitter",
      "statusCode": 404
    },
    {
      "route": "/logout",
      "redirect": "/.auth/logout"
    },
    {
      "route": "/calendar*",
      "rewrite": "/calendar.html"
    },
    {
      "route": "/specials",
      "redirect": "/deals",
      "statusCode": 301
    }
  ],
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
  },
  "responseOverrides": {
    "400": {
      "rewrite": "/invalid-invitation-error.html"
    },
    "401": {
      "redirect": "/login",
      "statusCode": 302
    },
    "403": {
      "rewrite": "/custom-forbidden-page.html"
    },
    "404": {
      "rewrite": "/404.html"
    }
  },
  "globalHeaders": {
    "content-security-policy": "default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none'"
  },
  "mimeTypes": {
    ".json": "text/json"
  }
}

Berdasarkan konfigurasi di atas, tinjau skenario berikut.

Permintaan ke...	menghasilkan...
/profile	File /profile/index.html disajikan kepada pengguna terautentikasi. Pengguna yang tidak diautentikasi dialihkan ke /login oleh aturan penimpaan `401` respons.
/admin, /admin/, atau /admin/index.html	Pengguna terautentikasi dalam peran administrator diberi file /admin/index.html. Pengguna terautentikasi yang tidak berada dalam peran administrator diberi `403` kesalahan¹. Pengguna yang tidak diautentikasi dialihkan ke /login
/images/logo.png	Menyajikan gambar dengan aturan cache khusus saat umur maksimalnya sedikit lebih dari 182 hari (15.770.000 detik).
/api/admin	Permintaan `GET` dari pengguna terautentikasi dalam peran registeredusers dikirim ke API. Pengguna terautentikasi yang tidak dalam peran registeredusers dan pengguna yang tidak diautentikasi diberi kesalahan `401`. Permintaan `POST`, `PUT`, `PATCH`, dan `DELETE` dari pengguna terautentikasi dalam peran administrator dikirim ke API. Pengguna terautentikasi yang tidak berada dalam peran administrator dan pengguna yang tidak diautentikasi diberi kesalahan `401`.
/customers/contoso	Pengguna terautentikasi yang termasuk dalam peran administrator atau customers_contoso diberii file /customers/contoso/index.html. Pengguna terautentikasi yang tidak berada dalam peran administrator atau customers_contoso diberi `403`kesalahan¹. Pengguna yang tidak diautentikasi dialihkan ke /login.
/login	Pengguna yang tidak terautentikasi diminta melakukan autentikasi dengan GitHub.
/.auth/login/twitter	Karena aturan rute menonaktifkan otorisasi Twitter , kesalahan `404` dikembalikan. Kesalahan ini kemudian kembali ke penyajian /index.html dengan `200` kode status.
/logout	Pengguna log keluar dari penyedia autentikasi mana pun.
/calendar/2021/01	Browser mendapatkan file /calendar.html.
/specials	Browser secara permanen dialihkan ke /deals.
/data.json	File disajikan dengan tipe MIME `text/json`.
/about, atau folder apa pun yang cocok dengan pola perutean sisi klien	File /index.html dilayani dengan kode status `200`.
File yang tidak ada di folder /images/	Sebuah kesalahan `404`.

¹ Anda bisa menyediakan halaman kesalahan kustom menggunakan aturan ambil alih respons.

Batasan

Batasan berikut ini ada untuk file staticwebapp.config.json.

Ukuran file maksimum adalah 20 KB
Maksimal 50 peran berbeda

Lihat artikel Kuota untuk batasan dan pembatasan umum.

Langkah berikutnya

Menyiapkan autentikasi dan otorisasi

Konfigurasikan Azure Static Web Apps

Lokasi file

Rute

Menentukan rute

Tentukan pola rute

Rute yang tepat

Pola wildcard

Rute aman dengan peran

Membatasi akses ke seluruh aplikasi

Rute fallback

Header global

Pengesampingan respons

Platform

Pilih versi runtime bahasa API

.NET

Node.js

Python

Jaringan

Autentikasi

Menonaktifkan cache untuk jalur terautentikasi

Penerusan gateway

Host yang Diizinkan Diteruskan

Header wajib

Garis miring berikutnya

Selalu

Tidak pernah

Otomatis

Contoh file konfigurasi

Batasan

Langkah berikutnya

Artikel terkait

Sumber Daya Tambahan: