Pengantar

  • 4 menit

Skenario

Perusahaan Anda meluncurkan aplikasi web daftar belanja. Melalui situs ini, pelanggan dapat menambahkan, mengedit, melihat, dan menghapus barang-barang seperti makanan dan kebutuhan rumah tangga dari daftar mereka.

Situs dan API harus aman untuk memastikan privasi pelanggan. Pengguna Anda akan didistribusikan ke seluruh dunia, dan Anda ingin semua orang mendapatkan performa yang baik. Anda lebih suka solusi yang menghapus sebanyak mungkin pekerjaan infrastruktur, termasuk membangun dan menerbitkan, sehingga Anda dapat berkonsentrasi pada fitur dan pengalaman pengguna.

Anda dapat menyebarkan aset web ke penyimpanan cloud, membuat dan menetapkan sertifikat SSL Anda sendiri, membuat API di server cloud, membuat proksi terbalik yang memungkinkan aplikasi Anda melakukan panggilan ke API, mendistribusikan aplikasi secara global, dan menyiapkan proses CI/CD Anda sendiri.

Saat Anda menggunakan Azure Static Web Apps, Anda mendapatkan semua ini secara siap pakai.

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 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.

Cuplikan layar memperlihatkan gambaran umum Static Apps.

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. Jadi, Anda dapat menghosting aplikasi web statis dengan atau tanpa API.

Dalam latihan modul ini, Anda akan menyebarkan aplikasi menggunakan kerangka kerja web pilihan Anda.

Catatan

Anda akan menyebarkan aplikasi tanpa API dalam modul ini. Lihat bagian Langkah berikutnya di unit akhir untuk informasi tentang modul berikutnya, tempat Anda akan menyebarkan API bersama aplikasi Anda.

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 diperpanjang secara otomatis.
  • URL pratinjau unik untuk mempratinjau permintaan pull.

Tujuan pembelajaran

Dalam tutorial ini, Anda akan membuat, memodifikasi, dan menyebarkan aplikasi web 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 pemula mencakup empat aplikasi yang akan Anda gunakan.

├ angular-app  👈 The Angular client 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:

  • Membuat dan menjalankan aplikasi ujung depan Anda.
  • Membuat dan menyebarkan aplikasi web secara otomatis ke Azure dari repositori GitHub dengan GitHub Actions.
  • Jelajahi dan luncurkan aplikasi Anda, sebagai berikut.

Cuplikan layar yang mengilustrasikan aplikasi contoh angular.

Cuplikan layar yang mengilustrasikan aplikasi contoh react.

Cuplikan layar yang mengilustrasikan aplikasi contoh svelte.

Cuplikan layar yang mengilustrasikan aplikasi sampel Vue.

Langkah berikutnya

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