Perkenalan

  • 2 menit

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

Saat Anda membuat aplikasi, kekhawatiran pertama Anda adalah aplikasi dan API Anda dihosting dengan aman, tersedia secara global, dan diterbitkan secara otomatis. Daripada membangun server web untuk menangani semua kekhawatiran 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 masalah keras dari kode sumber Anda hingga ketersediaan global.

Meskipun Anda tetap fokus pada pengembangan aplikasi Anda, Azure Static Web Apps secara otomatis membangun dan menghostingnya dari GitHub atau Azure DevOps.

Aplikasi web statis umumnya dibuat menggunakan pustaka dan kerangka kerja seperti Angular, React, Svelte, atau Vue. Aplikasi ini termasuk HTML, CSS, JavaScript, dan aset gambar yang membentuk aplikasi. Dalam arsitektur server web tradisional, file-file ini disajikan dari satu server bersama dengan endpoint API yang dibutuhkan.

Dengan Azure Static Web Apps, aset statis dipisahkan dari server web tradisional dan sebaliknya 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 yang opsional dihosting menggunakan arsitektur tanpa server, yang menghindari kebutuhan akan server back-end sepenuhnya.

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

Diagram memperlihatkan model gambaran umum Aplikasi statis.

Saat Anda membuat sumber daya Azure Static Web Apps, Azure menyiapkan gitHub Actions atau alur kerja Azure DevOps di repositori kode sumber aplikasi. Alur kerja mengawasi cabang yang Anda pilih. Saat Anda mendorong penerapan atau membuat permintaan pull ke cabang yang dipantau, alur kerja secara 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 peluasan dan penskalakan 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 Anda dengan atau tanpa API.

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

Fitur utama

  • Hosting web yang didistribusikan secara global menempatkan konten statis seperti HTML, CSS, JavaScript, dan gambar yang lebih dekat dengan pengguna Anda.
  • Dukungan API terintegrasi yang disediakan oleh Azure Functions.
  • Perubahan integrasi GitHub dan Azure DevOps kelas satu pada repositori Anda memicu build dan penyebaran.
  • Sertifikat SSL gratis, yang diperpanjang secara otomatis.
  • 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.

Pilih jalur Anda sendiri

Modul ini menyediakan empat variasi aplikasi sampel untuk Anda pilih: Angular, React, Svelte, dan Vue. Kekuatan Azure Static Web Apps adalah bahwa semua varian ini langsung berfungsi.

Kode pemula mencakup empat aplikasi dan titik awal untuk API yang Anda gunakan nanti.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Apa yang akan Anda lakukan

Setelah memilih aplikasi klien, Anda akan:

  1. Buat dan sebarkan aplikasi web Anda secara otomatis ke Azure dari repositori GitHub dengan GitHub Actions.
  2. Buat API Anda dengan Azure Functions.
  3. Ubah aplikasi web Anda untuk membuat permintaan HTTP ke API Anda.
  4. Buat dan sebarkan aplikasi web Anda secara otomatis ke Azure dari repositori GitHub dengan GitHub Actions.
  5. Terakhir, Anda menjelajahi dan meluncurkan aplikasi Anda, seperti yang ditunjukkan pada gambar berikut.

Cuplikan layar yang mengilustrasikan aplikasi sampel sudut.

Cuplikan layar yang mengilustrasikan aplikasi sampel react.

Cuplikan layar yang mengilustrasikan aplikasi sampel svelte.

Cuplikan layar yang mengilustrasikan aplikasi sampel vue.

Langkah berikutnya

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