3. Adım - Arama özellikli .NET web sitesini dağıtma

Arama özellikli web sitesini Azure Static Web Apps sitesi olarak dağıtın. Bu dağıtım hem web sayfaları için React uygulamasını hem de arama işlemleri için İşlev uygulamasını içerir.

Statik web uygulaması, örnek deposu çatalınızı kullanarak GitHub'dan dağıtım için bilgileri ve dosyaları çeker.

Visual Studio Code'da Statik Web Uygulaması oluşturma

1. Visual Studio Code'da, toplu ekleme klasörü (örneğin) azure-search-javascript-samplesyerine depo kökünde olduğunuzdan emin olun.

2. Etkinlik Çubuğu'ndan Azure'ı seçin ve yan çubuktan Kaynaklar'ı açın.

3. Statik Web Uygulamaları'nı sağ tıklatın ve ardından Statik Web Uygulaması Oluştur (Gelişmiş)'i seçin. Bu seçeneği görmüyorsanız Visual Studio Code için Azure İşlevleri uzantısına sahip olduğunuzu doğrulayın.

   

4. Visual Studio Code'da hangi daldan dağıtmak istediğinizi soran bir açılır pencere görürseniz varsayılan dalı (genellikle ana) seçin.

   Bu ayar yalnızca bu dala kaydettiğiniz değişikliklerin statik web uygulamanıza dağıtılacağı anlamına gelir.

5. Değişikliklerinizi işlemenizi isteyen bir açılır pencere görürseniz, bunu yapmayın. Toplu içeri aktarma adımındaki gizli diziler depoya işlenmemelidir.

   Değişiklikleri geri almak için, Visual Studio Code'da Etkinlik çubuğunda Kaynak Denetimi simgesini seçin, ardından Değişiklikler listesinde değiştirilen her dosyayı seçin ve Değişiklikleri at simgesini seçin.

6. Statik web uygulamasını oluşturmak için istemleri izleyin:

   İstem	Enter
   Yeni kaynaklar için bir kaynak grubu seçin.	Bu öğretici için oluşturduğunuz kaynak grubunu kullanın.
   Yeni Statik Web Uygulaması'nın adını girin.	Kaynağınız için benzersiz bir ad oluşturun. Örneğin, adınızı gibi bir depo adına my-demo-static-web-appönceden ekleyebilirsiniz.
   SKU seçin	Bu öğretici için ücretsiz SKU'yu seçin.
   Yeni kaynaklar için bir konum seçin.	Node.js için: Azure İşlevi programlama modeli (PM) v4 önizlemesi sırasında seçin West US 2 . C# ve Python için yakınınızda bir bölge seçin.
   Varsayılan proje yapısını yapılandırmak için derleme ön ayarını seçin.	Özel'i seçin.
   İstemci uygulama kodunuzun konumunu seçin	search-website-functions-v4/client Bu, deponun kökünden statik web uygulamanıza giden yoldur.
   Azure İşlevleri kodunuzun konumunu seçin	search-website-functions-v4/api Bu, deponun kökünden statik web uygulamanıza giden yoldur. Depoda başka işlev yoksa işlev kodu konumu istenmez. Şu anda işlev kodu konumunun doğru olduğundan emin olmak için ek adımlar gerçekleştirmeniz gerekir. Bu adımlar, kaynak oluşturulduktan ve bu makalede belgelendikten sonra gerçekleştirilir.
   Derleme çıkışınızın yolunu girin...	build Bu, statik web uygulamanızdan oluşturulan dosyalarınıza giden yoldur.

   Yanlış bir bölgeyle ilgili hata alırsanız, kaynak grubu ve statik web uygulaması kaynağının hata yanıtında listelenen desteklenen bölgelerden birinde olduğundan emin olun.

7. Statik web uygulaması oluşturulduğunda, çatalınızdaki GitHub'da ve yerel olarak bir GitHub iş akışı YML dosyası oluşturulur. Bu iş akışı, statik web uygulamasını ve işlevlerini oluşturup dağıtarak çatalınızda yürütülür.

   Aşağıdaki yaklaşımlardan birini kullanarak statik web uygulaması dağıtımının durumunu denetleyin:

   • Bildirimler'den GitHub'da Eylemleri Aç'ı seçin. Bu, çatallanmış deponuza işaret eden bir tarayıcı penceresi açar.

   • Çatallanmış deponuzda Eylemler sekmesini seçin. Çatalınızdaki tüm iş akışlarının listesini görmeniz gerekir.

   • Visual Code'da Azure: Etkinlik Günlüğü'nü seçin. Aşağıdaki ekran görüntüsüne benzer bir ileti görmeniz gerekir.

     

8. Şu anda YML dosyası, Azure işlev kodu için hatalı yol söz dizimi ile oluşturulmuştur. Söz dizimini düzeltmek ve iş akışını yeniden çalıştırmak için bu geçici çözümü kullanın. YML dosyası oluşturulur oluşturulmaz bu adımı gerçekleştirebilirsiniz. Güncelleştirmeleri gönderdiğinizde yeni bir iş akışı başlatılır:

   1. Visual Studio Code gezgininde ./.github/workflows/ dizini açın.

   2. YML dosyasını açın.

   3. Yola gidin api-location (31. satırda veya yakınında).

   4. Eğik çizgi kullanmak için yol söz dizimini değiştirin (yalnızca api_location düzenleme gerekir, bağlam için diğer konumlar buradadır):

      app_location: "search-website-functions-v4/client" # App source code path
      api_location: "search-website-functions-v4/api" # Api source code path - optional
      output_location: "build" # Built app content directory - optional
      

   5. Dosyayı kaydedin.

   6. Tümleşik bir terminal açın ve güncelleştirilmiş YML'yi çatalınıza göndermek için aşağıdaki GitHub komutlarını çalıştırın:

      git add -A
      git commit -m "fix path"
      git push origin main
      

   

   Devam etmeden önce iş akışı yürütmesi tamamlanana kadar bekleyin. Bu işlem bir veya iki dakika sürebilir.

Visual Studio Code'da Azure AI Search sorgu anahtarını alma

1. Visual Studio Code'da yeni bir terminal penceresi açın.

2. Şu Azure CLI komutuyla sorgu API'sini alın:

   az search query-key list --resource-group cognitive-search-demo-rg --service-name my-cog-search-demo-svc
   

3. Bu sorgu anahtarını sonraki bölümde kullanmak üzere saklayın. Sorgu anahtarı, arama dizinine okuma erişimini yetkiler.

Azure portalında ortam değişkenleri ekleme

Azure İşlevi uygulaması, arama gizli dizileri ayarlara gelene kadar arama verilerini döndürmez.

1. Etkinlik Çubuğu'ndan Azure'ı seçin.

2. Statik Web Uygulamaları kaynağınıza sağ tıklayın ve Portalda Aç'ı seçin.

   

3. Ortam değişkenleri'ne ve ardından + Uygulama ayarı ekle'ye tıklayın.

   

4. Aşağıdaki ayarların her birini ekleyin:

   Ayar	Arama kaynağı değeriniz
   SearchApiKey	Arama sorgu anahtarınız
   SearchServiceName	Arama kaynağınızın adı
   SearchIndexName	good-books
   SearchFacets	authors*,language_code

   Azure AI Search, koleksiyonları filtrelemek için dizelere göre farklı söz dizimi gerektirir. * Alanın türünde Collection(Edm.String)olduğunu belirtmek için bir alan adından sonra ekleyin. Bu, Azure İşlevi'nin sorgulara doğru filtreler eklemesine olanak tanır.

5. Aşağıdaki ekran görüntüsüne benzediğinden emin olmak için ayarlarınızı denetleyin.

   

6. Visual Studio Code'a geri dönün.

7. Uygulama ayarlarını ve işlevlerini görmek için statik web uygulamanızı yenileyin.

   

Uygulama ayarlarını görmüyorsanız GitHub iş akışını güncelleştirme ve yeniden başlatma adımlarını yeniden ziyaret edin.

Statik web uygulamanızda aramayı kullanma

1. Visual Studio Code'da Etkinlik çubuğunu açın ve Azure simgesini seçin.

2. Kenar çubuğunda, alanının altındaki Static Web Apps Azure aboneliğinize sağ tıklayın ve bu öğretici için oluşturduğunuz statik web uygulamasını bulun.

3. Statik web uygulaması adına sağ tıklayın ve Siteye gözat'ı seçin.

   

4. Açılır iletişim kutusunda Aç'ı seçin.

5. Web sitesi arama çubuğuna gibi codebir arama sorgusu girin, bu nedenle öneri özelliği kitap başlıklarını önerir. Bir öneri seçin veya kendi sorgunuzu girmeye devam edin. Arama sorgunuzu tamamladığınızda Enter tuşuna basın.

6. Sonuçları gözden geçirin ve daha fazla ayrıntı görmek için kitaplardan birini seçin.

Sorun giderme

Web uygulaması dağıtmadıysa veya çalışmadıysa, sorunu belirlemek ve düzeltmek için aşağıdaki listeyi kullanın:

• Dağıtım başarılı oldu mu?

  Dağıtımınızın başarılı olup olmadığını belirlemek için örnek depo çatalınıza gitmeniz ve GitHub eyleminin başarısını veya başarısızlığını gözden geçirmeniz gerekir. Yalnızca bir eylem olmalıdır ve , api_locationve output_locationiçin app_locationstatik web uygulaması ayarlarına sahip olmalıdır. Eylem başarıyla dağıtılmadıysa, eylem günlüklerini inceleyin ve son hatayı arayın.

• İstemci (ön uç) uygulaması çalışıyor mu?

  Web uygulamanıza ulaşabilmeniz ve başarıyla görüntülenmesi gerekir. Dağıtım başarılı olduysa ancak web sitesi görüntülenmiyorsa, bu statik web uygulamasının Azure'a eklendikten sonra uygulamayı yeniden derlemek için nasıl yapılandırıldığıyla ilgili bir sorun olabilir.

• API (sunucusuz arka uç) uygulaması çalışıyor mu?

  İstemci uygulamasıyla etkileşim kurabilmeniz, kitap araması yapabilmeniz ve filtreleme yapabilmeniz gerekir. Form herhangi bir değer döndürmezse tarayıcının geliştirici araçlarını açın ve API'ye yapılan HTTP çağrılarının başarılı olup olmadığını belirleyin. Çağrılar başarılı olmadıysa, API uç noktası adı ve Arama sorgu anahtarı için statik web uygulaması yapılandırmalarının yanlış olması en olası nedendir.

  YML dosyasında Azure işlev kodunun (api_location) yolu doğru değilse, uygulama yüklenir ancak Azure AI Search ile tümleştirme sağlayan işlevlerden hiçbirini çağırmaz. Yolu düzeltme konusunda yardım için dağıtım bölümündeki geçici çözümü yeniden ziyaret edin.

Kaynakları temizleme

Bu öğreticide oluşturulan kaynakları temizlemek için kaynak grubunu silin.

1. Visual Studio Code'da Etkinlik çubuğunu açın ve Azure simgesini seçin.

2. Kenar çubuğunda, alanının altındaki Resource Groups Azure aboneliğinize sağ tıklayın ve bu öğretici için oluşturduğunuz kaynak grubunu bulun.

3. Kaynak grubu adına sağ tıklayın ve Sil'i seçin. Bu işlem hem Arama hem de Statik Web Apps kaynaklarını siler.

4. Artık örneğin GitHub çatalını istemiyorsanız bunu GitHub'da silmeyi unutmayın. Çatalınızın Ayarlar gidin ve çatalı silin.

Sonraki adımlar

• Arama özellikli web sitesi için Arama tümleştirmesini anlama