使用 Visual Studio Code 建立第一個函式Create your first function using Visual Studio Code

Azure Functions 可讓您在無伺服器環境中執行程式碼,而不需要先建立 VM 或發佈 Web 應用程式。Azure Functions lets you execute your code in a serverless environment without having to first create a VM or publish a web application.

在本文中,您將了解如何使用適用於 Visual Studio Code 的 Azure Functions 擴充功能,在使用 Microsoft Visual Studio Code 的本機電腦上建立和測試 "hello world" 函式。In this article, you learn how to use the Azure Functions extension for Visual Studio Code to create and test a "hello world" function on your local computer using Microsoft Visual Studio Code. 然後將函式程式碼從 Visual Studio Code 發佈至 Azure。You then publish the function code to Azure from Visual Studio Code.

Visual Studio 專案中的 Azure Functions 程式碼

擴充功能目前支援 C#、JavaScript、Java 和 Python 函式。The extension currently supports C#, JavaScript, Java, and Python functions. 本文和後續文章中的步驟只支援 JavaScript 和 C# 函式。The steps in this article and the article that follows support only JavaScript and C# functions. 若要了解如何使用 Visual Studio Code 來建立和發佈 Python 函式,請參閱將 Python 部署至 Azure FunctionsTo learn how to use Visual Studio Code to create and publish Python functions, see Deploy Python to Azure Functions. 若要了解如何使用 Visual Studio Code 來建立和發佈 PowerShell 函式,請參閱在 Azure 中建立您的第一個 PowerShell 函式To learn how to use Visual Studio Code to create and publish PowerShell functions, see Create your first PowerShell function in Azure.

此擴充功能目前為預覽狀態。The extension is currently in preview. 若要進一步了解,請參閱適用於 Visual Studio Code 的 Azure Functions 擴充功能的擴充功能頁面。To learn more, see the Azure Functions extension for Visual Studio Code extension page.

必要條件Prerequisites

若要完成本快速入門:To complete this quickstart:

如果您沒有 Azure 訂用帳戶,請在開始前建立免費帳戶If you don't have an Azure subscription, create a free account before you begin.

安裝 Azure Functions 擴充功能Install the Azure Functions extension

您可以使用 Azure Functions 擴充功能來建立和測試函式,並將其部署至 Azure。You can use the Azure Functions extension to create and test functions and deploy them to Azure.

  1. 在 Visual Studio Code 中,開啟 [擴充功能] 並搜尋 azure functions,或是在 Visual Studio Code 中選取此連結In Visual Studio Code, open Extensions and search for azure functions, or select this link in Visual Studio Code.

  2. 選取 [安裝] 來安裝 Visual Studio Code 的擴充功能:Select Install to install the extension for Visual Studio Code:

    安裝 Azure Functions 的擴充功能

  3. 重新啟動 Visual Studio Code,然後選取 [活動] 工作列上的 Azure 圖示。Restart Visual Studio Code and select the Azure icon on the Activity bar. 您應該會在提要欄位中看到 Azure Functions 區域。You should see an Azure Functions area in the Side Bar.

    提要欄位中的 Azure Functions 區域

使用函式來建立函式專案Create your Functions project with a function

Visual Studio Code 中的 Azure Functions 專案範本會建立可發佈至 Azure 中函式應用程式的專案。The Azure Functions project template in Visual Studio Code creates a project that can be published to a function app in Azure. 函式應用程式可讓您將多個函式群組為邏輯單位,以便您管理、部署和共用資源。A function app lets you group functions as a logical unit for management, deployment, and sharing of resources.

  1. 在 Visual Studio Code 中按 F1 以開啟命令選擇區。In Visual Studio Code, press F1 to open the command palette. 在命令選擇區中,搜尋並選取 Azure Functions: Create new project...In the command palette, search for and select Azure Functions: Create new project....

  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. 按照提示提供下列資訊:Following the prompts, provide the following information:

    PromptPrompt Value 說明Description
    為您的函式應用程式專案選取語言Select a language for your function app project C# 或 JavaScriptC# or JavaScript 這篇文章支援 C# 和 JavaScript。This article supports C# and JavaScript. 針對 Python,請參閱此 Python 文章,針對 PowerShell,請參閱此 PowerShell 文章For Python, see this Python article, and for PowerShell, see this PowerShell article.
    選取您專案第一個函式的範本Select a template for your project's first function HTTP 觸發程序HTTP trigger 在新的函式應用程式中建立由 HTTP 觸發的函式。Create an HTTP triggered function in the new function app.
    提供函式名稱Provide a function name HttpTriggerHttpTrigger 按 Enter 鍵以使用預設名稱。Press Enter to use the default name.
    提供命名空間Provide a namespace My.FunctionsMy.Functions (僅限 C#) C# 類別程式庫必須擁有命名空間。(C# only) C# class libraries must have a namespace.
    授權層級Authorization level 函式Function 需要函式金鑰以呼叫函式的 HTTP 端點。Requires a function key to call the function's HTTP endpoint.
    選取您要如何開啟專案Select how you would like to open your project 新增到工作區Add to workspace 在目前的工作區中建立函式應用程式。Creates the function app in the current workspace.

Visual Studio Code 會在新的工作區中建立函式應用程式專案。Visual Studio Code creates the function app project in a new workspace. 此專案包含 host.jsonlocal.settings.json 組態檔,以及任何特定語言的專案檔。This project contains the host.json and local.settings.json configuration files, plus any language-specific project files.

在函式應用程式專案的 HttpTrigger 資料夾中,也會建立由 HTTP 觸發的新函式。A new HTTP triggered function is also created in the HttpTrigger folder of the function app project.

在本機執行函式Run the function locally

Azure Functions Core Tools 可讓您在本機開發電腦上執行 Azure Functions 專案。Azure Functions Core Tools lets you run an Azure Functions project on your local development computer.

  1. 若要測試您的函式,可在函式程式碼中設定中斷點,並按 F5 以啟動函式應用程式專案。To test your function, set a breakpoint in the function code and press F5 to start the function app project. Core Tools 的輸出會顯示在終端機面板中。Output from Core Tools is displayed in the Terminal panel.

  2. 終端機面板中,複製 HTTP 觸發函式的 URL 端點。In the Terminal panel, copy the URL endpoint of your HTTP-triggered function.

    Azure 本機輸出

  3. 將 HTTP 要求的 URL 貼到瀏覽器的網址列。Paste the URL for the HTTP request into your browser's address bar. 將查詢字串 ?name=<yourname> 附加至此 URL 並執行要求。Append the query string ?name=<yourname> to this URL and execute the request. 觸及中斷點時,執行就會暫停。Execution is paused when the breakpoint is hit.

  4. 當您繼續此執行時,下圖顯示瀏覽器中對 GET 要求所做出的回應︰When you continue the execution, the following shows the response in the browser to the GET request:

    瀏覽器中的函式 localhost 回應

  5. 若要停止偵錯,請按 Shift + F5。To stop debugging, press Shift + F5.

確認函式在本機電腦上正確執行之後,就可以將專案發佈到 Azure。After you've verified that the function runs correctly on your local computer, it's time to publish the project to Azure.

登入 AzureSign in to Azure

您必須先登入 Azure,才能發佈您的應用程式。Before you can publish your app, you must sign in to Azure.

  1. 在 [Azure: 函式] 區域中,選擇 [登入 Azure...] 。如果您還沒有帳戶,您可以建立免費的 Azure 帳戶In the Azure: Functions area, choose Sign in to Azure.... If you don't already have one, you can Create a free Azure account.

    瀏覽器中的函式 localhost 回應

  2. 出現提示時,選取 [複製及開啟] ,或複製顯示的程式碼並在瀏覽器中開啟 https://aka.ms/deviceloginWhen prompted, select Copy & Open, or copy the displayed code and open https://aka.ms/devicelogin in your browser.

  3. 在 [裝置登入] 頁面中貼上複製的程式碼,確認登入 Visual Studio Code,然後選取 [繼續] 。Paste the copied code in the Device Login page, verify the sign in for Visual Studio Code, then select Continue.

  4. 使用您的 Azure 帳戶認證完成登入。Complete the sign in using your Azure account credentials. 順利登入之後,您可以關閉瀏覽器。After you have successfully signed in, you can close the browser.

將專案發佈到 AzurePublish the project to Azure

Visual Studio Code 可讓您將函式專案直接發佈到 Azure。Visual Studio Code lets you publish your functions project directly to Azure. 在這過程中,您會在 Azure 訂用帳戶中建立函式應用程式和相關的資源。In the process, you create a function app and related resources in your Azure subscription. 函式應用程式會為函式提供執行內容。The function app provides an execution context for your functions. 專案會封裝並部署到您 Azure 訂用帳戶中的新函式應用程式。The project is packaged and deployed to the new function app in your Azure subscription.

根據預設,Visual Studio Code 會建立所有建立函式應用程式所需的 Azure 資源。By default, Visual Studio Code creates all of the Azure resources required to create your function app. 這些資源的名稱會以您選擇的函式應用程式名稱為基礎。The names of these resources are based on the function app name you choose. 如果您需要所建立資源的完整控制權,您可以使用進階選項發佈If you need to have full control of the created resources, you can instead publish using advanced options.

本節假設您要在 Azure 中建立新的函式應用程式。This section assumes that you are creating a new function app in Azure.

重要

發佈至現有的函式應用程式會覆寫該應用程式在 Azure 中的內容。Publishing to an existing function app overwrites the content of that app in Azure.

  1. 在 Visual Studio Code 中按 F1 以開啟命令選擇區。In Visual Studio Code, press F1 to open the command palette. 在命令選擇區中,搜尋並選取 Azure Functions: Deploy to function app...In the command palette, search for and select Azure Functions: Deploy to function app....

  2. 如果未登入,系統會提示您登入 AzureIf not signed-in, you are prompted to Sign in to Azure. 您也可以建立免費 Azure 帳戶You can also Create a free Azure account. 從瀏覽器成功登入之後,請返回 Visual Studio Code。After successful sign in from the browser, go back to Visual Studio Code.

  3. 如果您有多個訂用帳戶,請為函數應用程式選取訂用帳戶,然後選擇 [+ 在 Azure 中建立新函數應用程式] 。If you have multiple subscriptions, Select a subscription for the function app, then choose + Create New Function App in Azure.

  4. 輸入可識別您函式應用程式的全域唯一名稱,然後按 Enter。Type a globally unique name that identifies your function app and press Enter. 函式應用程式名稱的有效字元為 a-z0-9-Valid characters for a function app name are a-z, 0-9, and -.

    當您按下 Enter 時,您的訂用帳戶中會建立下列 Azure 資源:When you press Enter, the following Azure resources are created in your subscription:

    • 資源群組 :包含所有已建立的 Azure 資源。Resource group: Contains all of the created Azure resources. 該名稱是以您的函數應用程式名稱為根據。The name is based on your function app name.
    • 儲存體帳戶 :使用以您的函數應用程式名稱為根據的唯一名稱建立標準儲存體帳戶。Storage account: A standard Storage account is created with a unique name that is based on your function app name.
    • 主控方案 :在美國西部區域建立一個取用方案,來裝載您的無伺服器函數應用程式。Hosting plan: A consumption plan is created in the West US region to host your serverless function app.
    • 函數應用程式:您的專案已部署到此新函數應用程式,並在其中執行。Function app: Your project is deployed to and runs in this new function app.

    建立函式應用程式並套用部署套件之後,即會顯示通知。A notification is displayed after your function app is created and the deployment package is applied. 在通知中選取 [檢視輸出] ,即可檢視建立和部署結果,包括您所建立的 Azure 資源。Select View Output in this notification to view the creation and deployment results, including the Azure resources that you created.

  5. 返回 [Azure: 函式] 區域中,在訂用帳戶下展開新函數應用程式。Back in the Azure: Functions area, expand the new function app under your subscription. 展開 [函式] ,以滑鼠右鍵按一下 [HttpTrigger] ,然後選擇 [複製函數 URL] 。Expand Functions, right-click HttpTrigger, and then choose Copy function URL.

    複製新 HTTP 觸發程序的函數 URL

在 Azure 中執行函式Run the function in Azure

  1. 從 [輸出] 面板中複製 HTTP 觸發程序的 URL。Copy the URL of the HTTP trigger from the Output panel. 此 URL 包含函式金鑰,會傳至 code 查詢參數。This URL includes the function key, which is passed to the code query parameter. 如同以往,務必將查詢字串 ?name=<yourname> 新增至此 URL 的結尾並執行要求。As before, make sure to add the query string ?name=<yourname> to the end of this URL and execute the request.

    呼叫 HTTP URL 觸發函式的 URL 應採用下列格式:The URL that calls your HTTP-triggered function should be in the following format:

     http://<functionappname>.azurewebsites.net/api/<functionname>?code=<function_key>&name=<yourname> 
    
  2. 將 HTTP 要求的新 URL 貼到瀏覽器的網址列。Paste this new URL for the HTTP request into your browser's address bar. 下圖顯示瀏覽器中對於函式傳回之遠端 GET 要求所做出的回應︰The following shows the response in the browser to the remote GET request returned by the function:

    瀏覽器中的函式回應

後續步驟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. 下一篇文章也會示範如何藉由移除您所建立的資源群組,清除這些新的 Azure 資源。The next article also shows you how to clean up these new Azure resources by removing the resource group you created.