Merencanakan Azure Static Web App Anda

Selesai

Tujuan utama Anda adalah menghosting aplikasi di Azure. Azure Static Web Apps menangani provisi semua sumber daya Azure yang diperlukan untuk Anda.

Namun, sebelum aplikasi dapat dihosting, Anda memerlukan sesuatu untuk membangun aplikasi saat membuat perubahan. Perubahan tersebut dapat melalui penerapan atau permintaan pull ke repositori Anda. Fitur utama Azure Static Web Apps adalah menyiapkan alur kerja GitHub Actions untuk membangun dan menerbitkan aplikasi Anda.

Saat Anda membuat sumber daya Azure Static Web Apps, sumber daya tersebut akan membuat alur kerja GitHub Actions. Alur kerja dipicu segera dan menangani pembangunan dan penerbitan aplikasi Anda. Alur kerja juga dipicu setiap kali Anda membuat perubahan pada cabang yang diawasi di repositori Anda.

Azure Static Web Apps

Ada dua aspek otomatis untuk menyebarkan aplikasi web. Yang pertama menyediakan sumber daya Azure yang mendasari yang membentuk aplikasi Anda. Yang kedua adalah alur kerja GitHub Actions yang membangun dan menerbitkan aplikasi Anda.

Saat menerbitkan aplikasi ke web dengan Azure Static Web Apps, Anda mendapatkan hosting cepat aplikasi web dan API yang dapat diskalakan. Anda juga mendapatkan alur kerja pembangunan dan penyebaran terpadu yang disediakan oleh GitHub Actions.

Menghubungkan instans Static Web Apps Anda ke GitHub

Azure Static Web Apps dirancang untuk menghosting aplikasi sementara kode sumber berada di GitHub. Saat membuat instans Static Web Apps, Anda masuk ke GitHub dan menentukan repositori yang berisi kode aplikasi Anda.

Anda juga perlu menentukan tiga jalur folder dalam repositori sehingga aplikasi dapat dibangun dan disebarkan secara otomatis:

Lokasi Contoh lokasi Deskripsi Wajib diisi
Lokasi aplikasi Klien Lokasi kode sumber untuk aplikasi web Anda Ya
Lokasi output wwwroot Lokasi artefak build aplikasi Anda Tidak
Lokasi API Api Lokasi kode sumber untuk API web Anda Tidak

Lokasi output adalah jalur relatif ke direktori penerbitan aplikasi Anda. Misalnya, anggap bahwa kita memiliki aplikasi di Client yang menghasilkan aset yang dibangunnya ke folder bin/<build profile>/<framework>/publish/wwwroot. Dalam hal ini, Anda hanya perlu menentukan wwwroot untuk lokasi ini, karena sistem penerbitan mengurus sisa awalan.

Dari kode sumber hingga aset statis dengan GitHub Actions

Repositori GitHub Anda berisi kode sumber, bukan aset statis, sehingga perlu dibuat sebelum dapat diterbitkan.

Saat Anda membuat instans Static Web Apps, Azure membuat alur kerja GitHub Actions di repositori Anda. Setiap kali Anda mendorong perubahan atau membuat permintaan pull terhadap cabang yang Anda rilis, alur kerja membuat aplikasi Anda. Proses ini mengubah kode sumber Anda menjadi aset statis yang dilayani Azure. Setelah build selesai, tindakan men-deploy aset.

GitHub Action ditambahkan ke repositori Anda di folder .github/workflows. Anda dapat meninjau atau mengubah file ini jika diperlukan. Pengaturan yang Anda masukkan saat membuat sumber daya disimpan dalam file GitHub Action.

API Terintegrasi dengan Azure Functions

Jika aplikasi Anda memerlukan API, Anda dapat menerapkannya sebagai proyek Azure Functions di repositori Anda, dan instans Static Web Apps Anda secara otomatis menyebarkan dan menghostingnya. Alur kerja GitHub Actions yang membangun dan menyebarkan aplikasi Anda, menemukan API dalam repositori Anda menggunakan nama folder yang Anda tentukan di jalur lokasi API.

Bagaimana jika Anda tidak memiliki API? Jangan khawatir. Jika Azure Static Web Apps tidak dapat menemukan API di folder yang Anda tunjukkan, azure Static Web Apps tidak menerbitkan API, tetapi masih menerbitkan aplikasi Anda.

Langkah berikutnya

Apa yang Anda perlukan agar Anda dapat menerbitkan aplikasi web Anda ke Azure Static Web Apps? Yang Anda butuhkan hanyalah aplikasi di repositori GitHub Anda.