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ı, GitHub'dan dağıtım için bilgileri ve dosyaları almak için azure-search-static-web-app deposundaki fork'unuzu kullanır.

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

1. Visual Studio Code'da, azure-search-static-web-app gibi toplu ekleme klasörü yerine 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. Değişikliklerinizi işlemenizi isteyen bir açılır pencere görürseniz, bunu yapmayın. Toplu veri aktarma adımındaki sırlar depoya kaydedilmemelidir.

   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.

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

   İstem	Gir
   Yeni kaynaklar için bir kaynak grubu seçin.	Statik uygulama için yeni bir kaynak grubu oluşturun.
   Yeni Statik Web Uygulaması'nın adını girin.	Statik uygulamanıza gibi my-demo-static-web-appbir ad verin.
   SKU seçin	Bu öğretici için ücretsiz SKU'yu seçin.
   Yeni kaynaklar için bir konum seçin.	Size yakın olan 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	client Bu, depo kökünden statik web uygulamanıza giden yoldur.
   Oluşturma çıktınızın yolunu yazın...	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.

6. Statik web uygulaması oluşturulduğunda, yerel makinenizde ve fork'unuzda GitHub'da 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, çatalladığınız repoya yönlendiren bir tarayıcı penceresi açar.

   • Çatalladığınız depodaki 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.

     

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

Arama yöneticisi anahtarınızı en az ayrıcalık ilkesine uygun olmayan sorgu amaçları için yeniden kullanmak isteyebilirsiniz. Azure İşlevi, en az ayrıcalıkla uyumlu olması için sorgu anahtarını kullanmalıdır.

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 YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME
   

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 Fonksiyon uygulaması, arama saklı anahtarları ayarlara eklenene 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şkenlerini ve ardından + Uygulama ayarı ekle seçeneğini seçin.

   

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. Bir alan adından sonra * ekleyin, bu alanın Collection(Edm.String) türünde olduğunu belirtir. 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, Static Web Apps alanının altındaki Azure aboneliğinizin üzerine sağ tıklayın ve bu öğretici için oluşturduğunuz statik web uygulamasını bulun.

3. Statik web uygulamasının 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ı ve app_location, api_location ve output_location için statik web uygulaması ayarlarına sahip olmalıdır. Eylem başarılı bir şekilde 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 durum statik web uygulamasının Azure'a geçtikten 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 sorgusu 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. Yolların doğru olduğundan emin olmak için dağıtım bölümünü yeniden ziyaret edin.

Kaynakları temizleme

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

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

2. Kenar çubuğunda, Static Web Apps alanının altında Azure aboneliğinizde sağ tıklayın ve bu öğretici için oluşturduğunuz uygulamayı bulun.

3. Uygulama adına sağ tıklayın ve Sil'i seçin.

4. Artık GitHub'daki örnek çatalı istemiyorsanız, bunu GitHub'da silmeyi unutmayın. Çatalınızın Ayarlar bölümüne gidin ve depoyu silin.

5. Azure AI Arama'yı silmek için arama hizmetinizi bulun ve sayfanın üst kısmındaki Sil'i seçin.

Sonraki adımlar

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