Sebelumnya

Berikutnya

Latihan - Membuat Azure Static Web App

Selesai

Dalam latihan ini, Anda membuat instans Azure Static Web Apps termasuk GitHub Action yang secara otomatis membangun dan menerbitkan aplikasi Anda.

Membuat Static Web App

Setelah membuat repositori GitHub, Anda dapat membuat instans Static Web Apps dari portal Azure.

Modul ini menggunakan kotak pasir Azure untuk menyediakan langganan Azure gratis sementara yang dapat digunakan untuk menyelesaikan latihan Anda. Sebelum melanjutkan, pastikan Anda mengaktifkan kotak pasir di bagian atas halaman ini.

1. Masuk ke portal Microsoft Azure, memastikan Anda menggunakan akun yang sama untuk masuk seperti yang Anda gunakan untuk mengaktifkan kotak pasir.

2. Di halaman beranda Azure, di bagian Layanan Azure, pilih Buat sumber daya. Panel Buat sumber daya akan muncul.

3. Di kotak pencarian marketplace, cari dan pilih Static Web Apps. Panel Static Web Apps muncul.

4. Pilih Buat. Panel Buat Static Web Apps muncul. Konfigurasikan aplikasi baru Anda dan tautkan ke repositori GitHub Anda.

5. Pada tab Dasar, masukkan nilai berikut untuk setiap pengaturan.

   Pengaturan	Nilai
   Detail Proyek
   Langganan	Langganan Concierge
   Grup Sumber Daya	[Nama grup sumber daya kotak pasir]
   Detail Static Web Apps
   Nama	Beri nama aplikasi Anda. Karakter yang valid a-z (peka huruf besar dan kecil), 0-9, dan -.
   Paket hosting
   Tingkat harga untuk aplikasi Anda	Pilih Gratis
   Azure Functions dan detail pementasan
   Region for Azure Functions API dan lingkungan pementasan	Pilih wilayah yang paling dekat dengan Anda
   Detail penyebaran
   Sumber	Lalu pilih GitHub
   Akun GitHub	Pilih Masuk dengan GitHub. Panel Otorisasi Azure Static Web Apps muncul. Pilih Otorisasi Azure-App-Service-Static-Web-Apps. Masukkan kata sandi Anda.
   Organisasi	Pilih Organisasi tempat Anda membuat repositori
   Repositori	my-static-blazor-app
   Cabang	utama
   Rincian Bangun
   Bangun Preset	Blazor
   Lokasi aplikasi	Klien
   Lokasi api	Api
   Lokasi output	wwwroot

6. Pilih Tinjau + buat>Buat.

7. Setelah penyebaran selesai, pilih Buka sumber daya. Panel Static Web Apps Anda muncul.

Meninjau GitHub Action

Pada tahap ini, instans Static Web Apps Anda dibuat di Azure, tetapi aplikasi Anda belum disebarkan. Tindakan GitHub yang dibuat Azure di repositori Anda berjalan secara otomatis untuk memicu build dan penyebaran pertama aplikasi Anda, tetapi perlu beberapa menit untuk menyelesaikannya.

Anda dapat memeriksa status tindakan membangun dan menerapkan dengan memilih tautan berikut untuk membuka halaman Tindakan di repositori GitHub Anda:

Setelah Anda berada di sana:

1. Pilih Azure Static Web Apps CI/CD.

2. Pilih penerapan berjudul ci: tambahkan file alur kerja Azure Static Web Apps.

3. Pilih tautan Build and Deploy Job

Dari sini, Anda dapat mengamati kemajuan aplikasi saat build.

Melihat situs web

Setelah GitHub Action selesai membangun dan menerbitkan aplikasi web, Anda dapat menelusuri untuk melihat aplikasi yang sedang berjalan.

Klik tautan URL di portal Microsoft Azure untuk membuka aplikasi Anda di browser.

Aplikasi Anda sekarang tersedia secara global, tetapi masih mengatakan Memuat data karena belum ada data atau API. Anda akan menambahkan API untuk aplikasi web di bagian berikutnya.

Selamat! Anda menyebarkan aplikasi pertama Anda ke Azure Static Web Apps!

Catatan

Jangan khawatir jika Anda melihat halaman web yang mengatakan aplikasi belum dibuat dan disebarkan. Coba refresh browser dalam satu menit. GitHub Action berjalan secara otomatis saat Azure Static Web Apps dibuat. Jadi, jika Anda melihat halaman splash, aplikasi masih disebarkan.

Langkah berikutnya

Aplikasi Anda kehilangan API untuk daftar belanjanya. Selanjutnya, Anda menjelajahi cara menambahkan AZURE Functions API ke aplikasi yang diterbitkan ke Azure bersama aset statis.

Lanjutkan