快速入门:在 Azure 中使用 Visual Studio Code 创建 JavaScript 函数Quickstart: Create a JavaScript function in Azure using Visual Studio Code

在本文中,我们使用 Visual Studio Code 来创建一个响应 HTTP 请求的 JavaScript 函数。In this article, you use Visual Studio Code to create a JavaScript function that responds to HTTP requests. 在本地测试代码后,将代码部署到 Azure Functions 的无服务器环境。After testing the code locally, you deploy it to the serverless environment of Azure Functions.

完成本快速入门会从你的 Azure 帐户中扣取最多几美分的费用。Completing this quickstart incurs a small cost of a few USD cents or less in your Azure account.

本文还有一个基于 CLI 的版本There's also a CLI-based version of this article.

配置环境Configure your environment

在开始之前,请确保已满足下列要求:Before you get started, make sure you have the following requirements in place:

创建本地项目Create your local project

在本部分,你将使用 Visual Studio Code 在 JavaScript 中创建一个本地 Azure Functions 项目。In this section, you use Visual Studio Code to create a local Azure Functions project in JavaScript. 稍后在本文中,你要将函数代码发布到 Azure。Later in this article, you'll publish your function code to Azure.

  1. 在活动栏中选择“Azure”图标,然后在“Azure:函数”区域中选择“创建新项目...”图标。Choose the Azure icon in the Activity bar, then in the Azure: Functions area, select the Create new project... icon.

    选择“创建新项目”

  2. 为项目工作区选择目录位置,然后选择“选择” 。Choose a directory location for your project workspace and choose Select.

    备注

    这些步骤已设计为在工作区之外完成。These steps were designed to be completed outside of a workspace. 在这种情况下,请不要选择属于工作区内的项目文件夹。In this case, do not select a project folder that is part of a workspace.

  3. 根据提示提供以下信息:Provide the following information at the prompts:

    • 选择函数项目的语言:选择JavaScriptSelect a language for your function project: Choose JavaScript.

    • 为项目的第一个函数选择模板:选择HTTP triggerSelect a template for your project's first function: Choose HTTP trigger.

    • 提供函数名称:键入 HttpExampleProvide a function name: Type HttpExample.

    • 授权级别:选择 Anonymous,这使任何人都可以调用你的函数终结点。Authorization level: Choose Anonymous, which enables anyone to call your function endpoint. 若要了解授权级别,请参阅授权密钥To learn about authorization level, see Authorization keys.

    • 选择打开项目的方式:选择Add to workspaceSelect how you would like to open your project: Choose Add to workspace.

  4. Visual Studio Code 将使用此信息生成一个包含 HTTP 触发器的 Azure Functions 项目。Using this information, Visual Studio Code generates an Azure Functions project with an HTTP trigger. 可以在资源管理器中查看本地项目文件。You can view the local project files in the Explorer. 若要详细了解所创建的文件,请参阅生成的项目文件To learn more about files that are created, see Generated project files.

在本地运行函数Run the function locally

Visual Studio Code 与 Azure Functions Core Tools 相集成,便于你在发布到 Azure 之前在本地开发计算机上运行此项目。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.

  1. 若要调用函数,请按 F5 启动函数应用项目To call your function, press F5 to start the function app project. 来自 Core Tools 的输出会显示在“终端”面板中。Output from Core Tools is displayed in the Terminal panel. 应用将在“终端”面板中启动。Your app starts in the Terminal panel. 可以看到 HTTP 触发函数的 URL 终结点在本地运行。You can see the URL endpoint of your HTTP-triggered function running locally.

    本地函数 VS Code 输出

    如果在 Windows 上运行时遇到问题,请确保用于 Visual Studio Code 的默认终端未设置为“WSL Bash”。If you have trouble running on Windows, make sure that the default terminal for Visual Studio Code isn't set to WSL Bash.

  2. 运行 Core Tools 后,转到“Azure: Functions”区域。With Core Tools running, go to the Azure: Functions area. 在“Functions”下,展开“本地项目” > “Functions” 。Under Functions, expand Local Project > Functions. 右键单击 (Windows) 或按 Ctrl - 单击 (macOS) HttpExample 函数,然后选择“立即执行函数...”。Right-click (Windows) or Ctrl - click (macOS) the HttpExample function and choose Execute Function Now....

    立即在 Visual Studio Code 中执行函数

  3. 在“输入请求正文”中,你将看到请求消息正文值 { "name": "Azure" }In Enter request body you see the request message body value of { "name": "Azure" }. 按 Enter 将此请求消息发送给函数。Press Enter to send this request message to your function.

    可以改为将 HTTP GET 请求发送到 Web 浏览器中的 http://localhost:7071/api/HttpExample 地址。You could have instead sent an HTTP GET request to the http://localhost:7071/api/HttpExample address in a web browser.

  4. 当函数在本地执行并返回响应时,Visual Studio Code 中将引发通知。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.

  5. 按 Ctrl + C 停止 Core Tools 并断开调试器的连接Press Ctrl + C to stop Core Tools and disconnect the debugger.

确认该函数可以在本地计算机上正确运行以后,可以使用 Visual Studio Code 将项目直接发布到 Azure。After you've verified that the function runs correctly on your local computer, it's time to use Visual Studio Code to publish the project directly to Azure.

登录 AzureSign in to Azure

在发布应用之前,必须先登录到 Azure。Before you can publish your app, you must sign in to Azure.

  1. 打开 Visual Studio Code,然后单击 View -> Command Palette...Open Visual Studio Code, click View -> Command Palette....

  2. 输入 Sign In to Azure Cloud,以搜索 Azure 中国环境。Input Sign In to Azure Cloud to search Azure China Environment.

  3. 在搜索结果中单击 Azure ChinaClick Azure China in search result.

  4. 窗口的右下角将出现一个弹出窗口。You will find a popup window at the bottom right of your window.

    弹出窗口

  5. 打开页面 **https://microsoft.com/deviceloginchina**,然后输入该代码进行身份验证。Open the page https://microsoft.com/deviceloginchina and enter the code to authenticate.

将项目发布到 AzurePublish the project to Azure

在本部分,你将在 Azure 订阅中创建一个函数应用和相关资源,然后部署代码。In this section, you create a function app and related resources in your Azure subscription and then deploy your code.

重要

发布到现有函数应用将覆盖该应用在 Azure 中的内容。Publishing to an existing function app overwrites the content of that app in Azure.

  1. 在活动栏中选择“Azure”图标,然后在“Azure:函数”区域中,选择“部署到函数应用...”按钮。Choose the Azure icon in the Activity bar, then in the Azure: Functions area, choose the Deploy to function app... button.

    将项目发布到 Azure

  2. 根据提示提供以下信息:Provide the following information at the prompts:

    • 选择文件夹:从工作区中选择一个文件夹,或浏览到包含函数应用的文件夹。Select folder: Choose a folder from your workspace or browse to one that contains your function app. 如果已打开有效的函数应用,则不会看到此信息。You won't see this if you already have a valid function app opened.

    • 选择订阅:选择要使用的订阅。Select subscription: Choose the subscription to use. 如果只有一个订阅,则不会看到此项。You won't see this if you only have one subscription.

    • 在 Azure 中选择函数应用:选择+ Create new Function AppSelect Function App in Azure: Choose + Create new Function App. (请不要选择本文中未介绍的 Advanced 选项。)(Don't choose the Advanced option, which isn't covered in this article.)

    • 输入函数应用的全局唯一名称:键入在 URL 路径中有效的名称。Enter a globally unique name for the function app: Type a name that is valid in a URL path. 将对你键入的名称进行验证,以确保其在 Azure Functions 中是唯一的。The name you type is validated to make sure that it's unique in Azure Functions.

    • 选择运行时:选择你一直在本地运行的 Node.js 版本。Select a runtime: Choose the version of Node.js you've been running on locally. 可以使用 node --version 命令来检查你的版本。You can use the node --version command to check your version.

    • 选择新资源的位置:为了获得更好的性能,请选择你附近的 区域Select a location for new resources: For better performance, choose a region near you.

    在 Azure 中创建单个资源时,扩展会在通知区域显示这些资源的状态。The extension shows the status of individual resources as they are being created in Azure in the notification area.

    Azure 资源创建通知

  3. 完成后,将使用基于函数应用名称的名称在订阅中创建以下 Azure 资源:When completed, the following Azure resources are created in your subscription, using names based on your function app name:

    • 一个资源组:相关资源的逻辑容器。A resource group, which is a logical container for related resources.
    • 一个标准 Azure 存储帐户:用于维护项目的状态和其他信息。A standard Azure Storage account, which maintains state and other information about your projects.
    • 一个消耗计划:用于定义无服务器函数应用的基础主机。A consumption plan, which defines the underlying host for your serverless function app.
    • 一个函数应用:提供用于执行函数代码的环境。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.
    • 一个连接到函数应用的 Application Insights 实例:用于跟踪无服务器函数的使用情况。An Application Insights instance connected to the function app, which tracks usage of your serverless function.

    创建函数应用并应用了部署包之后,会显示一个通知。A notification is displayed after your function app is created and the deployment package is applied.

    提示

    默认情况下,会根据你提供的函数应用名称创建函数应用所需的 Azure 资源。By default, the Azure resources required by your function app are created based on the function app name you provide. 默认情况下,还会在函数应用所在的新资源组中创建这些资源。By default, they are also created in the same new resource group with the function app. 如果要自定义这些资源的名称或重复使用现有资源,则需要使用高级创建选项来发布项目If you want to either customize the names of these resources or reuse existing resources, you need to instead publish the project with advanced create options.

  4. 在此通知中选择“查看输出”以查看创建和部署结果,其中包括你创建的 Azure 资源。Select View Output in this notification 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.

    创建完成通知

在 Azure 中运行函数Run the function in Azure

  1. 返回到“Azure:函数”区域(位于侧栏中),然后展开你的订阅、新的函数应用和“函数”。Back in the Azure: Functions area in the side bar, expand your subscription, your new function app, and Functions. 右键单击 (Windows) 或按 Ctrl - 单击 (macOS) HttpExample 函数,然后选择“立即执行函数...”。Right-click (Windows) or Ctrl - click (macOS) the HttpExample function and choose Execute Function Now....

    立即在 Azure 的 Visual Studio Code 中执行函数

  2. 在“输入请求正文”中,你将看到请求消息正文值 { "name": "Azure" }In Enter request body you see the request message body value of { "name": "Azure" }. 按 Enter 将此请求消息发送给函数。Press Enter to send this request message to your function.

  3. 当函数在 Azure 中执行并返回响应时,Visual Studio Code 中将引发通知。When the function executes in Azure and returns a response, a notification is raised in Visual Studio Code.

清理资源Clean up resources

若要继续执行下一步骤将 Azure 存储队列绑定添加到函数,需要保留到目前为止构建的所有资源。When you continue to the next step and add an Azure Storage queue binding to your function, you'll need to keep all your resources in place to build on what you've already done.

否则,可以使用以下步骤删除函数应用及其相关资源,以免产生任何额外的费用。Otherwise, you can use the following steps to delete the function app and its related resources to avoid incurring any further costs.

  1. 在 Visual Studio Code 中,按 F1 打开命令面板In Visual Studio Code, press F1 to open the command palette. 在命令面板中,搜索并选择 Azure Functions: Open in portalIn the command palette, search for and select Azure Functions: Open in portal.

  2. 选择你的函数应用,然后按 EnterChoose your function app, and press Enter. 随即将在 Azure 门户中打开函数应用页面。The function app page opens in the Azure portal.

  3. 在“概览”选项卡中,选择“资源组”旁边的命名链接。In the Overview tab, select the named link next to Resource group.

    从函数应用页选择要删除的资源组。

  4. 在“资源组”页中查看所包括的资源的列表,然后验证这些资源是否是要删除的。In the Resource group page, review the list of included resources, and verify that they are the ones you want to delete.

  5. 选择“删除资源组”,然后按说明操作。Select Delete resource group, and follow the instructions.

    可能需要数分钟才能删除完毕。Deletion may take a couple of minutes. 完成后会显示一个通知,持续数秒。When it's done, a notification appears for a few seconds. 也可以选择页面顶部的钟形图标来查看通知。You can also select the bell icon at the top of the page to view the notification.

若要详细了解 Functions 的费用,请参阅估算消耗计划成本To learn more about Functions costs, see Estimating Consumption plan costs.

后续步骤Next steps

你已使用 Visual Studio Code 通过简单的 HTTP 触发函数创建了函数应用。You have used Visual Studio Code to create a function app with a simple HTTP-triggered function. 在下一篇文章中,你将通过连接到 Azure 存储来扩展该函数。In the next article, you expand that function by connecting to Azure Storage. 若要详细了解如何连接到其他 Azure 服务,请参阅将捆绑项添加到 Azure Functions 中的现有函数To learn more about connecting to other Azure services, see Add bindings to an existing function in Azure Functions.