|
1 | | -In this exercise, you learn how to create a C\# function that responds to HTTP requests. After creating and testing the code locally in Visual Studio Code, you'll deploy to Azure. |
| 1 | +In this exercise, you learn how to create a C\# function that responds to HTTP requests. After creating and testing the code locally in Visual Studio Code, you deploy and test the function in Azure. |
2 | 2 |
|
3 | | -## Prerequisites |
| 3 | +Tasks performed in this exercise: |
4 | 4 |
|
5 | | -Before you begin, make sure you have the following requirements in place: |
| 5 | +* Create your local project |
| 6 | +* Run the function locally |
| 7 | +* Deploy and execute the function in Azure |
| 8 | +* Clean up resources |
6 | 9 |
|
7 | | -* An **Azure account** with an active subscription. If you don't already have one, you can sign up for a free trial at [https://azure.com/free](https://azure.com/free). |
| 10 | +This exercise takes approximately **15** minutes to complete. |
8 | 11 |
|
9 | | -* The [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) version 4.x. |
| 12 | +## Before you start |
10 | 13 |
|
11 | | -* [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms). |
12 | | - |
13 | | -* [.NET 8](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) is the target framework. |
14 | | - |
15 | | -* The [C# extension](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp) for Visual Studio Code. |
16 | | - |
17 | | -* The [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code. |
18 | | - |
19 | | -## Create your local project |
20 | | - |
21 | | -In this section, you use Visual Studio Code to create a local Azure Functions project in C#. Later in this exercise, you publish your function code to Azure. |
22 | | - |
23 | | -1. In Visual Studio Code, press F1 to open the command palette and search for and run the command `Azure Functions: Create New Project...`. |
24 | | - |
25 | | -1. Select the directory location for your project workspace and choose **Select**. You should either create a new folder or choose an empty folder for the project workspace. Don't choose a project folder that is already part of a workspace. |
26 | | - |
27 | | -1. Provide the following information at the prompts: |
28 | | - |
29 | | - * **Select a language**: Choose `C#`. |
30 | | - * **Select a .NET runtime**: Choose `.NET 8.0 Isolated (LTS)` |
31 | | - * **Select a template for your project's first function**: Choose `HTTP trigger`.<sup>1</sup> |
32 | | - * **Provide a function name**: Type `HttpExample`. |
33 | | - * **Provide a namespace**: Type `My.Function`. |
34 | | - * **Authorization level**: Choose `Anonymous`, which enables anyone to call your function endpoint. |
35 | | - * **Select how you would like to open your project**: Select `Open in current window`. |
36 | | - |
37 | | - <sup>1</sup> Depending on your VS Code settings, you might need to use the `Change template filter` option to see the full list of templates. |
38 | | - |
39 | | -1. Visual Studio Code uses the provided information and generates an Azure Functions project with an HTTP trigger. You can view the local project files in the Explorer. |
40 | | - |
41 | | -## Run the function locally |
42 | | - |
43 | | -Visual Studio Code integrates with Azure Functions Core tools to let you run this project on your local development computer before you publish to Azure. |
44 | | - |
45 | | -1. Make sure the terminal is open in Visual Studio Code. You can open the terminal by selecting **Terminal** and then **New Terminal** in the menu bar. |
46 | | - |
47 | | -1. Press **F5** to start the function app project in the debugger. Output from Core Tools is displayed in the **Terminal** panel. Your app starts in the **Terminal** panel. You can see the URL endpoint of your HTTP-triggered function running locally. |
48 | | - |
49 | | - :::image type="content" source="../media/run-function-local.png" alt-text="The endpoint of your HTTP-triggered function is displayed in the **Terminal** panel."::: |
50 | | - |
51 | | -1. With Core Tools running, go to the **Azure: Functions** area. Under **Functions**, expand **Local Project** > **Functions**. Right-click the `HttpExample` function and choose **Execute Function Now...**. |
| 14 | +To complete the exercise, you need: |
52 | 15 |
|
53 | | - :::image type="content" source="../media/execute-function.png" alt-text="Steps for running the function locally as described in the text."::: |
| 16 | +* An Azure subscription. If you don't already have one, you can [sign up for one](https://azure.microsoft.com/). |
54 | 17 |
|
55 | | -1. In **Enter request body** type the request message body value of `{ "name": "Azure" }`. Press **Enter** to send this request message to your function. When the function executes locally and returns a response, a notification is raised in Visual Studio Code. Information about the function execution is shown in **Terminal** panel. |
56 | | - |
57 | | -1. Press **Shift + F5** to stop Core Tools and disconnect the debugger. |
58 | | - |
59 | | -After verifying that the function runs correctly on your local computer, it's time to use Visual Studio Code to publish the project directly to Azure. |
60 | | - |
61 | | -## Sign in to Azure |
62 | | - |
63 | | -Before you can publish your app, you must sign in to Azure. If you already signed in, go to the next section. |
64 | | - |
65 | | -1. If you aren't already signed in, choose the Azure icon in the Activity bar, then in the **Azure: Functions** area, choose **Sign in to Azure...**. |
66 | | - |
67 | | - :::image type="content" source="../media/functions-sign-into-azure.png" alt-text="Sign in to Azure within VS Code"::: |
68 | | - |
69 | | -1. When prompted in the browser, choose your Azure account and sign in using your Azure account credentials. |
70 | | - |
71 | | -1. After successfully signing in, you can close the new browser window. The subscriptions that belong to your Azure account are displayed in the Side bar. |
72 | | - |
73 | | -## Create resources in Azure |
74 | | - |
75 | | -In this section, you create the Azure resources you need to deploy your local function app. |
76 | | - |
77 | | -1. Choose the Azure icon in the Activity bar, then in the **Resources** area select the **Create resource...** button. |
78 | | - |
79 | | - :::image type="content" source="../media/create-resource.png" alt-text="Location of the Deploy to Function app button."::: |
80 | | - |
81 | | -1. Provide the following information at the prompts: |
82 | | - |
83 | | - * Select **Create Function App in Azure...** |
84 | | - * **Enter a globally unique name for the function app**: Type a name that is valid in a URL path. The name you type is validated to make sure that it's unique in Azure Functions. |
85 | | - * **Select a runtime stack**: Use the same choice you made in the *Create your local project* section earlier in this exercise. |
86 | | - * **Select a location for new resources**: For better performance, choose a region near you. |
87 | | - * **Select subscription**: Choose the subscription to use. *You won't see this if you only have one subscription.* |
88 | | - |
89 | | - The extension shows the status of individual resources as they're being created in Azure in the **AZURE: ACTIVITY LOG** area of the terminal window. |
90 | | - |
91 | | -1. When completed, the following Azure resources are created in your subscription, using names based on your function app name: |
92 | | - |
93 | | - * A resource group, which is a logical container for related resources. |
94 | | - * A standard Azure Storage account, which maintains state and other information about your projects. |
95 | | - * A consumption plan, which defines the underlying host for your serverless function app. |
96 | | - * A function app, which provides the environment for executing your function code. A function app lets you group functions as a logical unit for easier management, deployment, and sharing of resources within the same hosting plan. |
97 | | - * An Application Insights instance connected to the function app, which tracks usage of your serverless function. |
98 | | - |
99 | | -## Deploy the project to Azure |
| 18 | +* [Visual Studio Code](https://code.visualstudio.com/) on one of the [supported platforms](https://code.visualstudio.com/docs/supporting/requirements#_platforms). |
100 | 19 |
|
101 | | -> [!IMPORTANT] |
102 | | -> Publishing to an existing function overwrites any previous deployments. |
| 20 | +* [.NET 8](https://dotnet.microsoft.com/en-us/download/dotnet/8.0) is the target framework. |
103 | 21 |
|
104 | | -1. In the command palette, search for and run the command `Azure Functions: Deploy to Function App...`. |
| 22 | +* [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) for Visual Studio Code. |
105 | 23 |
|
106 | | -1. Select the function app you created. When prompted about overwriting previous deployments, select **Deploy** to deploy your function code to the new function app resource. |
107 | | - |
108 | | -1. After deployment completes, select **View Output** to view the creation and deployment results, including the Azure resources that you created. If you miss the notification, select the bell icon in the lower right corner to see it again. |
| 24 | +* [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions) for Visual Studio Code. |
109 | 25 |
|
110 | | - :::image type="content" source="../media/function-create-notifications.png" alt-text="Screenshot of the View Output window."::: |
| 26 | +* [Azure Functions Core Tools](https://github.com/Azure/azure-functions-core-tools#installing) version 4.x. |
111 | 27 |
|
112 | | -## Run the function in Azure |
| 28 | +> [!TIP] |
| 29 | +> If you have any issues running the function, uninstall any existing version of Azure Functions Core Tools on your system, and then reinstall. |
113 | 30 |
|
114 | | -1. Back in the **Resources** area in the side bar, expand your subscription, your new function app, and **Functions**. **Right-click** the `HttpExample` function and choose **Execute Function Now...**. |
| 31 | +## Getting started |
115 | 32 |
|
116 | | - :::image type="content" source="../media/execute-function-now.png" alt-text="Execute function now in Azure from Visual Studio Code"::: |
| 33 | +Select the **Launch Exercise** button, it opens the exercise instructions in a new browser window. When you're finished with the exercise, return here for: |
117 | 34 |
|
118 | | -1. In **Enter request body** you see the request message body value of `{ "name": "Azure" }`. Press Enter to send this request message to your function. |
| 35 | +> [!div class="checklist"] |
| 36 | +> * A quick knowledge check |
| 37 | +> * A summary of what you've learned |
| 38 | +> * To earn a badge for completing this module |
119 | 39 |
|
120 | | -1. When the function executes in Azure and returns a response, a notification is raised in Visual Studio Code. |
| 40 | +<br/> |
121 | 41 |
|
| 42 | +<a href="https://go.microsoft.com/fwlink/?linkid=2320473" target="_blank"> |
| 43 | + <img src="../media/launch-exercise.png" alt="Button to launch exercise."> |
| 44 | +</a> |
0 commit comments