Share via

3 - Menyebarkan situs web Python yang mendukung 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 repositori sampel Anda.

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-javascript-samples).

  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 di Visual Studio Code yang menanyakan cabang mana yang ingin Anda sebarkan, pilih cabang default, biasanya utama.

    Pengaturan ini berarti hanya perubahan yang Anda lakukan pada cabang tersebut yang disebarkan ke aplikasi web statik.

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

  6. Ikuti perintah untuk membuat aplikasi web statis:

    Prompt Enter
    Pilih grup sumber daya untuk sumber daya baru. Gunakan grup sumber daya yang Anda buat untuk tutorial ini.
    Masukkan nama untuk Aplikasi Web Statik baru. Buat nama unik untuk sumber daya Anda. Misalnya, Anda dapat melakukan prepend pada nama Anda ke nama repositori seperti, my-demo-static-web-app.
    Memilih SKU Pilih SKU gratis untuk tutorial ini.
    Pilih lokasi untuk sumber daya baru. Untuk Node.js: Pilih West US 2 selama pratinjau model pemrograman Azure Function (PM) v4. Untuk C# dan Python, pilih wilayah di dekat Anda.
    Pilih preset build untuk mengonfigurasi struktur proyek default. Pilih Kustom.
    Pilih lokasi kode aplikasi klien Anda search-website-functions-v4/client

    Ini adalah jalur, dari akar repositori, ke aplikasi web statis Anda.
    Memilih lokasi kode Azure Functions Anda search-website-functions-v4/api

    Ini adalah jalur, dari akar repositori, ke aplikasi web statis Anda. Jika tidak ada fungsi lain di repositori, Anda tidak akan dimintai lokasi kode fungsi. Saat ini, Anda harus melakukan langkah tambahan untuk memastikan lokasi kode fungsi sudah benar. Langkah-langkah ini dilakukan setelah sumber daya dibuat dan didokumenkan dalam artikel ini.
    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.

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

  8. Saat ini, file YML dibuat dengan sintaks jalur yang salah untuk kode fungsi Azure. Gunakan solusi ini untuk memperbaiki sintaks dan menjalankan ulang alur kerja. Anda dapat melakukan langkah ini segera setelah file YML dibuat. Alur kerja baru diluncurkan segera setelah Anda mendorong pembaruan:

    1. Di penjelajah Visual Studio Code, buka ./.github/workflows/ direktori.

    2. Buka file YML.

    3. Gulir ke api-location jalur (pada atau di dekat baris 31).

    4. Ubah sintaks jalur untuk menggunakan garis miring (hanya api_location perlu pengeditan, lokasi lain ada di sini untuk konteks):

      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. Simpan file.

    6. Buka terminal terintegrasi dan terbitkan perintah GitHub berikut untuk mengirim YML yang diperbarui ke fork Anda:

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

    Cuplikan layar perintah GitHub di Visual Studio Code.

    Tunggu hingga eksekusi alur kerja selesai sebelum melanjutkan. Hal ini dapat membutuhkan satu atau dua menit untuk selesai.

Mendapatkan kunci kueri Pencarian Azure AI di Visual Studio Code

  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 cognitive-search-demo-rg --service-name my-cog-search-demo-svc

  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 solusi di bagian penyebaran untuk bantuan dalam mengoreksi jalur.

Membersihkan sumber daya

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

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

  2. Di bilah Samping, klik kanan pada langganan Azure di bawah area Resource Groups dan temukan grup sumber daya yang Anda buat untuk tutorial ini.

  3. Klik kanan nama grup sumber daya, lalu pilih Hapus. Ini menghapus sumber daya Pencarian dan Static Web Apps.

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

Langkah berikutnya