Merencanakan Azure Static Web App Anda
- 5 menit
Tujuan utama Anda adalah menghosting aplikasi di Azure. Azure Static Web Apps menyediakan 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 commit atau request tarik 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 komponen otomatis dalam 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 tempat kode sumber berada di GitHub. Saat membuat instans Static Web Apps, Anda akan 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 | / | Lokasi kode sumber untuk aplikasi web Anda | Ya |
| Lokasi keluaran build aplikasi | dist | Lokasi output build plikasi Anda, relatif terhadap lokasi aplikasi Anda | Tidak |
| Lokasi API | api | Lokasi kode sumber untuk API web Anda | Tidak |
Output build aplikasi adalah jalur relatif ke direktori output build aplikasi Anda. Misalnya, anggap bahwa kita memiliki aplikasi di my-app yang menghasilkan aset yang dibangunnya ke folder my-app/dist. Dalam hal ini, Anda menentukan dist untuk lokasi ini.
Dari kode sumber hingga aset statis dengan GitHub Actions
Repositori GitHub Anda berisi kode sumber, sehingga perlu dibangun sebelum dapat diterbitkan.
Saat Anda membuat instans Static Web Apps, Azure membuat alur kerja GitHub Actions di repositori Anda. Alur kerja membangun aplikasi Anda tiap kali Anda mendorong perubahan atau membuat permintaan tarik terhadap cabang yang Anda pilih untuk dilacak. Proses membangun ini mengubah kode sumber Anda menjadi aset statis, yang dilayani oleh Azure. Setelah pembangunan selesai, tindakan akan menyebarkan 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. API Anda akan secara otomatis diterapkan dan dihosting oleh instans Aplikasi Web Statis Anda. Alur kerja GitHub Actions yang membangun dan menyebarkan aplikasi Anda menemukan API dalam repositori Anda dengan nama folder yang Anda tentukan.
Biasanya, Anda meletakkan aplikasi API di folder bernama api atau fungsi, tetapi Anda dapat menamainya apa pun yang Anda suka.
Bagaimana jika Anda tidak memiliki API? Jangan khawatir. Jika Azure Static Web Apps tidak dapat menemukan API di folder yang Anda tunjukkan, API tidak akan diterbitkan, tetapi aplikasi Anda masih akan diterbitkan.
Menangani rute fallback
Anda melihat kesalahan 404 ketika Anda merefresh halaman karena browser mengirim permintaan ke platform hosting untuk menyajikan /produk. Tidak ada halaman di server bernama products yang tersedia. Untungnya, mudah untuk mengatasi hal ini dengan membuat rute cadangan. Rute fallback adalah rute yang mencocokkan semua permintaan halaman yang tidak cocok ke server.
Azure Static Web Apps mendukung aturan perutean kustom yang ditentukan dalam file staticwebapp.config.json opsional yang terletak di folder output build aplikasi.
Anda dapat mengonfigurasi aplikasi untuk menggunakan aturan yang menerapkan rute fallback seperti yang ditunjukkan dalam contoh berikut yang menggunakan wildcard jalur dengan filter file:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Aturan ini memberi tahu Azure Static Web Apps untuk melayani index.html saat permintaan untuk sumber daya tidak ditemukan, tidak termasuk gambar dan file CSS yang ditampilkan dalam ekspresi exclude.
Lokasi file rute
Azure Static Web Apps mengharapkan file staticwebapp.config.json Anda berada di output_location secara default. Jika proses pembuatan Anda menyalin file staticwebapp.config.json Anda ke output_location, maka tidak ada lagi hal tambahan yang perlu Anda lakukan. Untuk sebagian besar proyek, output_location relatif terhadap app_location.
File staticwebapp.config.json untuk aplikasi Anda terletak di folder angular-app/src/assets.
File staticwebapp.config.json terletak di folder react-app.
File staticwebapp.config.json terletak di folder svelte-app/public.
File staticwebapp.config.json terletak di folder vue-app/public.
Langkah berikutnya
Jadi apa yang Anda butuhkan sehingga Anda dapat menerbitkan aplikasi web Anda ke Azure Static Web Apps? Yang Anda butuhkan hanyalah aplikasi di repositori GitHub Anda.