TypeScriptでAzure Functionsを試す

TypeScriptでAzure Functionsを作ってみます。

準備

VSCodeで開発します。拡張機能でAzure Functionsをインストールしておきます。

プロジェクトの作成

コマンドパレットからAzure FunctionsのCreate Projectを実行します。

対話形式でプロジェクトの設定を進めていきます。今回は以下のようなプロジェクトを作成しました。

• 言語: TypeScript
• テンプレート: HttpTrigger
• 関数名: HttpTrrigerSample
• 承認レベル: Anonymous

以下のようなプロジェクトが作成されます。

デバッグ実行

F5でデバッグ実行します。初回はAzure Functions Core Toolsのインストールダイアログが出てくるのでインストールします。

TypeScriptのコンパイルで以下のようなエラーが出ました。

node_modules/@azure/functions/index.d.ts:220:16 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

220         value: Buffer;

@types/nodeをインストールしろと言われているので指示通りにnpm i --save-dev @types/nodeを実行し、再度デバッグ実行します。

[2022-06-30T13:54:10.900Z] Worker process started and initialized.
        HttpTriggerSample: [GET,POST] http://localhost:7071/api/HttpTriggerSample

ターミナルに表示されたURLをブラウザで開いてみます。Azure Functionsの実行に成功しました的なメッセージが表示されました。

クエリ文字列でパラメータを渡してみる

index.tsを少し読み解いてみると、表示されるメッセージ(responseMessage)がクエリ文字列nameの有り無しによって切り替わるようです。

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;

クエリ文字列を追加したURL（http://localhost:7071/api/HttpTriggerSample?name=Hidebo-）を開いてみるとちゃんとメッセージが切り替わりました。

参考

docs.microsoft.com