Membuat dan menyebarkan ke Azure Static Web Apps

  • 1 menit

Hingga saat ini, kami telah berfokus pada penulisan aplikasi Gatsby kami menggunakan React, GraphQL, dan plugin. Langkah selanjutnya setelah Anda selesai menulis adalah membangun aplikasi Anda. Setelah itu, Anda dapat menyebarkan ke server web atau layanan hosting apa pun yang dapat melayani file statis.

Membuat aplikasi Anda

Alat baris perintah Gatsby menyediakan perintah untuk membuat proyek Anda untuk membuat sesuatu yang dapat Anda sebarkan di mana pun Anda suka. Build terdiri dari HTML, JavaScript, CSS, dan aset lain yang telah Anda sertakan.

Membuat build

Gatsby menjalankan pengompilasi React di bawahnya sehingga saat menghasilkan build, pengompilasi tersebut melakukan banyak hal. Ini mengompilasi kode React dengan menerjemahkan JSX ke JavaScript dan HTML. Tindakan ini juga mengekstrak semua kode JavaScript dan menempatkannya dalam satu set bundel. Setiap bundel kemudian dioptimalkan yang berarti memiliki spasi kosong yang dihapus, variabel diganti namanya, dan ekspresi dioptimalkan untuk kecepatan. Gaya ini melalui proses yang sama. Jika Anda telah memilih pustaka seperti LESS, SCSS, atau Stylus untuk CSS Anda, akan ada langkah awal yang mana CSS sedang dikompilasi dari bahasa pemrogram tingkat tinggi ke CSS. Tidak ada tindakan lebih lanjut yang diperlukan untuk menyebarkan file pada saat ini. Ini hanya satu set file statis yang dapat dihosting dari server web apa pun yang dapat melayani file.

Menyebarkan build

Ada banyak teknologi dan layanan yang mampu menghosting aplikasi statis. Lagi pula, itu hanya HTML, CSS, dan JavaScript dan dapat dihosting oleh sebagian besar layanan web di luar sana. Untuk tutorial ini, kita akan menyebarkan ke Static Web Apps, layanan Azure yang mengkhususkan diri dalam menghosting aplikasi statis seperti yang dibuat dengan Gatsby.

Azure Static Web Apps

Static Web Apps adalah layanan Azure yang memungkinkan Anda mengambil beberapa file statis dan menyajikannya dari cloud. Apa yang Anda sebarkan bukan paket penyebaran, tetapi sekumpulan file statis. Ini cocok untuk Gatsby karena apa yang akhirnya diproduksi Gatsby dari build adalah file statis.

Berbicara tentang build, layanan ini benar-benar melakukan langkah build untuk Anda sehingga tidak perlu membuat apa pun di awal. Ini mencapai ini dengan menemukan build perintah dalam package.json proyek Gatsby. Yang perlu Anda lakukan adalah menempatkan proyek Anda di repositori GitHub.

Saat ini kode Anda berada di direktori di mesin Anda, sehingga Anda harus melakukan beberapa hal untuk menyebarkan Azure:

  • Membuat repositori GitHub dan mendorong ke sana: Gatsby membuat repo Git untuk Anda, yang perlu didorong ke GitHub.

  • Membuat instans Azure Static Web Apps: Saat Anda menggunakan portal Microsoft Azure untuk membuat instans Azure Static Web Apps, Anda akan menyediakan URL ke repositori GitHub Anda, dan nama untuk subdirektori tempat file statik berada di proyek Anda. Dalam kasus Gatsby, direktori ini disebut public/.