Pendahuluan
Perusahaan Anda meluncurkan aplikasi web daftar belanja. Melalui situs tersebut, pelanggan dapat menambahkan, mengedit, melihat, dan menghapus item dari daftar mereka.
Saat Anda membuild aplikasi, kekhawatiran pertama Anda adalah aplikasi dan API Anda dihosting secara aman, tersedia secara global, dan diterbitkan secara otomatis. Daripada membuild server web untuk menangani semua masalah ini, Anda memutuskan untuk menggunakan solusi hosting yang melayani aset dan API 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 pustaka dan kerangka kerja seperti Angular, React, Svelte, atau Vue. Aplikasi ini mencakup aset citra, HTML, CSS, dan JavaScript yang membentuk aplikasi. Saat menggunakan arsitektur server web tradisional, file ini disajikan dari satu server bersama dengan 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 jauh lebih cepat karena file secara fisik lebih dekat dengan pengguna akhir. Titik akhir API, yang bersifat opsional, dihosting menggunakan arsitektur tanpa server, yang sama sekali tidak memerlukan server back-end lengkap.
Model untuk Azure Static Web Apps adalah Anda mendapatkan apa yang Anda butuhkan - tidak lebih, tidak kurang.
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. Azure Functions mendukung fungsionalitas API back-end, yang menyediakan penskalaan masuk dan keluar otomatis berdasarkan permintaan.
API Opsional
Azure Static Web Apps sangat ideal untuk menyajikan konten statis murni, tetapi juga memiliki dukungan besar untuk aplikasi web statis yang membutuhkan API di belakangnya. Anda dapat menghosting aplikasi web statis dengan atau tanpa API.
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 terbaik yang perubahan repositorinya memicu build dan penyebaran.
- Sertifikat SSL gratis, yang secara otomatis diperpanjang.
- URL pratinjau unik untuk melihat pratinjau permintaan pull.
- Autentikasi bawaan dengan beberapa penyedia.
Tujuan pembelajaran
Dalam tutorial ini, Anda akan membuat, memodifikasi, dan menyebarkan aplikasi web dan API dengan autentikasi pengguna ke Azure Static Web Apps.
Pilih jalur Anda sendiri
Modul ini menyediakan empat variasi aplikasi contoh yang bisa Anda pilih: Angular, React, Svelte, dan Vue. Kemampuan Azure Static Web Apps adalah bahwa semua fiturnya "berfungsi."
Kode starter mencakup empat aplikasi dan titik awal untuk API yang akan Anda gunakan.
├ angular-app 👈 The Angular client app
├ api 👈 The API server app
├ react-app 👈 The React client app
├ svelte-app 👈 The Svelte client app
└ vue-app 👈 The Vue client app
Yang akan Anda lakukan
Setelah memilih aplikasi klien, Anda akan:
- Buat dan terapkan aplikasi web dan API Anda secara otomatis ke Azure dari repositori GitHub dengan Tindakan GitHub.
- Ubah aplikasi web Anda untuk menambahkan tombol masuk dan keluar, dan tampilkan informasi tentang pengguna yang masuk saat ini.
- Ubah aplikasi web dan API Anda untuk memblokir pengguna yang tidak diautentikasi dan hanya izinkan penyedia autentikasi tertentu.
- Terakhir, Anda akan menjelajahi dan meluncurkan aplikasi, seperti yang ditunjukkan di bawah.
Langkah berikutnya
Saat ini, Anda mungkin berpikir perlu membuat sumber daya Azure terlebih dahulu, tetapi Azure Static Web Apps sudah menyiapkan semuanya untuk Anda. Pendekatan yang lebih alami adalah memulai dengan kode di GitHub terlebih dahulu, sebelum membuat sumber daya di Azure.