Bagikan melalui

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

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

Prasyarat

1. Menyiapkan aplikasi Next.js

Daripada menggunakan CLI Next.js untuk membuat aplikasi, Anda dapat menggunakan repositori pemula. Repositori awal berisi aplikasi Next.js yang sudah ada yang mendukung rute dinamis.

Untuk memulai, buat repositori baru di bawah akun GitHub Anda dari repositori templat.

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

  2. Beri nama repositori nextjs-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>/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. Pergi ke http://localhost:3000 untuk membuka aplikasi, di mana Anda akan melihat situs web berikut terbuka di browser pilihan Anda.

Mulai aplikasi Next.js

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

Halaman rincian

2. Buat aplikasi statis

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

  1. Buka portal Azure.

  2. Pilih Buat Sumber Daya.

  3. Cari Static Web Apps.

  4. Pilih Static Web App.

  5. Pilih Buat.

  6. Pada tab Dasar, masukkan nilai berikut.

    Harta benda Nilai
    Subscription Nama langganan Azure Anda.
    grup Sumber Daya my-nextjs-group
    Nama my-nextjs-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, jika diminta.

  8. Masukkan nilai GitHub berikut.

    Harta benda Nilai
    Organisasi Pilih organisasi GitHub yang sesuai.
    Repositori Pilih nextjs-starter.
    Cabang Pilih menu utama.

  9. Di bagian Detail Build, pilih Kustom dari Pengaturan Build. Tambahkan nilai berikut untuk konfigurasi build.

    Harta benda Nilai
    Lokasi aplikasi Masukkan / dalam kotak.
    Lokasi api Biarkan kotak ini kosong.
    Lokasi output Masukkan keluar dalam kotak.

3. 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, klik Buka sumber daya.

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

Jika situs web tidak segera dimuat, build masih berjalan. Untuk memeriksa status alur kerja Tindakan, navigasikan 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.

Sekarang, setiap perubahan yang dilakukan pada branch main akan memulai build dan penyebaran baru untuk situs web Anda.

4. Sinkronkan perubahan

Saat Anda membuat aplikasi, Azure Static Web Apps membuat file GitHub Actions di repositori Anda. Sinkronkan dengan server dengan menarik data terbaru ke repositori lokal Anda.

Kembali ke terminal dan jalankan perintah git pull origin mainberikut .

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 ditambahkan Azure Static Web Apps ke repositori Anda di .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Perbarui pekerjaan Build dan Deploy agar memiliki variabel lingkungan IS_STATIC_EXPORT yang diatur menjadi 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 hapus.

Langkah selanjutnya

Menyiapkan domain kustom

  • Last updated on