Menyebarkan situs Gatsby ke Azure Static Web Apps

  • Artikel

Artikel ini menunjukkan cara membuat dan menyebarkan aplikasi web Gatsby ke Azure Static Web Apps. Hasil akhirnya adalah situs Static Web Apps baru (dengan Tindakan GitHub terkait) yang memberikan Anda kontrol tentang cara pembuatan dan penerbitan aplikasinya.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Membuat aplikasi Gatsby
  • Menyiapkan situs Azure Static Web Apps
  • Menyebarkan aplikasi Gatsby ke Azure

Jika Anda tidak memiliki Langganan Azure, buat Akun gratis Azure sebelum memulai.

Prasyarat

Buat Aplikasi Gatsby

Buat aplikasi Gatsby menggunakan Antarmuka Tingkat Panggilan (CLI):

  1. Buka terminal

  2. Gunakan alat npx untuk membuat aplikasi baru dengan Gatsby CLI. Proses ini memerlukan waktu beberapa menit.

    npx gatsby new static-web-app

  3. Buka aplikasi yang baru dibuat

    cd static-web-app

  4. Inisialisasi repositori Git

    git init
git add -A
git commit -m "initial commit"

Catatan

Jika Anda menggunakan versi terbaru Gatsby, Anda mungkin perlu memodifikasi package.json untuk menyertakan "mesin": { "node": ">=18.0.0" },

Dorong aplikasi Anda ke GitHub

Anda harus memiliki repositori di GitHub untuk membuat sumber daya Azure Static Web Apps baru.

  1. Buat repositori GitHub kosong (jangan buat README) dari https://github.com/new bernama gatsby-static-web-app.

  2. Selanjutnya, tambahkan repositori GitHub yang baru saja Anda buat sebagai repositori jarak jauh ke repositori lokal Anda. Pastikan untuk menambahkan nama pengguna GitHub Anda sebagai pengganti <YOUR_USER_NAME> tempat penampung dalam perintah berikut.

    git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app

  3. Dorong repositori lokal Anda hingga ke GitHub.

    git push --set-upstream origin main

Menyebarkan aplikasi web Anda

Langkah-langkah berikut menunjukkan cara membuat aplikasi situs statis baru dan menerapkannya ke lingkungan produksi.

Buat aplikasi

  1. Masuk ke portal Azure

  2. Pilih Buat Sumber Daya

  3. Cari Static Web Apps

  4. Pilih Aplikasi Web Statis

  5. Pilih Buat

  6. Pada tab Dasar, masukkan nilai berikut ini untuk setiap pengaturan.

    Properti Nilai
    Langganan Nama langganan Azure Anda.
    Grup sumber daya my-gatsby-group
    Nama my-gatsby-app
    Jenis paket Gratis
    Region for Azure Functions API dan lingkungan pementasan Pilih wilayah terdekat dengan Anda.
    Sumber GitHub

  7. Pilih Masuk dengan GitHub dan autentikasi dengan GitHub.

  8. Masukkan nilai GitHub berikut.

    Properti Nilai
    Organisasi Pilih organisasi GitHub yang Anda inginkan.
    Repositori Pilih gatsby-static-web-app.
    Cabang Pilih utama.

    Catatan

    Jika Anda tidak melihat repositori apa pun, Anda mungkin perlu mengotorisasi Azure Static Web Apps di GitHub. Telusuri ke repositori GitHub Anda dan buka aplikasi Pengaturan >> Aplikasi OAuth Resmi, pilih Azure Static Web Apps, lalu pilih Berikan. Untuk repositori organisasi, Anda harus menjadi pemilik organisasi untuk memberikan izin.

  9. Di bagian Bangun Detail, pilih Gatsby dari drop-down Bangun Preset dan pertahankan nilai default.

Tinjau dan buat

  1. Pilih Tinjau + Buat untuk memverifikasi bahwa semua detail sudah benar.

  2. Pilih Buat untuk memulai pembuatan App Service Static Web App dan provisikan GitHub Actions untuk penyebaran.

  3. Setelah penyebaran selesai, pilih Buka sumber daya.

  4. Pada layar sumber daya, pilih tautan URL untuk membuka aplikasi yang Anda sebarkan. Anda mungkin perlu menunggu satu atau dua menit agar GitHub Actions selesai.

    Deployed application

Membersihkan sumber daya

Jika ingin berhenti menggunakan aplikasi ini, Anda dapat menghapus sumber daya Azure Static Web Apps melalui langkah-langkah berikut:

  1. Membuka portal Azure
  2. Di bilah pencarian atas, cari aplikasi Anda menggunakan nama yang Anda berikan sebelumnya
  3. Klik aplikasi
  4. Klik tombol Hapus
  5. Klik Ya untuk mengonfirmasi tindakan penghapusan

Langkah berikutnya

Tambahkan domain kustom