快速入门:在 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.

  2. 如果尚未安装 Azure Functions Core Tools,请在提示符下选择“安装”。 If you haven't already installed Azure Functions Core Tools, select Install at the prompt. 安装 Core Tools 后,应用会在“终端” 面板中启动。When the Core Tools are installed, your app starts in the Terminal panel. 可以看到 HTTP 触发函数的 URL 终结点在本地运行。You can see the URL endpoint of your HTTP-triggered function running locally.

    本地函数 VS Code 输出

  3. 在 Core Tools 运行时,导航至以下 URL 以执行 GET 请求(其中包括 ?name=Functions 查询字符串)。With Core Tools running, navigate to the following URL to execute a GET request, which includes ?name=Functions query string.


  4. 系统会返回响应,在浏览器中如下所示:A response is returned, which looks like the following in a browser:

    浏览器 - localhost 示例输出

  5. 有关请求的信息将显示在“终端” 面板中。Information about the request is shown in Terminal panel.

    任务主机启动 - VS Code 终端输出

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

  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.

  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 the new function app under your subscription. 展开“函数”,在“HttpExample”中右键单击“(Windows)”或者在按住 Ctrl 的同时单击“(macOS)”,然后选择“复制函数 URL” 。Expand Functions, right-click (Windows) or Ctrl - click (macOS) on HttpExample, and then choose Copy function URL.

    复制新的 HTTP 触发器的函数 URL

  2. 将 HTTP 请求的此 URL 粘贴到浏览器的地址栏中,将 name 查询字符串以 ?name=Functions 形式添加到此 URL 的末尾,然后执行请求。Paste this URL for the HTTP request into your browser's address bar, add the name query string as ?name=Functions to the end of this URL, and then execute the request. 调用 HTTP 触发的函数的 URL 应采用以下格式:The URL that calls your HTTP-triggered function should be in the following format:


    以下示例演示浏览器中函数返回的对远程 GET 请求的响应:The following example shows the response in the browser to the remote GET request returned by the function:


清理资源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. 在下一篇文章中,将通过添加输出绑定来扩展该函数。In the next article, you expand that function by adding an output binding. 此绑定将 HTTP 请求中的字符串写入 Azure 队列存储队列中的消息。This binding writes the string from the HTTP request to a message in an Azure Queue Storage queue.