Menerbitkan API dengan GitHub Actions
Anda menambahkan API ke aplikasi web dan keduanya berjalan secara lokal. Sekarang saatnya untuk menerbitkan API dan aplikasi Anda ke Azure Static Web Apps.
Saat Anda membuat instans Azure Static Web Apps dan memintanya untuk mengawasi cabang utama Anda, sebuah GitHub Action dibuat untuk Anda. GitHub Action mendengarkan perubahan pada cabang utama repositori Anda, dan ketika mendeteksi commit atau permintaan pull ke cabang utama, ia membangun dan menerbitkan aplikasi Anda.
Anda mungkin ingat ketika Anda membuat sumber daya Azure Static Web Apps dan memberikan lokasi folder untuk API Anda. Anda memberikan nilai default api. Namun, karena Anda tidak memiliki API di folder pada api saat itu, Azure Static Web Apps tidak mencoba menerbitkan API.
Sekarang, semuanya berubah.
Konfigurasi GitHub Action
Folder .github/workflows berisi file GitHub Action Anda. File ini berisi pengaturan untuk lokasi aplikasi web, API, dan artefak build Anda. Lokasi yang Anda pilih saat membuat sumber daya Azure Static Web Apps sekarang terletak di file ini, seperti yang ditunjukkan di sini:
app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional
app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional
app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional
app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional
api_location Anda sudah diatur ke nilai yang benar untuk menunjuk ke API Anda di api folder.
Memicu Tindakan GitHub
GitHub Action siap untuk membangun dan menerbitkan aplikasi web dan API Anda setelah mendeteksi perubahan pada cabang utama Anda. Untuk memicu GitHub Action, Anda dapat melakukan commit secara langsung atau membuat pull request ke cabang utama . Perubahan yang terdeteksi pada cabang utama memicu GitHub Action untuk menerbitkan aplikasi pada URL yang sama untuk situs web Anda yang sedang aktif.
URL Pratinjau
Terkadang Anda ingin melihat perubahan Anda di situs perantara sebelum menerbitkan ke situs web utama. Azure Static Web Apps memungkinkan Anda melihat pratinjau dari perubahan Anda melalui URL pratinjau. Anda dapat membuat URL pratinjau dengan membuat permintaan pull terhadap cabang yang sedang ditonton GitHub Action Anda. Situs web langsung Anda tidak terpengaruh. Sebagai gantinya, versi uji coba baru dari aplikasi Anda dibuat. Jika Anda kembali dan memeriksa permintaan pull di GitHub, Anda akan melihat tautan ke versi penahapan yang diposting di tab Percakapan.
Tabel berikut ini memperlihatkan bagaimana Azure Static Web Apps menerbitkan aplikasi Anda ke URL yang berbeda. Aplikasi Anda menerbitkan ke satu URL saat permintaan pull ke cabang yang sama diterbitkan ke URL lain.
| Sumber | Deskripsi | URL |
|---|---|---|
| cabang utama | URL situs web aktif | https://purple-rain-062d03304.azurestaticapps.net/ |
| Permintaan Pull #5 | URL Pratinjau | https://purple-rain-062d03304-5.azurestaticapps.net/ |
Saat ini Anda bekerja di cabang api. Buat permintaan penarikan dari cabang api Anda ke cabang utama. Saat Anda membuat pull request terhadap cabang utama , GitHub Action menerbitkan aplikasi ke URL pratinjau.
Setelah alur kerja selesai membangun dan menyebarkan aplikasi Anda, bot GitHub menambahkan komentar ke permintaan pull Anda yang berisi URL lingkungan praproduksi. Anda dapat memilih tautan ini untuk melihat perubahan bertahap Anda.
Selanjutnya, Anda membuat pull request dan mengunjungi versi yang telah ditampilkan dari aplikasi Anda.