Pendahuluan

Selesai

Perusahaan Anda meluncurkan aplikasi web daftar belanja. Melalui situs tersebut, pelanggan dapat menambahkan, mengedit, melihat, dan menghapus item dari daftar mereka.

Saat Anda membuat aplikasi, kekhawatiran pertama Anda adalah bahwa aplikasi dan API Anda dihosting dengan aman, tersedia secara global, dan diterbitkan secara otomatis. Daripada menyiapkan dan mengonfigurasi server web untuk menangani masalah ini, Anda memutuskan untuk menggunakan solusi hosting yang melayani aset dan API Anda dengan mudah, tanpa banyak pengaturan atau konfigurasi.

Apa itu Azure Static Web Apps?

Azure Static Web Apps memecahkan semua masalah yang sulit mulai dari kode sumber hingga ketersediaan global.

Selagi Anda tetap fokus mengembangkan aplikasi Anda, Azure Static Web Apps secara otomatis membangun dan menghostnya dari GitHub atau Azure DevOps.

Aplikasi web statis umumnya dibuat menggunakan kerangka kerja WebAssembly seperti kerangka kerja dan pustaka Blazor dan JavaScript. Aplikasi ini mencakup aset citra, HTML, CSS, dan JavaScript yang membentuk aplikasi. Di bawah arsitektur server web tradisional, file-file ini disajikan dari satu server bersama titik akhir API yang diperlukan.

Dengan Azure Static Web Apps, aset statis dipisahkan dari server web tradisional, bukan disajikan dari titik yang didistribusikan secara global di seluruh dunia. Distribusi ini membuat penyajian file lebih cepat karena file secara fisik lebih dekat dengan pengguna akhir. Titik akhir API dihosting menggunakan arsitektur tanpa server, yang menghindari kebutuhan untuk server back-end penuh secara bersamaan.

Model untuk Azure Static Web Apps adalah Anda mendapatkan apa yang Anda butuhkan, tidak lebih, tidak kurang.

Diagram showing the Static Apps overview.

Saat Anda membuat sumber daya Azure Static Web Apps, Azure menyiapkan alur kerja GitHub Actions atau Azure DevOps di repositori kode sumber aplikasi. Alur kerja memantau cabang pilihan Anda. Setiap kali Anda mendorong penerapan atau membuat permintaan pull ke cabang yang diawasi, alur kerja otomatis membangun dan menyebarkan aplikasi Anda dan API-nya ke Azure.

Azure menghosting dan melayani aplikasi web Anda sementara Azure Functions mendukung fungsionalitas API back-end, yang menyediakan peluasan skala dan penskalaan otomatis berdasarkan permintaan ke API.

Fitur utama

  • Hosting web yang didistribusikan secara global menempatkan konten statis seperti HTML, CSS, JavaScript, dan gambar lebih dekat dengan pengguna Anda.
  • Dukungan API Terintegrasi yang disediakan oleh Azure Functions.
  • Integrasi GitHub dan Azure DevOps kelas satu yang memicu build dan penyebaran dengan setiap perubahan repositori.
  • Sertifikat SSL gratis, yang secara otomatis diperpanjang.
  • URL pratinjau unik untuk mempratinjau permintaan pull

Tujuan pembelajaran

Dalam modul ini, Anda membuat, memodifikasi, dan menyebarkan aplikasi web dan API ke Azure Static Web Apps.

Modul ini menyediakan contoh aplikasi Blazor dan API yang ditulis di C#.

Yang akan Anda lakukan

Setelah memilih aplikasi klien, Anda akan:

  1. Bangun dan jalankan aplikasi Blazor Anda.
  2. Buat API Anda dengan Azure Functions.
  3. Ubah aplikasi web Anda untuk membuat permintaan HTTP ke API Anda.
  4. Membuat dan menyebarkan aplikasi web secara otomatis ke Azure dari repositori GitHub dengan GitHub Actions.
  5. Terakhir, Anda menjelajahi dan meluncurkan aplikasi Anda.

A set of four screenshots illustrating the four sample applications.

Langkah berikutnya

Saat ini Anda mungkin berpikir bahwa Anda perlu membuat sumber daya Azure terlebih dahulu, tetapi Azure Static Web Apps merencanakan alur kerja harian Anda. Pendekatan yang lebih alami adalah memulai dengan kode di GitHub terlebih dahulu, sebelum membuat sumber daya di Azure.