Azure statik Web Apps üzerinde sunucu tarafından işlenen Nuxt.js Web siteleri dağıtma

Makale
08/29/2021
Okumak için 3 dakika

Bu öğreticide, Nuxt.js üretilmiş bir statik Web sitesini Azure statik Web Appsdağıtmayı öğreneceksiniz. Başlamak için Nuxt.js uygulamasını ayarlamayı, yapılandırmayı ve dağıtmayı öğreneceksiniz. Bu işlem sırasında, genellikle Nuxt.js ile statik sayfalar oluştururken ortaya çıkacak yaygın güçlüklerle uğraşmak üzere de öğrenirsiniz.

Önkoşullar

Etkin aboneliği olan bir Azure hesabı. Ücretsiz hesap oluşturun.
GitHub hesabı. Ücretsiz hesap oluşturun.
Node.js yüklendi.

Nuxt.js uygulaması ayarlama

Kullanarak yeni bir Nuxt.js projesi ayarlayabilirsiniz create-nuxt-app . Yeni bir proje yerine, bu öğreticide mevcut bir depoyu kopyalayarak başlarsınız. Bu depo, dinamik bir Nuxt.js uygulamasının statik bir site olarak nasıl dağıtılacağını göstermek üzere ayarlanır.

bir şablon deposundan GitHub hesabınız altında yeni bir depo oluşturun.
Şuraya gidin http://github.com/staticwebdev/nuxtjs-starter/generate
Depoyu nxtjs-Starter olarak adlandırın.
Sonra, yeni depoyu makinenize kopyalayın. <YOUR_GITHUB_ACCOUNT_NAME> hesap adınızla değiştirdiğinizden emin olun.
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxtjs-starter
```
Yeni kopyalanmış Nuxt.js uygulamasına gidin:
```
cd nuxtjs-starter
```
Bağımlılıkları yükler:
```
npm install
```
Geliştirme aşamasında Nuxt.js uygulamayı Başlat:
```
npm run dev
```

http://localhost:3000Aşağıdaki Web sitesini tercih ettiğiniz tarayıcınızda açık olarak görmeniz gereken uygulamayı açmak için şuraya gidin:

Nuxt.js uygulamayı Başlat

Bir çerçeveye/kitaplığa tıkladığınızda, seçili öğe hakkında bir Ayrıntılar sayfası görmeniz gerekir:

Ayrıntılar sayfası

Nuxt.js derlemeden statik bir Web sitesi oluşturma

Kullanarak bir Nuxt.js sitesi oluşturduğunuzda npm run build , uygulama statik bir site değil, geleneksel bir Web uygulaması olarak oluşturulur. Statik bir site oluşturmak için aşağıdaki uygulama yapılandırmasını kullanın.

Derleme betikindeki package.js komutu kullanarak yalnızca statik bir site oluşturacak şekilde güncelleştirin nuxt generate :
```
"scripts": {
  "dev": "nuxt dev",
  "build": "nuxt generate"
},
```
Artık bu komutla birlikte, statik Web Apps, build her bir yürütmeyi her gönderişinizde betiği çalıştıracaktır.
Statik site oluştur:
```
npm run build
```
Nuxt.js statik siteyi oluşturacak ve çalışma dizininizin kökündeki bir dağ klasörüne kopyalayacaktır.

Not

Dağıtım sırasında CI/CD tarafından oluşturulması gerektiğinden, bu klasör . gitignore dosyasında listelenir.

Statik Web sitenizi GitHub gönderin

Azure statik Web Apps, uygulamanızı bir GitHub deposundan dağıtır ve belirli bir dala gönderilen her bir yürütmeye devam eder. GitHub değişikliklerinizi eşitlemek için aşağıdaki komutları kullanın.

Değiştirilen tüm dosyaları aşamalandırın:
```
git add .
```
Tüm Değişiklikleri Kaydet
```
git commit -m "Update build config"
```
Değişikliklerinizi GitHub gönderin.
```
git push origin main
```

Statik Web sitenizi dağıtın

aşağıdaki adımlarda, yeni gönderdiğiniz uygulamanın GitHub Azure statik Web Apps 'a nasıl bağlayabileceğiniz gösterilmektedir. Azure 'da bir kez uygulamayı bir üretim ortamına dağıtabilirsiniz.

Azure statik Web Apps kaynağı oluşturma

Azure Portalgidin.
Kaynak Oluştur’u seçin.
Statik Web Apps arayın.
Static Web Apps’ı seçin.
Oluştur’u seçin.

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

Özellik	Değer
Abonelik	Azure abonelik adınız.
Kaynak grubu	My-nuxtjs-Grup
Ad	My-nuxtjs-uygulama
Plan türü	Ücretsiz
Azure Işlevleri API 'SI ve hazırlama ortamları için bölge	Size en yakın bölgeyi seçin.
Kaynak	GitHub

GitHub oturum aç ' ı seçin ve GitHub kimlik doğrulaması yapın.
aşağıdaki GitHub değerlerini girin.

Özellik Değer

Kuruluş istediğiniz GitHub kuruluşunuzu seçin.

Depo Daha önce oluşturduğunuz depoyu seçin.

Dal Ana öğesini seçin.
Yapı ayrıntıları bölümünde, derleme ön ayarları açılır listesinden özel ' i seçin ve varsayılan değerleri koruyun.
Uygulama konumunda, kutuya ./ yazın.
API konum kutusunu boş bırakın.
Çıkış konumu kutusuna Out girin.

Özellik	Değer
Kuruluş	istediğiniz GitHub kuruluşunuzu seçin.
Depo	Daha önce oluşturduğunuz depoyu seçin.
Dal	Ana öğesini seçin.

Gözden geçir ve oluştur

Ayrıntıların tümünün doğru olduğunu doğrulamak için gözden geçir + oluştur düğmesini seçin.
App Service statik Web uygulamasının oluşturulmasını başlatmak ve dağıtım için bir GitHub eylemi sağlamak için oluştur ' u seçin.
Dağıtım tamamlandıktan sonra, kaynak ' a gidin.
Genel bakış penceresinde, dağıtılan uygulamanızı açmak için URL bağlantısına tıklayın.

web sitesi hemen yük alıyorsa, arka plan GitHub eylemler iş akışı çalışmaya devam eder. İş akışı tamamlandıktan sonra Web uygulamanızı görüntülemek için tarayıcıyı Yenile ' ye tıklayabilirsiniz.

Deponuzdaki eylemlere giderek eylemler iş akışlarının durumunu kontrol edebilirsiniz:

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

Değişiklikleri Eşitle

uygulamayı oluştururken Azure Static Web Apps, deponuzda bir GitHub eylemler iş akışı dosyası oluşturdu. Git geçmişinizin eşitlenmesi için bu dosyayı yerel deponuza getirmeniz gerekir.

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

Dinamik yolları yapılandırma

Yeni dağıtılan siteye gidin ve Framework veya kitaplık logolarının birine tıklayın. Ayrıntılar sayfası almak yerine 404 hata sayfasına sahip olursunuz.

Dinamik yollarla 404

Bunun nedeni, Nuxt.js statik site tarafından oluşturulmuştur, yalnızca giriş sayfası için. Nuxt.js .html her sayfa dosyası için eşdeğer statik dosyalar üretebilir .vue , ancak bir özel durum vardır.

Sayfa dinamik bir sayfa ise, örneğin _id.vue , bu dinamik sayfadan statik BIR HTML oluşturmak için yeterli bilgi olmayacaktır. Dinamik yollar için olası yolları açıkça sağlamanız gerekir.

Dinamik yollardan statik sayfalar oluşturma

nuxt.config.js dosyasını, Nuxt.js her bir çerçeve/kitaplık için statik sayfalar oluşturmak üzere kullanılabilir tüm verilerin bir listesini kullanacak şekilde güncelleştirin:
```
  import { projects } from "./utils/projectsData";

  export default {
    mode: "universal",

    //...truncated

    generate: {
      async routes() {
        const paths = [];

        projects.forEach(project => {
          paths.push(`/project/${project.slug}`);
        });

        return paths;
      }
    }
  };
```
Not

routes zaman uyumsuz bir işlevdir, bu nedenle bu işlevdeki bir API 'ye istek yapabilir ve yollar oluşturmak için döndürülen listeyi kullanabilirsiniz.
GitHub deponuzdaki yeni değişiklikleri gönderin ve GitHub eylemler sitenizi yeniden oluşturup birkaç dakika bekleyin. Derleme tamamlandıktan sonra 404 hatası kaybolur.

Özel etki alanı ayarlama