Sebelumnya

Berikutnya

Latihan - Membuat rute fallback Anda

Selesai

Sekarang saatnya untuk membuat rute fallback sehingga pengguna dapat menavigasi ke aplikasi Anda dengan sukses.

Menarik kode terbaru Anda

Azure Static Web Apps menambahkan file alur kerja GitHub Actions ke cabang yang Anda pilih di latihan sebelumnya. Pertama, Anda mendapatkan file ini dengan menarik kode Anda dari Git.

Tarik perubahan kode Anda dari Git dengan mengikuti langkah berikut:

1. Buka solusi ShoppingList di Visual Studio.

2. Tarik perubahan terbaru dari GitHub.

   

Anda sekarang dapat melihat file alur kerja Anda di folder .github/workflows di Penjelajah Windows (file bukan bagian dari solusi Visual Studio).

Membuat aturan perutean

Sebelum menerbitkan aplikasi, Anda membuat aturan perutean yang menyertakan rute fallback.

Membuat file staticwebapp.config.json

Jika Anda belum memiliki file staticwebapp.config.json di proyek, Anda dapat membuatnya dengan mengikuti langkah-langkah berikut:

1. Di Visual Studio, klik kanan folder wwwroot dalam proyek Klien.

2. Pilih Tambahkan -> Item Baru.

3. Pilih File JSON dari template yang tersedia, beri nama staticwebapp.config.json, dan tekan Enter.

Setelah staticwebapp.config.json dibuat, perbarui untuk menyertakan rute cadangan berikut:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/_framework/*", "/css/*"]
  }
}

Mendorong perubahan Anda ke Git

Sekarang, simpan dan komit perubahan Anda ke repositori Git lokal Anda. Selanjutnya, dorong perubahan itu ke GitHub.

Mencoba rute fallback

Alur kerja GitHub Actions membangun dan menyebarkan aplikasi Anda.

Buka repositori Anda di browser dan awasi kemajuan GitHub Action. Ikuti langkah ini untuk melihat kemajuan:

1. Pilih menu Tindakan.

2. Di bagian menu Alur Kerja, pilih item alur kerja Azure Static Web Apps CI/CD.

3. Pilih tautan terbaru (atas) dalam aksi berjalan ke kanan.

4. Pilih tautan Build and Deploy Job.

Anda dapat melihat kemajuan GitHub Action saat membuild dan menerbitkan aplikasi web dan API Anda.

Setelah aplikasi Anda disebarkan ulang, telusuri aplikasi tersebut. Perhatikan URL menampilkan /products. Sekarang, segarkan browser dengan menekan F5 untuk menguji rute mundur Anda. Aplikasi Anda harus berhasil dimuat ulang berkat rute fallback Anda dalam aturan perutean!

Lanjutkan