クイックスタート: コマンド ラインから Azure に TypeScript 関数を作成する

この記事では、コマンドライン ツールを使用して、HTTP 要求に応答する TypeScript 関数を作成します。 コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。

このクイックスタートを完了すると、ご利用の Azure アカウントでわずかな (数セント未満の) コストが発生します。

また、この記事の Visual Studio Code ベースのバージョンも存在します。

ローカル環境を構成する

開始する前に、次の項目を用意する必要があります。

前提条件のチェック

前提条件を確認します。前提条件は、Azure リソースの作成に Azure CLI を使用するか、Azure PowerShell を使用するかによって異なります。

  • ターミナルまたはコマンド ウィンドウで func --version を実行して、Azure Functions Core Tools のバージョンが 3.x であることを確認します。

  • az --version を実行して、Azure CLI バージョンが 2.4 以降であることを確認します。

  • az login を実行して Azure にサインインし、アクティブなサブスクリプションを確認します。

ローカル関数プロジェクトを作成する

Azure Functions における関数プロジェクトとは、それぞれが特定のトリガーに応答する個別の関数を 1 つまたは複数含んだコンテナーです。 プロジェクト内のすべての関数は、同じローカル構成とホスティング構成を共有します。 このセクションでは、関数を 1 つだけ含んだ関数プロジェクトを作成します。

  1. 次のように func init コマンドを実行して、特定のランタイムを含んだ LocalFunctionProj という名前のフォルダーに関数プロジェクトを作成します。

    func init LocalFunctionProj --typescript
    
  2. プロジェクト フォルダーに移動します。

    cd LocalFunctionProj
    

    このフォルダーにはプロジェクト用の各種ファイルが格納されています。たとえば、local.settings.jsonhost.json といった名前の構成ファイルです。 local.settings.json には Azure からダウンロードしたシークレットを含めることができるため、このファイルは既定で .gitignore ファイルによってソース管理から除外されます。

  3. 次のコマンドを使用して、関数をプロジェクトに追加します。ここで、--name 引数は関数の一意の名前 (HttpExample) で、--template 引数は関数のトリガー (HTTP) を指定します。

    func new --name HttpExample --template "HTTP trigger" --authlevel "anonymous"
    

    func new によって、関数と同じ名前のサブフォルダーが作成されます。ここには、プロジェクト用に選択した言語に適したコード ファイルと、function.json という名前の構成ファイルが含まれます。

(省略可) ファイルの内容を確認する

先に「関数をローカルで実行する」に進み、ファイルの内容は後から確認してもかまいません。

index.ts

index.ts は、function.json の構成に従ってトリガーされる関数をエクスポートします。

import { AzureFunction, Context, HttpRequest } from "@azure/functions"

const httpTrigger: AzureFunction = async function (context: Context, req: HttpRequest): Promise<void> {
    context.log('HTTP trigger function processed a request.');
    const name = (req.query.name || (req.body && req.body.name));
    const responseMessage = name
        ? "Hello, " + name + ". This HTTP triggered function executed successfully."
        : "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response.";

    context.res = {
        // status: 200, /* Defaults to 200 */
        body: responseMessage
    };

};

export default httpTrigger;

HTTP トリガーの場合、この関数は、function.json に定義されている HttpRequest 型の変数 req で要求データを受け取ります。 function.json$return として定義されている返されるオブジェクトが応答です。

function.json

function.json は、関数の入出力 bindings (トリガーの型を含む) を定義する構成ファイルです。

{
    "bindings": [
        {
            "authLevel": "function",
            "type": "httpTrigger",
            "direction": "in",
            "name": "req",
            "methods": [
                "get",
                "post"
            ]
        },
        {
            "type": "http",
            "direction": "out",
            "name": "res"
        }
    ]
}

各バインディングは、方向、型、一意の名前を必要とします。 HTTP トリガーには、httpTrigger 型の入力バインディングと、http 型の出力バインディングが与えられます。

関数をローカルで実行する

  1. LocalFunctionProj フォルダーから、ローカルの Azure Functions ランタイム ホストを起動して関数を実行します。

    npm install
    npm start
    

    出力の最後の方に、次の行があります。

     ...
    
     Now listening on: http://0.0.0.0:7071
     Application started. Press Ctrl+C to shut down.
    
     Http Functions:
    
             HttpExample: [GET,POST] http://localhost:7071/api/HttpExample
     ...
    
     

    注意

    HttpExample が以下のように表示されない場合、プロジェクトのルート フォルダー以外からホストを起動したと考えられます。 その場合は Ctrl + C キーを使用してホストを停止し、プロジェクトのルート フォルダーに移動して、前出のコマンドを再度実行してください。

  2. この出力から HttpExample 関数の URL をブラウザーにコピーし、クエリ文字列 ?name=<your-name> を追加して、URL 全体を http://localhost:7071/api/HttpExample?name=Functions のようにします。 Hello Functions のようなメッセージがブラウザーに表示されます。

    ブラウザーでローカルに関数を実行した結果

    要求を行うと、プロジェクトを起動したターミナルにもログ出力が表示されます。

  3. 準備が完了したら、Ctrl + C キーを押し、y を選択して関数ホストを停止してください。

関数用の関連 Azure リソースを作成する

関数コードを Azure にデプロイする前に、3 つのリソースを作成する必要があります。

  • リソース グループ。関連リソースの論理コンテナーです。
  • ストレージ アカウント。関数についての情報 (状態など) を維持する目的で使用されます。
  • 関数アプリ。関数コードを実行するための環境となります。 関数アプリは、ローカルの関数プロジェクトと対応関係にあります。これを使用すると、リソースの管理、デプロイ、共有を容易にするための論理ユニットとして関数をグループ化できます。

以下のコマンドを使用してこれらの項目を作成します。 Azure CLI と PowerShell の両方がサポートされます。

  1. まだ Azure にサインインしていない場合は、Azure にサインインします。

    az login
    

    az login コマンドで Azure アカウントにサインインします。

  2. 選択したリージョンに AzureFunctionsQuickstart-rg という名前のリソース グループを作成します。

    az group create --name AzureFunctionsQuickstart-rg --location <REGION>
    

    az group create コマンドでリソース グループを作成します。 上記のコマンドで、az account list-locations コマンドから返された使用可能なリージョン コードを使用して、<REGION> を自分の近くのリージョンに置き換えます。

  3. リソース グループとリージョン内に汎用ストレージ アカウントを作成します。

    az storage account create --name <STORAGE_NAME> --location <REGION> --resource-group AzureFunctionsQuickstart-rg --sku Standard_LRS
    

    az storage account create コマンドでストレージ アカウントを作成します。

    前の例の <STORAGE_NAME> は、適宜、Azure Storage 内で一意の名前に置き換えてください。 名前は 3 文字から 24 文字とし、小文字のみを使用する必要があります。 Standard_LRS は汎用アカウントを指定します。これは Functions でサポートされています。

  1. Azure に関数アプリを作成します。

    az functionapp create --resource-group AzureFunctionsQuickstart-rg --consumption-plan-location <REGION> --runtime node --runtime-version 12 --functions-version 3 --name <APP_NAME> --storage-account <STORAGE_NAME>
    

    az functionapp create コマンドで Azure に関数アプリを作成します。 Node.js 10 を使用している場合は、さらに --runtime-version10 に変更します。

    前の例では、<STORAGE_NAME> を前の手順で使用したアカウントの名前に、<APP_NAME> を適宜グローバルに一意の名前に置き換えてください。 <APP_NAME> は、関数アプリの既定の DNS ドメインでもあります。

    このコマンドでは、Azure Functions 従量課金プラン (ここで発生する使用量に関しては無料) で、指定された言語ランタイムで実行される関数アプリを作成します。 また、このコマンドを実行すると、関連する Azure Application Insights インスタンスが同じリソース グループにプロビジョニングされます。このインスタンスを使用することで、関数アプリを監視したりログを確認したりすることができます。 詳しくは、「Azure Functions を監視する」をご覧ください。 このインスタンスは、アクティブにするまでコストが発生しません。

Azure に関数プロジェクトをデプロイする

Core Tools を使用して対象のプロジェクトを Azure にデプロイする前に、TypeScript ソース ファイルから JavaScript ファイルの運用対応のビルドを作成します。

  1. 次のコマンドを使用して、TypeScript プロジェクトをデプロイする準備をします。

    npm run build:production 
    
  2. 必要なリソースが揃ったら、func azure functionapp publish コマンドを使用して、ローカル関数プロジェクトを Azure の関数アプリにデプロイすることができます。 次の例の <APP_NAME> は、実際のアプリ名に置き換えてください。

    func azure functionapp publish <APP_NAME>
    

    "... という名前のアプリが見つからない" という内容のエラーが表示された場合は、数秒待ってからやり直してください。先ほどの az functionapp create コマンドの後、Azure でアプリが完全には初期化されていない可能性があります。

    publish コマンドを実行すると、次のような出力結果が表示されます (簡潔にするため一部省略しています)。

     ...
    
     Getting site publishing info...
     Creating archive for current directory...
     Performing remote build for functions project.
    
     ...
    
     Deployment successful.
     Remote build succeeded!
     Syncing triggers...
     Functions in msdocs-azurefunctions-qs:
         HttpExample - [httpTrigger]
             Invoke url: https://msdocs-azurefunctions-qs.azurewebsites.net/api/httpexample?code=KYHrydo4GFe9y0000000qRgRJ8NdLFKpkakGJQfC3izYVidzzDN4gQ==
     

Azure 上の関数を呼び出す

この関数は HTTP トリガーを使用しているため、呼び出しは、その URL にブラウザーから HTTP 要求を送信するか、または curl などのツールを使用して行います。

publish コマンドの出力に表示されている完全な 呼び出し URL にクエリ パラメーター &name=Functions を追加して、ブラウザーのアドレス バーにコピーします。 関数をローカルで実行したときと同様の出力がブラウザーに表示されるはずです。

Azure 上で実行された関数の出力をブラウザーで表示したところ

凖リアルタイムのストリーミング ログを表示するには、次のコマンドを実行します。

func azure functionapp logstream <APP_NAME> 

別のターミナル ウィンドウまたはブラウザーで、もう一度リモート関数を呼び出します。 Azure で実行された関数の詳細ログがターミナルに表示されます。

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

次の手順に進んで Azure Storage キュー出力バインディングを追加する場合、既存の作業をベースにするので、リソースはすべてそのままにしておいてください。

それ以外の場合は、追加コストの発生を避けるために、次のコマンドを使用して、リソース グループとそこに含まれるすべてのリソースを削除してください。

az group delete --name AzureFunctionsQuickstart-rg

次のステップ