Aracılığıyla paylaş

Azure Static Web Apps'te evrensel işleme ile Nuxt 3 sitelerini dağıtma

Bu öğreticide, Bir Nuxt 3 uygulamasını Azure Static Web Apps'e dağıtmayı öğreneceksiniz. Nuxt 3, sunucu ve API yolları dahil olmak üzere evrensel (istemci tarafı ve sunucu tarafı) işlemeyi destekler. Ek yapılandırma olmadan, Evrensel işleme ile Nuxt 3 uygulamalarını Azure Static Web Apps'e dağıtabilirsiniz. Uygulama Statik Web Apps GitHub Eylemi veya Azure Pipelines görevinde oluşturulduğunda, Nuxt 3 bunu otomatik olarak statik varlıklara ve Azure Static Web Apps ile uyumlu bir Azure İşlevleri uygulamasına dönüştürür.

Önkoşullar

Nuxt 3 uygulaması ayarlama

kullanarak npx nuxi init nuxt-appyeni bir Nuxt projesi ayarlayabilirsiniz. Yeni bir proje kullanmak yerine, bu öğretici, bir Nuxt 3 sitesinin evrensel render ile Azure Static Web Apps'te nasıl dağıtılacağını göstermek için önceden hazırlanmış mevcut bir depo kullanmaktadır.

  1. http://github.com/staticwebdev/nuxt-3-starter/generate'a gidin.

  2. Depoya nuxt-3-starter adını verin.

  3. Ardından yeni depoyu makinenize kopyalayın. <YOUR_GITHUB_ACCOUNT_NAME> ifadesini, hesap adınızla değiştirin.

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

  4. Yeni kopyalanan Nuxt.js uygulamasına gidin:

    cd nuxt-3-starter

  5. Bağımlılıkları yükleme:

    npm install

  6. Geliştirme aşamasındaki Nuxt.js uygulamasını başlatın:

    npm run dev -- -o

Uygulamayı açmak için http://localhost:3000 adresine gidin, burada tercih ettiğiniz tarayıcıda aşağıdaki web sitesinin açıldığını görmelisiniz. Sunucu ve API yollarını çağırmak için düğmeleri seçin.

uygulamayı Nuxt.js başlatma

Nuxt 3 sitenizi dağıtın

Aşağıdaki adımlarda Azure Static Web Apps kaynağı oluşturma ve uygulamanızı GitHub'dan dağıtmak için yapılandırma adımları gösterilmektedir.

Azure Static Web Apps kaynağı oluşturma

  1. Azure portalına gidin.

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

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

  4. Statik Web Uygulamaları'nı 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-nuxtjs-group
    İsim my-nuxt3-app
    Plan türü Ücretsiz
    Azure İşlevleri API'leri ve hazırlama ortamları için bölge Size en yakın bölgeyi seçin.
    Kaynak GitHub

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

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

    Mülkiyet Değer
    Organizasyon İstediğiniz GitHub kuruluşunu seçin.
    Repository Daha önce oluşturduğunuz depoyu seçin.
    Şube Ana öğeyi seçin.

  9. Derleme Ayrıntıları bölümünde, Derleme Ön Ayarları açılan listesinden Özel'i seçin ve varsayılan değerleri koruyun.

  10. Uygulama konumu kutusuna / girin.

  11. Api konumunda.output/server kutuya girin.

  12. Çıkış konumuna kutuya .output/public yazın.

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. Statik web uygulamasını 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 seçeneğini 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, arka plan GitHub Actions iş akışı çalışmaya devam eder. İş akışı tamamlandıktan sonra web uygulamanızı görüntülemek için tarayıcıyı yenileyebilirsiniz.

Deponuzun Eylemler bölümüne giderek Eylemler iş akışlarının durumunu denetleyebilirsiniz:

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

Değişiklikleri eşitleme

Uygulamayı oluşturduğunuzda, Azure Static Web Apps deponuzda bir GitHub Actions iş akışı dosyası oluşturmuştur. Terminale dönün ve yeni dosyayı içeren işlemeyi çekmek için aşağıdaki komutu çalıştırın.

git pull

Kodu güncelleştirip GitHub'a göndererek uygulamada değişiklik yapın. GitHub Actions, uygulamayı otomatik olarak oluşturur ve dağıtır.

Daha fazla bilgi için Bkz. Azure Static Web Apps Nuxt 3 dağıtım ön ayarı belgeleri.

Özel etki alanı ayarlama

  • Last updated on