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

  • Makale

Bu öğreticide bir Nuxt 3 uygulamasını Azure Static Web Apps 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, Azure Static Web Apps evrensel işleme ile Nuxt 3 uygulamalarını dağıtabilirsiniz. Uygulama Static Web Apps GitHub Eylemi veya Azure Pipelines görevinde derlendiğinde, Nuxt 3 bunu otomatik olarak statik varlıklara ve Azure Static Web Apps 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. Bu öğreticide, yeni bir proje kullanmak yerine, Azure Static Web Apps üzerinde evrensel işleme ile bir Nuxt 3 sitesinin nasıl dağıtılacağı gösterilmektedir.

  1. http://github.com/staticwebdev/nuxt-3-starter/generate sayfasına gidin.

  2. Depoyu nuxt-3-starter olarak adlandırın.

  3. Ardından yeni depoyu makinenize kopyalayın. YOUR_GITHUB_ACCOUNT_NAME> hesabınızın adıyla değiştirdiğinden <emin olun.

    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

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. Sunucu ve API yollarını çağırmak için düğmeleri seçin.

uygulamayı Nuxt.js başlatma

Nuxt 3 sitenizi dağıtma

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. Static Web Apps arayın.

  4. Static Web Apps’ı 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-nuxtjs-group
    Ad my-nuxt3-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 GitHub ile kimlik doğrulaması yapın.

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

    Özellik Değer
    Kuruluş İstediğiniz GitHub kuruluşunu seçin.
    Depo Daha önce oluşturduğunuz depoyu seçin.
    Dal Ana öğesini 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 alanına kutuya girin/.

  11. Api konumuna kutuya .output/server yazın.

  12. Çıktı konumuna kutuya .output/public yazın.

Gözden geçir ve oluştur

  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'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 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şturdunuz. 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şiklikler yapın. GitHub Actions uygulamayı otomatik olarak derler ve dağıtır.

Daha fazla bilgi için nuxt 3 dağıtımı önceden Azure Static Web Apps belgelerine bakın.

Özel etki alanı ayarlama