Catatan
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba masuk atau mengubah direktori.
Akses ke halaman ini memerlukan otorisasi. Anda dapat mencoba mengubah direktori.
Azure Static Web Apps menerbitkan situs web ke lingkungan produksi dengan membangun aplikasi dari repositori GitHub yang didukung oleh backend tanpa server. Tutorial berikut menunjukkan cara menyebarkan aplikasi C# Blazor WebAssembly yang menampilkan data cuaca yang dikembalikan oleh API tanpa server.
Catatan
Prasyarat
- Akun GitHub
- Akun Azure . Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis.
1. Buat repositori
Artikel ini menggunakan repositori templat GitHub untuk memudahkan Anda memulai. Templat ini menampilkan aplikasi pemula yang dapat Anda sebarkan ke Azure Static Web Apps.
- Pastikan Anda masuk ke GitHub dan buka lokasi berikut untuk membuat repositori baru: https://github.com/staticwebdev/blazor-starter/generate
- Beri nama repositori Anda my-first-static-blazor-app.
2. Buat aplikasi web statis
Setelah repositori dibuat, buat aplikasi web statik dari portal Azure.
Buka portal Azure.
Pilih Buat Sumber Daya.
Cari Static Web Apps.
Pilih Aplikasi Web Statis.
Pilih Buat.
Pada tab Dasar, masukkan nilai berikut.
Properti Nilai Langganan Nama langganan Azure Anda. Grup sumber daya my-blazor-group Nama my-first-static-blazor-app Jenis paket Gratis Wilayah untuk API Azure Functions dan lingkungan penahapan Pilih wilayah terdekat dengan Anda. Sumber GitHub Pilih Masuk dengan GitHub dan autentikasi dengan GitHub, jika Anda diminta.
Masukkan nilai GitHub berikut.
Properti Nilai Organisasi Pilih organisasi GitHub yang Anda inginkan. Repositori Pilih my-first-static-blazor-app. Cabang Pilih main. Catatan
Jika Anda tidak melihat repositori apa pun, Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Kemudian buka repositori GitHub Anda dan buka Pengaturan > Aplikasi > Aplikasi OAuth Resmi, pilih Azure Static Web Apps, lalu pilih Grant. Untuk repositori organisasi, Anda harus menjadi pemilik organisasi untuk memberikan izin.
Di bagian Detail Build, pilih Blazor dari menu drop-down Preset Build dan nilai berikut diisi.
Properti Nilai Deskripsi Lokasi aplikasi Klien Folder berisi aplikasi Blazor WebAssembly Lokasi API Api Folder berisi aplikasi Azure Functions Lokasi output wwwroot Folder dalam output build yang berisi aplikasi Blazor WebAssembly yang dipublikasikan Pilih Tinjau + Buat untuk memverifikasi bahwa semua detail sudah benar.
Pilih Buat untuk memulai pembuatan aplikasi web statis dan provisikan GitHub Actions untuk penyebaran.
Setelah penyebaran selesai, pilih Buka sumber daya.
Pilih Buka sumber daya.
3. Lihat situs web
Ada dua aspek untuk menyebarkan aplikasi statik. Yang pertama menyediakan sumber daya Azure yang mendasari yang membentuk aplikasi Anda. Yang kedua adalah alur kerja GitHub Actions yang membangun dan menerbitkan aplikasi Anda.
Sebelum Anda dapat mengakses aplikasi web statis yang baru, build deployment harus terlebih dahulu selesai.
Jendela gambaran umum Static Web Apps menampilkan serangkaian tautan yang membantu Anda berinteraksi dengan aplikasi web Anda.
Pilih banner yang bertuliskan, Klik di sini untuk memeriksa status proses GitHub Actions Anda untuk melihat GitHub Actions yang berjalan pada repositori Anda. Setelah Anda memverifikasi pekerjaan penyebaran selesai, maka Anda dapat membuka situs web Anda melalui URL yang dihasilkan.
Setelah alur kerja GitHub Actions selesai, Anda dapat memilih tautan URL untuk membuka situs web di tab baru.
4. Memahami gambaran umum aplikasi
Bersama-sama, proyek berikut membentuk bagian yang diperlukan untuk membuat aplikasi Blazor WebAssembly yang berjalan di browser yang didukung oleh backend API Azure Functions.
| Proyek Visual Studio | Deskripsi |
|---|---|
| Api | Aplikasi C# Azure Functions mengimplementasikan titik akhir API yang menyediakan informasi cuaca ke aplikasi Blazor WebAssembly.
WeatherForecastFunction menampilkan larik objek WeatherForecast. |
| Klien | Proyek Blazor WebAssembly front-end. Rute cadangan diterapkan untuk memastikan perutean sisi klien berfungsi. |
| Dibagikan | Menyimpan kelas umum yang dirujuk oleh proyek Api dan Klien, yang memungkinkan data mengalir dari titik akhir API ke aplikasi web front-end. Kelas WeatherForecast ini dibagikan di antara kedua aplikasi. |
Aplikasi web statis Blazor
Rute cadangan
Aplikasi ini menyediakan URL seperti /counter dan /fetchdata, yang mengarah ke rute tertentu dalam aplikasi. Karena aplikasi ini diimplementasikan sebagai satu halaman, setiap rute disajikan file index.html . Untuk memastikan bahwa permintaan untuk jalur apa pun mengembalikan index.html, rute fallback diimplementasikan dalam file staticwebapp.config.json yang terdapat di folder akar proyek klien.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
Konfigurasi JSON memastikan bahwa permintaan ke rute mana pun dalam aplikasi mengembalikan halaman index.html.
Sebarkan dari Visual Studio
Sebagai alternatif untuk menyebarkan melalui GitHub Actions, Anda dapat menyebarkan ke Azure Static Web Apps langsung dari Visual Studio. Buat profil penerbitan untuk Azure Static Web Apps:
Di UI Terbitkan Visual Studio, pilih Target>Azure>Target Spesifik>Azure Static Web Apps untuk membuat profil penerbitan.
Dalam konfigurasi profil publikasi, berikan nama Langganan. Pilih instans yang sudah ada, atau pilih Buat instans baru. Saat membuat instans baru di UI Buat Aplikasi Web Statis portal Azure, atur detail penyebaran>Sumber ke Lainnya. Tunggu hingga penyebaran selesai di portal Azure sebelum melanjutkan.
Dalam konfigurasi profil penerbitan, pilih instans Azure Static Web Apps dari grup sumber daya instans. Pilih Selesai untuk membuat profil penerbitan. Jika Visual Studio meminta untuk menginstal CLI Static Web Apps (SWA), instal CLI dengan mengikuti perintah. SWA CLI memerlukan npm/Node.js (dokumentasi Visual Studio).
Setelah profil publikasi dibuat, sebarkan aplikasi ke instans Azure Static Web Apps menggunakan profil terbitkan dengan memilih tombol Terbitkan .
Membersihkan sumber daya
Jika Anda tidak akan menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps melalui langkah-langkah berikut:
- Buka portal Azure.
- Cari my-blazor-group dari bilah pencarian atas.
- Pilih nama grup.
- Pilih Hapus.
- Pilih Ya untuk mengonfirmasi tindakan penghapusan.