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ı, azure-search-static-web-app 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-static-web-appyerine 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 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.

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

   İstem	Enter
   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, deponun kökünden statik web uygulamanıza giden yoldur.
   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.

6. 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.

     

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 İş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 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, alanının altındaki Static Web Apps Azure aboneliğinize 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 örneğin GitHub çatalını 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