Sebarkan situs Nuxt 3 dengan penyajian universal di Azure Static Web Apps

  • Artikel

Dalam tutorial ini, Anda belajar menyebarkan aplikasi Nuxt 3 ke Azure Static Web Apps. Nuxt 3 mendukung penyajian universal (sisi klien dan sisi server), termasuk rute server dan API. Tanpa konfigurasi tambahan, Anda dapat menyebarkan aplikasi Nuxt 3 dengan rendering universal ke Azure Static Web Apps. Saat aplikasi dibangun dalam tugas Static Web Apps GitHub Action atau Azure Pipelines, Nuxt 3 secara otomatis mengonversinya menjadi aset statis dan aplikasi Azure Functions yang kompatibel dengan Azure Static Web Apps.

Prasyarat

Menyiapkan aplikasi Nuxt 3

Anda dapat menyiapkan proyek Nuxt baru menggunakan npx nuxi init nuxt-app. Alih-alih menggunakan proyek baru, tutorial ini menggunakan penyiapan repositori yang ada untuk menunjukkan cara menyebarkan situs Nuxt 3 dengan penyajian universal di Azure Static Web Apps.

  1. Navigasikan ke http://github.com/staticwebdev/nuxt-3-starter/generate.

  2. Beri nama repositori nuxt-3-starter.

  3. Selanjutnya, kloning repo baru ke komputer Anda. Pastikan untuk mengganti <YOUR_GITHUB_ACCOUNT_NAME> dengan nama akun Anda.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. Buka aplikasi Nuxt.js yang baru dikloning:

    cd nuxt-3-starter

  5. Instal dependensi:

    npm install

  6. Mulai aplikasi Nuxt.js yang sedang dikembangkan:

    npm run dev -- -o

Navigasi ke http://localhost:3000 untuk membuka aplikasi, tempat Anda akan melihat situs web berikut terbuka di browser pilihan Anda. Pilih tombol untuk memanggil rute server dan API.

Memulai aplikasi Nuxt.js

Menyebarkan situs Nuxt 3 Anda

Langkah-langkah berikut menunjukkan cara membuat sumber daya Azure Static Web Apps dan mengonfigurasinya untuk menyebarkan aplikasi Anda dari GitHub.

Membuat sumber daya Azure Static Web Apps

  1. Buka portal Microsoft Azure.

  2. Pilih Buat Sumber Daya.

  3. Cari Static Web Apps.

  4. Pilih Static Web Apps.

  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-nuxtjs-group
    Nama my-nuxt3-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 repositori yang Anda buat sebelumnya.
    Cabang Pilih utama.

  9. Di bagian Rincian Bangun, pilih Kustom dari tarik-turun Bangun Preset dan pertahankan nilai defaultnya.

  10. Di Lokasi aplikasi, masukkan / dalam kotak.

  11. Di lokasi Api, masukkan .output/server dalam kotak.

  12. Di lokasi Output, masukkan .output/public dalam kotak.

Tinjau dan buat

  1. Pilih Tinjau + Buat untuk memverifikasi bahwa detailnya sudah benar.

  2. Pilih Buat untuk memulai pembuatan aplikasi web statis dan provisikan GitHub Actions untuk penyebaran.

  3. Setelah penyebaran selesai, pilih Buka sumber daya.

  4. Pada jendela Ringkasan, pilih tautan URL untuk membuka aplikasi yang Anda sebarkan.

Jika situs web tidak segera dimuat, maka alur kerja GitHub Actions latar belakang masih berjalan. Setelah alur kerja selesai, Anda kemudian dapat merefresh browser untuk melihat aplikasi web Anda.

Anda dapat memeriksa status alur kerja Tindakan dengan membuka Tindakan untuk repositori Anda:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Menyinkronkan perubahan

Saat Anda membuat aplikasi, Azure Static Web Apps membuat file alur kerja GitHub Actions di repositori Anda. Kembali ke terminal dan jalankan perintah berikut untuk menarik penerapan yang berisi file baru.

git pull

Buat perubahan pada aplikasi dengan memperbarui kode dan mendorongnya ke GitHub. GitHub Actions secara otomatis membuat dan menyebarkan aplikasi.

Untuk informasi selengkapnya, lihat dokumentasi prasetel penyebaran Azure Static Web Apps Nuxt 3.

Menyiapkan domain kustom