Bagikan melalui

Langkah 3 - Menyebarkan situs web .NET yang diaktifkan pencarian

  • Artikel

Sebarkan situs web yang diaktifkan pencarian sebagai situs Azure Static Web Apps. Penyebaran ini mencakup aplikasi React untuk halaman web, dan aplikasi Fungsi untuk operasi pencarian.

Aplikasi web statis menarik informasi dan file untuk penyebaran dari GitHub menggunakan fork Anda dari repositori azure-search-static-web-app.

Membuat Aplikasi Web Statik dalam Visual Studio Code

  1. Di Visual Studio Code, pastikan Anda berada di akar repositori, dan bukan folder sisipan massal (misalnya, azure-search-static-web-app).

  2. Pilih Azure dari Bilah Aktivitas, lalu buka Sumber Daya dari bilah samping.

  3. Klik kanan Static Web Apps lalu pilih Buat Static Web App (Tingkat Lanjut). Jika Anda tidak melihat opsi ini, verifikasi bahwa Anda memiliki ekstensi Azure Functions untuk Visual Studio Code.

    Cuplikan layar Visual Studio Code, dengan penjelajah Azure Static Web Apps memperlihatkan opsi untuk membuat aplikasi web statis tingkat lanjut.

  4. Jika Anda melihat jendela pop-up yang meminta Anda melakukan perubahan, jangan lakukan hal ini. Rahasia dari langkah impor massal tidak boleh diterapkan ke repositori.

    Untuk mengembalikan perubahan, di Visual Studio Code pilih ikon Kontrol Sumber di bilah Aktivitas, lalu pilih setiap file yang diubah di daftar Perubahan dan pilih ikon Buang perubahan .

  5. Ikuti perintah untuk membuat aplikasi web statis:

    Prompt Enter
    Pilih grup sumber daya untuk sumber daya baru. Buat grup sumber daya baru untuk aplikasi statis.
    Masukkan nama untuk Aplikasi Web Statik baru. Beri nama aplikasi statis Anda, seperti my-demo-static-web-app.
    Memilih SKU Pilih SKU gratis untuk tutorial ini.
    Pilih lokasi untuk sumber daya baru. Pilih wilayah di dekat Anda.
    Pilih preset build untuk mengonfigurasi struktur proyek default. Pilih Kustom.
    Pilih lokasi kode aplikasi klien Anda client

    Ini adalah jalur, dari akar repositori, ke aplikasi web statis Anda.
    Masukkan jalur output build Anda... build

    Ini adalah jalur, dari aplikasi web statis Anda, ke file yang Anda buat.

    Jika Anda mendapatkan kesalahan tentang wilayah yang salah, pastikan grup sumber daya dan sumber daya aplikasi web statis berada di salah satu wilayah yang didukung yang tercantum dalam respons kesalahan.

  6. Saat aplikasi web statis dibuat, file YML alur kerja GitHub juga dibuat secara lokal dan di GitHub di fork Anda. Alur kerja ini dijalankan di fork Anda, membangun dan menyebarkan aplikasi dan fungsi web statis.

    Periksa status penyebaran aplikasi web statis menggunakan salah satu pendekatan berikut:

    • Pilih Buka Tindakan di GitHub dari Pemberitahuan. Tindakan ini membuka jendela browser yang diarahkan ke repositori fork Anda.

    • Pilih tab Tindakan di repositori fork Anda. Anda akan melihat daftar semua alur kerja di fork Anda.

    • Pilih Azure: Log Aktivitas di Visual Code. Anda akan melihat pesan yang mirip dengan cuplikan layar berikut.

      Cuplikan layar Log Aktivitas di Visual Studio Code.

Mendapatkan kunci kueri Pencarian Azure AI di Visual Studio Code

Meskipun Anda mungkin tergoda untuk menggunakan kembali kunci admin pencarian Anda untuk tujuan kueri yang tidak mengikuti prinsip hak istimewa paling sedikit. Azure Function harus menggunakan kunci kueri agar sesuai dengan hak istimewa paling sedikit.

  1. Di Visual Studio Code, buka jendela terminal baru.

  2. Dapatkan kunci API kueri dengan perintah Azure CLI ini:

    az search query-key list --resource-group YOUR-SEARCH-SERVICE-RESOURCE-GROUP --service-name YOUR-SEARCH-SERVICE-NAME

  3. Pertahankan kunci kueri ini untuk digunakan di bagian berikutnya. Kunci kueri mengotorisasi akses baca ke indeks pencarian.

Menambahkan variabel lingkungan di portal Azure

Aplikasi Azure Function tidak akan mengembalikan data pencarian sampai rahasia pencarian berada di pengaturan.

  1. Pilih Azure dari Bilah Aktivitas.

  2. Klik kanan pada sumber daya Static Web Apps Anda lalu pilih Buka di Portal.

    Cuplikan layar Visual Studio Code memperlihatkan penjelajah Azure Static Web Apps dengan opsi Buka di Portal yang ditampilkan.

  3. Pilih Variabel lingkungan lalu pilih + Tambahkan pengaturan aplikasi.

    Cuplikan layar halaman variabel lingkungan aplikasi web statis di portal Azure.

  4. Tambahkan setiap pengaturan berikut:

    Pengaturan Nilai sumber daya Pencarian Anda
    SearchApiKey Kunci kueri pencarian Anda
    SearchServiceName Nama sumber daya pencarian Anda
    SearchIndexName good-books
    SearchFacets authors*,language_code

    Azure AI Search memerlukan sintaks yang berbeda untuk memfilter koleksi daripada yang dilakukannya untuk string. Tambahkan * setelah nama bidang untuk menunjukkan bahwa bidang adalah salah satu dari jenis Collection(Edm.String). Hal ini memungkinkan Fungsi Azure untuk menambahkan filter ke kueri dengan benar.

  5. Periksa pengaturan Anda untuk memastikannya terlihat seperti cuplikan layar berikut.

    Cuplikan layar browser memperlihatkan portal Azure dengan tombol untuk menyimpan pengaturan untuk aplikasi Anda.

  6. Kembali ke Visual Studio Code.

  7. Refresh aplikasi web statis Anda untuk melihat pengaturan dan fungsi aplikasi.

    Cuplikan layar Visual Studio Code memperlihatkan penjelajah Azure Static Web Apps dengan pengaturan aplikasi baru.

Jika Anda tidak melihat pengaturan aplikasi, kunjungi kembali langkah-langkah untuk memperbarui dan luncurkan ulang alur kerja GitHub.

Menggunakan pencarian di aplikasi web statis Anda

  1. Di Visual Studio Code, buka bilah Aktivitas, dan pilih ikon Azure.

  2. Di bilah Samping, klik kanan langganan Azure Anda di bawah Static Web Apps area dan temukan aplikasi web statis yang Anda buat untuk tutorial ini.

  3. Klik kanan nama aplikasi web statis dan pilih Telusuri situs.

    Cuplikan layar Visual Studio Code memperlihatkan penjelajah Azure Static Web Apps memperlihatkan opsi **Telusuri situs**.

  4. Pilih Buka dalam dialog pop-up.

  5. Di bilah pencarian situs web, masukkan kueri pencarian seperti code, sehingga fitur saran menyarankan judul buku. Pilih saran atau lanjutkan memasukkan kueri Anda. Tekan enter ketika Anda telah menyelesaikan kueri pencarian.

  6. Tinjau hasilnya, lalu pilih salah satu buku untuk melihat detail selengkapnya.

Pemecahan Masalah

Jika aplikasi web tidak disebarkan atau berfungsi, gunakan daftar berikut untuk menentukan dan memperbaiki masalah:

  • Apakah penyebaran berhasil?

    Untuk menentukan apakah penyebaran Anda berhasil, Anda perlu membuka fork repositori sampel dan meninjau keberhasilan atau kegagalan tindakan GitHub. Seharusnya hanya ada satu tindakan dan harus memiliki pengaturan aplikasi web statis untuk app_location, , api_locationdan output_location. Jika tindakan tidak berhasil disebarkan, selaraskan log tindakan dan cari kegagalan terakhir.

  • Apakah aplikasi klien (front-end) berfungsi?

    Anda harus dapat masuk ke aplikasi web Anda dan harus berhasil ditampilkan. Jika penyebaran berhasil tetapi situs web tidak ditampilkan, ini mungkin masalah dengan bagaimana aplikasi web statis dikonfigurasi untuk membangun kembali aplikasi, setelah berada di Azure.

  • Apakah aplikasi API (back-end tanpa server) berfungsi?

    Anda harus dapat berinteraksi dengan aplikasi klien, mencari buku dan pemfilteran. Jika formulir tidak mengembalikan nilai apa pun, buka alat pengembang browser, dan tentukan apakah panggilan HTTP ke API berhasil. Jika panggilan tidak berhasil, kemungkinan besar alasan jika konfigurasi aplikasi web statis untuk nama titik akhir API dan kunci kueri pencarian salah.

    Jika jalur ke kode fungsi Azure (api_location) tidak benar dalam file YML, aplikasi dimuat tetapi tidak akan memanggil fungsi apa pun yang menyediakan integrasi dengan Azure AI Search. Kunjungi kembali bagian penyebaran untuk memastikan jalur sudah benar.

Membersihkan sumber daya

Untuk membersihkan sumber daya yang dibuat dalam tutorial ini, hapus grup sumber daya atau sumber daya individual.

  1. Di Visual Studio Code, buka bilah Aktivitas, dan pilih ikon Azure.

  2. Di bilah Samping, klik kanan langganan Azure Anda di bawah Static Web Apps area dan temukan aplikasi yang Anda buat untuk tutorial ini.

  3. Klik kanan nama aplikasi lalu pilih Hapus.

  4. Jika Anda tidak lagi menginginkan fork GitHub pada sampel, ingatlah untuk menghapusnya di GitHub. Buka Pengaturan fork Anda lalu hapus repositori.

  5. Untuk menghapus Azure AI Search, temukan layanan pencarian Anda dan pilih Hapus di bagian atas halaman.

Langkah berikutnya