3 - Deploy the search-enabled .NET website

Je li ova stranica od pomoći?

Imate dodatne povratne informacije?

Povratne informacije će biti poslane kompaniji Microsoft: pritiskom na dugme za slanje, vaše povratne informacije će se koristiti za unapređivanje proizvoda i usluga kompanije Microsoft. Pravila privatnosti.

Deploy the search-enabled website as an Azure Static web app. This deployment includes both the React app and the Function app.

The Static Web app pulls the information and files for deployment from GitHub using your fork of the samples repository.

Create a Static Web App in Visual Studio Code

1. Select Azure from the Activity Bar, then select Static Web Apps from the Side bar.

2. Right-click on the subscription name then select Create Static Web App (Advanced).

   

3. If you see a pop-up window in VS Code asking which branch you want to deploy from, select the default branch, usually master or main.

   This setting means only changes you commit to that branch are deployed to your static web app.

4. If you see a pop-up window asking you to commit your changes, do not do this. The secrets from the bulk import step should not be committed to the repository.

   To rollback the changes, in VS Code select the Source Control icon in the Activity bar, then select each changed file in the Changes list and select the Discard changes icon.

5. Follow the prompts to provide the following information:

   Prompt	Enter
   Enter the name for the new Static Web App.	Create a unique name for your resource. For example, you can prepend your name to the repository name such as, joansmith-azure-search-dotnet-samples.
   Select a resource group for new resources.	Use the resource group you created for this tutorial.
   Select a SKU	Select the free SKU for this tutorial.
   Choose build preset to configure default project structure.	Select Custom
   Select the location of your application code	search-website This is the path, from the root of the repository, to your Azure Static web app.
   Select the location of your Azure Function code	search-website/api This is the path, from the root of the repository, to your Azure Function app.
   Enter the path of your build output...	build This is the path, from your Azure Static web app, to your generated files.
   Select a location for new resources.	Select a region close to you.

6. The resource is created, select Open Actions in GitHub from the Notifications. This opens a browser window pointed to your forked repo.

   The list of actions indicates your web app, both client and functions, were successfully pushed to your Azure Static Web App.

   Wait until the build and deployment complete before continuing. This may take a minute or two to finish.

Get Cognitive Search query key in Visual Studio Code

1. In Visual Studio Code, open the Activity bar, and select the Azure icon.

2. In the Side bar, select your Azure subscription under the Azure: Cognitive Search area, then right-click on your Search resource and select Copy Query Key.

   

3. Keep this query key, you will need to use it in the next section. The query key is able to query your Index.

Add configuration settings in Azure portal

The Azure Function app won't return Search data until the Search secrets are in settings.

1. Select Azure from the Activity Bar.

2. Right-click on your Static web app resource then select Open in Portal.

   

3. Select Configuration then select + Add.

   

4. Add each of the following settings:

   Setting	Your Search resource value
   SearchApiKey	Your Search query key
   SearchServiceName	Your Search resource name
   SearchIndexName	good-books
   SearchFacets	authors*,language_code

   Azure Cognitive Search requires different syntax for filtering collections than it does for strings. Add a * after a field name to denote that the field is of type Collection(Edm.String). This allows the Azure Function to add filters correctly to queries.

5. Select Save to save the settings.

   

6. Return to VS Code.

7. Refresh your Static web app to see the Static web app's application settings.

   

Use search in your Static web app

1. In Visual Studio Code, open the Activity bar, and select the Azure icon.

2. In the Side bar, right-click on your Azure subscription under the Static web apps area and find the Static web app you created for this tutorial.

3. Right-click the Static Web App name and select Browse site.

   

4. Select Open in the pop-up dialog.

5. In the website search bar, enter a search query such as code, slowly so the suggest feature suggests book titles. Select a suggestion or continue entering your own query. Press enter when you've completed your search query.

6. Review the results then select one of the books to see more details.

Clean up resources

To clean up the resources created in this tutorial, delete the resource group.

1. In Visual Studio Code, open the Activity bar, and select the Azure icon.

2. In the Side bar, right-click on your Azure subscription under the Resource Groups area and find the resource group you created for this tutorial.

3. Right-click the resource group name then select Delete. This deletes both the Search and Static web app resources.

4. If you no longer want the GitHub fork of the sample, remember to delete that on GitHub. Go to your fork's Settings then delete the fork.

Next steps

• Understand Search integration for the search-enabled website