Menyebarkan situs web Next.js yang dirender statik di Azure Static Web Apps

  • Artikel

Dalam tutorial ini, pelajari cara menyebarkan situs web statis yang dihasilkan Next.js ke Azure Static Web Apps. Untuk informasi selengkapnya tentang Next.js spesifik, lihat readme templat pemula.

Prasyarat

1. Menyiapkan aplikasi Next.js

Alih-alih menggunakan Next.js CLI untuk membuat aplikasi, Anda dapat menggunakan repositori starter. Repositori pemula berisi aplikasi Next.js yang ada yang mendukung rute dinamis.

Untuk memulai, buat repositori baru dengan akun GitHub dari repositori template.

  1. Buka https://github.com/staticwebdev/nextjs-starter/generate

  2. Beri nama repositori nextjs-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>/nextjs-starter

  4. Buka aplikasi Next.js yang baru dikloning.

    cd nextjs-starter

  5. Instal dependensi.

    npm install

  6. Mulai aplikasi Next.js dalam pengembangan.

    npm run dev

  7. http://localhost:3000 Buka untuk membuka aplikasi, tempat Anda akan melihat situs web berikut terbuka di browser pilihan Anda:

Memulai aplikasi Next.js

Saat memilih kerangka kerja atau pustaka, Anda akan melihat halaman detail mengenai item yang dipilih:

Halaman detail

2. Membuat aplikasi statis

Langkah berikut menunjukkan cara menautkan aplikasi Anda ke Azure Static Web Apps. Setelah di Azure, Anda dapat menyebarkan aplikasi ke lingkungan produksi.

  1. Buka portal Microsoft 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-nextjs-group
    Nama my-nextjs-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, jika diminta.

  8. Masukkan nilai GitHub berikut.

    Properti Nilai
    Organisasi Pilih organisasi GitHub yang sesuai.
    Repositori Pilih nextjs-starter.
    Cabang Pilih utama.

  9. Pada bagian Detail Build, pilih Kustom dari Preset Build. Tambahkan nilai berikut untuk konfigurasi build.

    Properti Nilai
    Lokasi aplikasi Masukkan / di dalam kotak.
    Lokasi Api Biarkan kotak ini kosong.
    Lokasi output Masukkan keluar di dalam kotak.

3. Tinjau dan buat

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

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

  3. Setelah penyebaran menyelesaikan pemilihan, Buka sumber daya.

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

Jika situs web tidak segera dimuat, artinya build masih berjalan. Untuk memeriksa status alur kerja Tindakan, arahkan ke dasbor Tindakan untuk repositori Anda:

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

Setelah alur kerja selesai, Anda dapat me-refresh browser untuk melihat aplikasi web Anda.

Kini, setiap perubahan yang dibuat untuk cabang main memulai build dan penyebaran baru untuk situs web Anda.

4. Menyinkronkan perubahan

Saat Anda membuat aplikasi, Azure Static Web Apps membuat file GitHub Actions pada repositori Anda. Sinkronkan dengan server dengan cara menarik yang terbaru ke bawah ke repositori lokal Anda.

Kembali ke terminal dan jalankan perintah git pull origin main berikut.

Mengonfigurasi Penyajian Statis

Secara default, aplikasi diperlakukan sebagai aplikasi Next.js yang dirender hibrid, tetapi untuk terus menggunakannya sebagai generator situs statis, Anda perlu memperbarui tugas penyebaran.

  1. Buka repositori di Visual Studio Code.

  2. Navigasi ke file GitHub Actions yang Azure Static Web Apps ditambahkan ke repositori Anda di.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Perbarui pekerjaan Build and Deploy agar memiliki variabel IS_STATIC_EXPORT lingkungan yang diatur ke true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Terapkan perubahan ke git dan dorong ke GitHub.

    git commit -am "Configuring static site generation" && git push

Setelah build selesai, situs akan dirender secara statis.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps melalui langkah-langkah berikut.

  1. Buka portal Microsoft Azure.
  2. Cari my-nextjs-group dari bilah pencarian atas.
  3. Pilih nama grup.
  4. Pilih Hapus.
  5. Pilih Ya untuk mengonfirmasi tindakan penghapusan.

Langkah berikutnya

Menyiapkan domain kustom