Aracılığıyla paylaş

Statik olarak işlenmiş Next.js web sitelerini Azure Static Web Apps dağıtma

  • Makale

Bu öğreticide, Next.js oluşturulan statik web sitesini Azure Static Web Apps dağıtmayı öğrenin. Next.js özellikleri hakkında daha fazla bilgi için başlangıç şablonu benioku bölümüne bakın.

Önkoşullar

1. Next.js uygulaması ayarlama

Uygulamanızı oluşturmak için Next.js CLI kullanmak yerine bir başlangıç deposu kullanabilirsiniz. Başlangıç deposu, dinamik yolları destekleyen mevcut bir Next.js uygulaması içerir.

Başlamak için, GitHub hesabınızın altında bir şablon deposundan yeni bir depo oluşturun.

  1. Şuraya gidin: https://github.com/staticwebdev/nextjs-starter/generate

  2. Depoya nextjs-starter adını verin

  3. Ardından, yeni depoyu makinenize kopyalayın. değerini hesap adınız ile değiştirdiğinden <YOUR_GITHUB_ACCOUNT_NAME> emin olun.

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

  4. Yeni kopyalanan Next.js uygulamasına gidin.

    cd nextjs-starter

  5. Bağımlılıkları yükleyin.

    npm install

  6. Geliştirme aşamasında Next.js uygulamayı başlatın.

    npm run dev

  7. http://localhost:3000 Aşağıdaki web sitesinin tercih ettiğiniz tarayıcıda açık olduğunu görmeniz gereken uygulamayı açmak için adresine gidin:

uygulamayı Next.js başlatma

Bir çerçeve veya kitaplık seçtiğinizde, seçili öğeyle ilgili ayrıntılar sayfasını görürsünüz:

Ayrıntılar sayfası

2. Statik uygulama oluşturma

Aşağıdaki adımlarda uygulamanızın Azure Static Web Apps nasıl bağlanacakları gösterilmektedir. Azure'da uygulamayı bir üretim ortamına dağıtabilirsiniz.

  1. Azure Portal gidin.

  2. Kaynak Oluştur’u seçin.

  3. Static Web Apps arayın.

  4. Statik Web Uygulaması'ı seçin.

  5. Oluştur’u seçin.

  6. Temel Bilgiler sekmesinde aşağıdaki değerleri girin.

    Özellik Değer
    Abonelik Azure aboneliğinizin adı.
    Kaynak grubu my-nextjs-group
    Ad my-nextjs-app
    Plan türü Ücretsiz
    Azure İşlevleri API ve hazırlama ortamları için bölge Size en yakın bölgeyi seçin.
    Kaynak GitHub

  7. İstenirse GitHub ile oturum açın ve GitHub ile kimlik doğrulaması yapın'ı seçin.

  8. Aşağıdaki GitHub değerlerini girin.

    Özellik Değer
    Kuruluş Uygun GitHub kuruluşunu seçin.
    Depo nextjs-starter'ı seçin.
    Dal Ana öğesini seçin.

  9. Derleme Ayrıntıları bölümünde, DerlemeÖn Ayarları'ndanÖzel'i seçin. Derleme yapılandırması için aşağıdaki değerleri ekleyin.

    Özellik Değer
    Uygulama konumu Kutuya girin / .
    API konumu Bu kutuyu boş bırakın.
    Çıkış konumu Kutuya girin .

3. Gözden geçirme ve oluşturma

  1. Ayrıntıların doğru olduğunu doğrulamak için Gözden Geçir + Oluştur'u seçin.

  2. App Service Statik Web Uygulaması oluşturmaya başlamak ve dağıtım için bir GitHub Actions sağlamak için Oluştur'u seçin.

  3. Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.

  4. Genel Bakış penceresinde, dağıtılan uygulamanızı açmak için URL bağlantısını seçin.

Web sitesi hemen yüklenmiyorsa derleme çalışmaya devam eder. Eylemler iş akışının durumunu denetlemek için deponuzun Eylemler panosuna gidin:

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

İş akışı tamamlandıktan sonra web uygulamanızı görüntülemek için tarayıcıyı yenileyebilirsiniz.

Artık dalda yapılan tüm değişiklikler web sitenizin main yeni bir derlemesini ve dağıtımını başlatır.

4. Değişiklikleri eşitleme

Uygulamayı oluşturduğunuzda, Azure Static Web Apps deponuzda bir GitHub Actions dosyası oluşturdunuz. En son sürümü yerel deponuza çekerek sunucuyla eşitleyin.

Terminale dönün ve aşağıdaki komutu git pull origin mainçalıştırın.

Statik İşlemeyi Yapılandırma

Varsayılan olarak, uygulama karma işlenmiş Next.js uygulama olarak kabul edilir, ancak statik site oluşturucu olarak kullanmaya devam etmek için dağıtım görevini güncelleştirmeniz gerekir.

  1. Depoyu Visual Studio Code açın.

  2. adresinden deponuza eklenen Azure Static Web Apps GitHub Actions dosyasına gidin.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Derleme ve Dağıtma işini, ortam değişkeninin IS_STATIC_EXPORT olarak ayarlandığı şekilde truegüncelleştirin:

        - 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. Değişiklikleri git'e işleyin ve GitHub'a gönderin.

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

Derleme tamamlandıktan sonra site statik olarak işlenir.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz, aşağıdaki adımları izleyerek Azure Static Web Apps örneğini silebilirsiniz.

  1. Azure portalını açın.
  2. Üstteki arama çubuğundan my-nextjs-group araması yapın.
  3. Grup adında öğesini seçin.
  4. Sil’i seçin.
  5. Silme eylemini onaylamak için Evet'i seçin.

Sonraki adımlar

Özel etki alanı ayarlama