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

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 penyajian 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

• Sebuah akun Azure dengan langganan aktif. Buat akun secara gratis.
• Akun GitHub. Buat akun secara gratis.
• Node.js 16 atau yang lebih baru terinstal.

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. Pindah ke http://github.com/staticwebdev/nuxt-3-starter/generate.

2. Beri nama repositori nuxt-3-starter.

3. Selanjutnya, kloning repositori 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. Navigasi ke aplikasi Nuxt.js yang baru dikloning:

   cd nuxt-3-starter
   

5. Instal dependensi:

   npm install
   

6. Mulai aplikasi Nuxt.js dalam pengembangan:

   npm run dev -- -o
   

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

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. Navigasi ke 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.

   Harta benda	Nilai
   Subscription	Nama langganan Azure Anda.
   grup Sumber Daya	my-nuxtjs-group
   Nama	my-nuxt3-app
   Jenis rencana	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.

   Harta benda	Nilai
   Organisasi	Pilih organisasi GitHub yang Anda inginkan.
   Repositori	Pilih repositori yang Anda buat sebelumnya.
   Cabang	Pilih menu utama.

9. Di bagian Detail Build , pilih Kustom dari menu drop-down Build Presets dan pertahankan nilai default.

10. Di lokasi Aplikasi, masukkan / dalam kotak.

11. Di lokasi API, masukkan .output/server di kotak.

12. Di Lokasi output, masukkan .output/public di kotak.

Tinjau dan buat

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

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

3. Setelah penyebaran selesai, pilih Pergi ke sumber daya.

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

Jika situs web tidak segera dimuat, 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 menavigasi ke 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 melakukan pull commit yang mengandung file baru.

git pull

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

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

Menyiapkan domain kustom