クイック スタート:Visual Studio Code を使用して Azure で関数を作成するQuickstart: Create a function in Azure using Visual Studio Code

この記事では、Visual Studio Code を使用して、HTTP 要求に応答する C# クラス ライブラリベースの関数を作成します。In this article, you use Visual Studio Code to create a C# class library-based function that responds to HTTP requests. コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。After testing the code locally, you deploy it to the serverless environment of Azure Functions.

この記事では、HTTP 要求に応答する JavaScript 関数を、Visual Studio Code を使用して作成します。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.

この記事では、HTTP 要求に応答する TypeScript 関数を、Visual Studio Code を使用して作成します。In this article, you use Visual Studio Code to create a TypeScript function that responds to HTTP requests. コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。After testing the code locally, you deploy it to the serverless environment of Azure Functions.

この記事では、HTTP 要求に応答する PowerShell 関数を、Visual Studio Code を使用して作成します。In this article, you use Visual Studio Code to create a PowerShell function that responds to HTTP requests. コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。After testing the code locally, you deploy it to the serverless environment of Azure Functions.

この記事では、HTTP 要求に応答する Python 関数を、Visual Studio Code を使用して作成します。In this article, you use Visual Studio Code to create a Python function that responds to HTTP requests. コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。After testing the code locally, you deploy it to the serverless environment of Azure Functions.

この記事では、HTTP 要求に応答する Java 関数を、Visual Studio Code を使用して作成します。In this article, you use Visual Studio Code to create a Java 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.

注意

Visual Studio Code が好みの開発ツールでない場合は、MavenGradle、および IntelliJ IDEA を使用する Java 開発者向けの同様のチュートリアルを確認してください。If Visual Studio Code isn't your prefered development tool, check out our similar tutorials for Java developers using Maven, Gradle and IntelliJ IDEA.

環境を構成するConfigure your environment

作業を開始する前に、次の要件が満たされていることを確認します。Before you get started, make sure you have the following requirements in place:

  • Node.js。アクティブ LTS およびメンテナンス LTS バージョン (10.14.1 を推奨)。Node.js, Active LTS, and Maintenance LTS versions (10.14.1 recommended). node --version コマンドを使用して、現在のバージョンを確認してください。Use the node --version command to check your version.

ローカル プロジェクトを作成するCreate your local project

このセクションでは、Visual Studio Code を使用し、選択した言語でローカル Azure Functions プロジェクトを作成します。In this section, you use Visual Studio Code to create a local Azure Functions project in your chosen language. 後からこの記事の中で、関数コードを Azure に発行します。Later in this article, you'll publish your function code to Azure.

  1. アクティビティ バーの Azure アイコンを選択し、 [Azure: Functions] 領域で [新しいプロジェクトの作成] アイコンを選択します。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:

    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [C#] を選択します。Select a language for your function project: Choose C#.
    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [JavaScript] を選択します。Select a language for your function project: Choose JavaScript.
    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [TypeScript] を選択します。Select a language for your function project: Choose TypeScript.
    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [PowerShell] を選択します。Select a language for your function project: Choose PowerShell.
    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [Python] を選択します。Select a language for your function project: Choose Python.

    • Select a Python alias to create a virtual environment (仮想環境を作成する Python エイリアスを選択してください) : Python インタープリターの場所を選択します。Select a Python alias to create a virtual environment: Choose the location of your Python interpreter. 場所が表示されない場合は、Python バイナリの完全パスを入力してください。If the location isn't shown, type in the full path to your Python binary.

    • Select a language for your function project (関数プロジェクトの言語を選択してください) : [Java] を選択します。Select a language for your function project: Choose Java.

    • Select a version of Java (Java のバージョンを選択してください) : Azure における関数の実行環境として Java 8 または Java 11 (preview) を選択します。Select a version of Java: Choose Java 8 or Java 11 (preview), on which your functions run in Azure. ローカルで確認済みの Java バージョンを選択してください。Choose a Java version that you've verified locally.

    • Provide a group ID (グループ ID を指定してください) : [com.function] を選択します。Provide a group ID: Choose com.function.

    • Provide an artifact ID (成果物 ID を指定してください) : [myFunction] を選択します。Provide an artifact ID: Choose myFunction.

    • Provide a version (バージョンを指定してください) : [1.0-SNAPSHOT] を選択します。Provide a version: Choose 1.0-SNAPSHOT.

    • Provide a package name (パッケージ名を指定してください) : [com.function] を選択します。Provide a package name: Choose com.function.

    • Provide an app name (アプリ名を指定してください) : [myFunction-12345] を選択します。Provide an app name: Choose myFunction-12345.

    • Select a template for your project's first function (プロジェクトの最初の関数のテンプレートを選択してください) : [HTTP trigger] を選択します。Select a template for your project's first function: Choose HTTP trigger.

    • Provide a function name (関数名を指定してください):HttpExample.Provide a function name: Type HttpExample.

    • Provide a namespace (名前空間を指定してください) : 「My.Functions.Provide a namespace: Type My.Functions.
    • 承認レベル: Anonymous を選択します。この場合、すべてのユーザーが関数のエンドポイントを呼び出すことができます。Authorization level: Choose Anonymous, which enables anyone to call your function endpoint. 承認レベルについては、「承認キー」を参照してください。To learn about authorization level, see Authorization keys.
    • Select how you would like to open your project (プロジェクトを開く方法を選択してください) : [Add to workspace] を選択します。Select 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 に移動して、?name=Functions クエリ文字列を含む GET 要求を実行します。With Core Tools running, navigate to the following URL to execute a GET request, which includes ?name=Functions query string.

    http://localhost:7071/api/HttpExample?name=Functions

  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.

関数をローカルで実行するRun the function locally

Azure Functions プロジェクトをローカルで実行してデバッグするために、Azure Functions Core Tools は Visual Studio Code と統合されています。Azure Functions Core Tools integrates with Visual Studio Code to let you run and debug an Azure Functions project locally. Visual Studio Code をデバッグする方法の詳細については、「PowerShell Azure Functions をローカル環境でデバッグする」を参照してください。For details on how to debug in Visual Studio Code, see Debug PowerShell Azure Functions locally.

  1. F5 キーを押して関数アプリ プロジェクトを起動します。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. 次のように、この URL にクエリ文字列 ?name=<yourname> を追加し、2 つ目の PowerShell コマンド プロンプトで Invoke-RestMethod を使用して要求を実行します。Append the query string ?name=<yourname> to this URL, and then use Invoke-RestMethod in a second PowerShell command prompt to execute the request, as follows:

    PS > Invoke-RestMethod -Method Get -Uri http://localhost:7071/api/HttpTrigger?name=PowerShell
    Hello PowerShell
    

    ブラウザーから次の URL で GET 要求を実行することもできます。You can also execute the GET request from a browser from the following URL:

    http://localhost:7071/api/HttpExample?name=PowerShell

    クエリ パラメーターとして、または本文で name パラメーターを渡さずに HttpTrigger エンドポイントを呼び出すと、関数は BadRequest エラーを返します。When you call the HttpTrigger endpoint without passing a name parameter either as a query parameter or in the body, the function returns a BadRequest error. run.ps1 でコードを確認すると、このエラーが仕様によって発生することがわかります。When you review the code in run.ps1, you see that this error occurs by design.

  4. 要求に関する情報が [ターミナル] パネルに表示されます。Information about the request is shown in Terminal panel.

    [ターミナル] パネルでの関数の実行

  5. 完了したら、Ctrl + C キーを押して Core Tools を停止します。When done, press Ctrl + C to stop Core Tools.

関数がローカル コンピューター上で正常に動作することを確認したら、プロジェクトを Azure に発行します。After you've verified that the function runs correctly on your local computer, it's time to publish the project to Azure.

関数がローカル コンピューター上で正常に動作することを確認したら、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.

Azure へのサインインSign in to Azure

アプリを発行するには、Azure にサインインしておく必要があります。Before you can publish your app, you must sign in to Azure.

  1. まだサインインしていない場合は、アクティビティ バーの Azure アイコンを選択し、 [Azure: Functions] 領域で、 [Azure にサインイン...] を選択します。アカウントがない場合は、 無料の Azure アカウントを作成する ことができます。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.... If you don't already have one, you can Create a free Azure account. 学生は、 無料の Azure for Students アカウントを作成する ことができます。Students can create a free Azure account for Students.

    VS Code 内で Azure にサインインする

    既にサインインしている場合は、次のセクションに進んでください。If you're already signed in, go to the next section.

  2. ブラウザーでプロンプトが表示されたら、ご利用の Azure アカウントを選択し、その Azure アカウントの資格情報を使用してサインインします。When prompted in the browser, choose your Azure account and sign in using your Azure account credentials.

  3. 正常にサインインしたら、新しいブラウザー ウィンドウを閉じてかまいません。After you've successfully signed in, you can close the new browser window. ご利用の Azure アカウントに属しているサブスクリプションがサイド バーに表示されます。The subscriptions that belong to your Azure account are displayed in the Side bar.

Azure にプロジェクトを発行するPublish 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: Functions] 領域で、 [Deploy to function app](関数アプリにデプロイ) ボタンを選択します。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 (フォルダーを選択してください) : ワークスペースのフォルダーを選択するか、関数アプリが格納されているフォルダーを参照します。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 (サブスクリプションを選択してください) : 使用するサブスクリプションを選択します。Select subscription: Choose the subscription to use. サブスクリプションが 1 つのみの場合、このプロンプトは表示されません。You won't see this if you only have one subscription.

    • Select function app in Azure (Azure で関数アプリを選択してください) : [- Create new Function App] を選択します。Select Function App in Azure: Choose - Create new Function App. (Advanced オプションはこの記事では取り上げません。選択しないでください。)(Don't choose the Advanced option, which isn't covered in this article.)

    • Enter a globally unique name for the function app (関数アプリのグローバルに一意の名前を入力します) : 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.

    • Select a runtime (ランタイムを選択してください) : ローカルで実行している Python のバージョンを選択します。Select a runtime: Choose the version of Python you've been running on locally. python --version コマンドを使用してバージョンを確認してください。You can use the python --version command to check your version.
    • Select a runtime (ランタイムを選択してください) : ローカルで実行している 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 (新しいリソースの場所を選択してください) : パフォーマンスを向上させるために、お近くのリージョンを選択してください。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.
    • Standard 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. この通知の [View Output](出力の表示) を選択すると、作成済みの 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: Functions] 領域 (サイド バー内) に戻り、サブスクリプションの下にある新しい関数アプリを展開します。Back in the Azure: Functions area in the side bar, expand the new function app under your subscription. [Functions] を展開し、 [HttpExample] を右クリック (Windows) または Ctrl キーを押しながらクリック (macOS) して、 [Copy function URL](関数 URL のコピー) を選択します。Expand Functions, right-click (Windows) or Ctrl - click (macOS) on HttpExample, and then choose Copy function URL.

    新しい HTTP トリガーの関数 URL をコピーします

  2. HTTP 要求の URL をブラウザーのアドレス バーに貼り付け、この URL の最後に name クエリ文字列を ?name=Functions として追加して、要求を実行します。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:

    http://<functionappname>.azurewebsites.net/api/httpexample?name=Functions
    

    関数によって返されたリモート GET 要求に対するブラウザーでの応答を次の例に示します。The following example shows the response in the browser to the remote GET request returned by the function:

    ブラウザーでの関数の応答

リソースをクリーンアップするClean up resources

この後、関数に Azure Storage キュー バインドを追加する手順に進む場合、既存の作業をベースにするので、リソースはすべてそのままにしておく必要があります。When you continue to the next step, 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 portal を検索して選択します。In the command palette, search for and select Azure Functions: Open in portal.

  2. 関数アプリを選択し、Enter キーを押します。Choose your function app, and press Enter. その関数アプリのページが Azure portal で開きます。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 Queue Storage キュー内のメッセージに書き込まれます。This binding writes the string from the HTTP request to a message in an Azure Queue Storage queue.