Aracılığıyla paylaş

Azure Static Web Apps'te statik işlenmiş Next.js web siteleri dağıtma

Bu öğreticide, Next.js oluşturulan bir statik web sitesini Azure Static Web Apps'e dağıtmayı öğrenin. Next.js özellikleri hakkında daha fazla bilgi için bakınız başlangıç şablonu README.

Ö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. https://github.com/staticwebdev/nextjs-starter/generate'a git

  2. Depoya nextjs-starter adını verin

  3. Ardından yeni depoyu makinenize kopyalayın. <YOUR_GITHUB_ACCOUNT_NAME> ifadesini hesap adınız ile değiştirdiğinizden 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. Uygulamayı açmak için http://localhost:3000 adresine gidin; burada tercih ettiğiniz tarayıcıda aşağıdaki web sitesini açık olarak görmelisiniz.

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ı Azure Static Web Apps'e bağlama adımları gösterilmektedir. Azure'da uygulamayı bir üretim ortamına dağıtabilirsiniz.

  1. Azure portala gidin.

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

  3. Statik Web Uygulamaları'nı arayın.

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

  5. Oluştur'i seçin.

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

    Mülkiyet Değer
    Subscription Azure aboneliğinizin adı.
    Kaynak Grubu my-nextjs-group
    İsim 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. GitHub ile oturum aç'ı seçin ve istenirse GitHub ile kimlik doğrulaması yapın.

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

    Mülkiyet Değer
    Organizasyon Uygun GitHub kuruluşunu seçin.
    Repository nextjs-starter öğesini seçin.
    Şube Ana öğeyi 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.

    Mülkiyet Değer
    Uygulama konumu / kutuya girin.
    API konumu Bu kutuyu boş bırakın.
    Çıkış konumu Kutuya out yazın.

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ı'nın oluşturulmasını başlatmak 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 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, main dalında yapılan tüm değişiklikler, web sitenizin yeni bir derlenmesini 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şturmuştur. 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ş bir Next.js uygulaması olarak kabul edilir, ancak statik site oluşturucu olarak kullanmaya devam etmek için dağıtım görevini güncelleştirmeniz gerekir.

  1. Visual Studio Code'da depoyu açın.

  2. Azure Static Web Apps'in deponuza eklediği GitHub Actions dosyasına gidin .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Derleme ve Dağıtma işini, IS_STATIC_EXPORT olarak ayarlanmış bir ortam değişkenine true olarak gü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 render edilir.

Kaynakları temizle

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. Üst arama çubuğundan my-nextjs-group araması yapın.
  3. Grup adını seçin.
  4. 'ı seçin,'i silin.
  5. Silme eylemini onaylamak için Evet'i seçin.

Sonraki Adımlar

Özel etki alanı ayarlama

  • Last updated on