クイックスタート: Visual Studio Code を使用して Azure に JavaScript 関数を作成する

[アーティクル]
08/03/2023

Visual Studio Code を使用して、HTTP 要求に応答する JavaScript 関数を作成します。コードをローカルでテストした後、Azure Functions のサーバーレス環境にデプロイします。

重要

ページの上部にあるセレクターで Node.js プログラミングモデルを選ぶと、この記事の内容は変わります。 v4 モデルは一般提供されており、JavaScript と TypeScript の開発者にとって、より柔軟で直感的なエクスペリエンスが得られるように設計されています。 v3 と v4 の違いの詳細については、移行ガイドを参照してください。

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

また、この記事の CLI ベースのバージョンもあります。

環境を構成する

作業を開始する前に、次の要件が満たされていることを確認します。

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Node.js 14.x 以降。 node --version コマンドを使用して、現在のバージョンを確認してください。
サポートされているプラットフォームのいずれかにインストールされた Visual Studio Code。
Visual Studio Code 用 Azure Functions 拡張機能。この拡張機能では、初めてローカルで関数を実行するときに、Azure Functions Core Tools がインストールされます。

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
Node.js 18.x 以降。 node --version コマンドを使用して、現在のバージョンを確認してください。
サポートされているプラットフォームのいずれかにインストールされた Visual Studio Code。
Visual Studio Code 用 Azure Functions 拡張機能 v1.10.4 以降。この拡張機能では、初めてローカルで関数を実行するときに、Azure Functions Core Tools がインストールされます。 Node.js v4 には、バージョン 4.0.5382 以降のバージョンの Core Tools が必要です。

Core Tools のインストールまたは更新

Visual Studio Code の Azure Functions 拡張機能は、Azure Functions Core Tools と統合されているため、Azure Functions ランタイムを使用して Visual Studio Code でローカルで関数を実行およびデバッグできます。開始前に、Core Tools をローカルにインストールするか、最新バージョンを使用するように既存のインストールを更新することを推奨します。

Visual Studio Code で F1 キーを押してコマンドパレットを開き、Azure Functions: Core Tools のインストールまたは更新 コマンドを検索して実行します。

このコマンドを実行すると、最新バージョンの Core Tools のパッケージベースのインストールが開始されます。

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

このセクションでは、Visual Studio Code を使用して、ローカル Azure Functions プロジェクトを JavaScript で作成します。この記事の後半で、関数コードを Azure に発行します。

アクティビティバーの Azure アイコンを選択します。 [ワークスペース (ローカル)] 領域の + ボタンを選択して、ドロップダウンから [関数の作成] を選択します。確認を求められたら [新しいプロジェクトの作成] を選択します。
プロジェクトワークスペースのディレクトリの場所を選択し、選択を選択します。新しいフォルダーを作成するか、プロジェクトワークスペースの空のフォルダーを選択する必要があります。ワークスペースに最初から含まれているプロジェクトフォルダーは選択しないでください。

プロンプトで、次の情報を入力します。

Prompt	[選択]
Select a language for your function project (関数プロジェクトの言語を選択してください)	`JavaScript` を選択します。
JavaScript プログラミングモデルを選択する	`Model V3` を選択します
Select a template for your project's first function (プロジェクトの最初の関数のテンプレートを選択してください)	`HTTP trigger` を選択します。
Provide a function name (関数名を指定してください)	「`HttpExample`.
承認レベル	`Anonymous` を選択します。この場合、すべてのユーザーが関数のエンドポイントを呼び出すことができます。承認レベルについては、「承認キー」を参照してください。
Select how you would like to open your project (プロジェクトを開く方法を選択してください)	`Open in current window` を選択します。

Visual Studio Code は、この情報を使用して、HTTP トリガーによる Azure Functions プロジェクトを生成します。ローカルプロジェクトファイルは、エクスプローラーで表示できます。作成されるファイルの詳細については、「生成されるプロジェクトファイル」を参照してください。

プロンプトで、次の情報を入力します。

Prompt	[選択]
Select a language for your function project (関数プロジェクトの言語を選択してください)	`JavaScript` を選択します。
JavaScript プログラミングモデルを選択する	`Model V4` を選択します
Select a template for your project's first function (プロジェクトの最初の関数のテンプレートを選択してください)	`HTTP trigger` を選択します。
Provide a function name (関数名を指定してください)	「`HttpExample`.
Select how you would like to open your project (プロジェクトを開く方法を選択してください)	`Open in current window` を選択します

Visual Studio Code は、この情報を使用して、HTTP トリガーによる Azure Functions プロジェクトを生成します。ローカルプロジェクトファイルは、エクスプローラーで表示できます。作成されるファイルの詳細については、Azure Functions JavaScript 開発者ガイドを参照してください。

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

Visual Studio Code を Azure Functions Core Tools と統合することで、このプロジェクトをローカルの開発用コンピューター上で実行してから、Azure に発行することができます。

関数をローカルで開始するには、F5 キーまたは、左側のアクティビティバーの [実行とデバッグ] アイコンを押します。 ターミナル パネルに、Core Tools からの出力が表示されます。アプリがターミナル パネルで起動します。 HTTP によってトリガーされる関数の URL エンドポイントがローカルで実行されていることを確認できます。

Windows での実行に問題がある場合、Visual Studio Code の既定のターミナルが WSL Bash に設定されていないことをご確認ください。
Core Tools がターミナルでまだ実行されている状態で、アクティビティバーの Azure アイコンを選択します。 [ワークスペース] 領域で、[ローカルプロジェクト]>[関数] を展開します。新しい関数を右クリック (Windows) または Ctrl キーを押しながらクリック (macOS) して、[Execute Function Now] (今すぐ関数を実行) を選択します。
[Enter request body]\(要求本文を入力してください\) に、要求メッセージ本文の値として { "name": "Azure" } が表示されます。 Enter キーを押して、この要求メッセージを関数に送信します。
ローカルで関数を実行し、応答が返されると、Visual Studio Code で通知が発生します。関数の実行に関する情報は、 [ターミナル] パネルに表示されます。
[ターミナル] パネルにフォーカスがある状態で、Ctrl + C キーを押して Core Tools を停止し、デバッガーの接続を解除します。

関数がローカルコンピューター上で正常に動作することを確認したら、Visual Studio Code を使用してプロジェクトを直接 Azure に発行します。

Azure リソースを作成したり、アプリを発行したりする前に、Azure にサインインする必要があります。

まだサインインしていない場合は、[アクティビティ] バーの Azure アイコンを選択します。次に、[リソース] 領域で [Azure にサインイン...] を選択します。

既にサインインしていて、既存のサブスクリプションを確認できる場合は、次のセクションに進みます。まだ Azure アカウントがない場合は、[Azure アカウントの作成] を選択します。学生の方は [Microsoft Azure for Students アカウントの作成] を選択してください。
ブラウザーでプロンプトが表示されたら、ご利用の Azure アカウントを選択し、その Azure アカウントの資格情報を使用してサインインします。新しいアカウントを作成した場合は、アカウントの作成後にサインインできます。
正常にサインインしたら、新しいブラウザーウィンドウを閉じてかまいません。ご利用の Azure アカウントに属しているサブスクリプションがサイドバーに表示されます。

Azure に関数アプリを作成する

このセクションでは、Azure サブスクリプションに関数アプリと関連リソースを作成します。

アクティビティバーの Azure アイコンを選択します。次に、[リソース] 領域の + アイコンを選択し、[Azure に関数アプリを作成] オプションを選択します。

プロンプトで、次の情報を入力します。

Prompt	[選択]
サブスクリプションを選択してください	使用するサブスクリプションを選択します。 [リソース] に表示されるサブスクリプションが 1 つだけのときは、このプロンプトは表示されません。
関数アプリのグローバルに一意の名前を入力してください	URL パスに有効な名前を入力します。入力した名前は、Azure Functions 内での一意性を確保するために検証されます。
ランタイムスタックを選択してください	ローカルで実行している言語バージョンを選択してください。
Select a location for new resources (新しいリソースの場所を選択してください)	パフォーマンスを向上させるために、お近くのリージョンを選択してください。

この拡張機能は、Azure に作成されている個々のリソースの状態を [Azure: アクティビティログ] パネルに表示します。

Azure リソース作成のログ

作成が完了すると、次の Azure リソースがサブスクリプションに作成されます。リソースは、関数アプリの名前に基づいて命名されます。
- リソースグループ。関連リソースの論理コンテナーです。
- Standard Azure ストレージアカウント。プロジェクトについての状態とその他の情報を保持します。
- 関数アプリ。関数コードを実行するための環境となります。関数アプリを使用すると、同じホスティングプランに含まれるリソースの管理、デプロイ、共有を容易にするための論理ユニットとして関数をグループ化できます。
- App Service プラン。関数アプリの基になるホストを定義します。
- 関数アプリに接続された Application Insights インスタンス。アプリ内の関数の使用を追跡します。
関数アプリが作成され、展開パッケージが適用されると、通知が表示されます。

ヒント

既定では、関数アプリに必要な Azure リソースが、指定した関数アプリ名に基づいて作成されます。また、既定では、関数アプリを含んだ同じ新しいリソースグループがその作成先となります。それらのリソースの名前をカスタマイズしたり、既存のリソースを再利用したりする場合は、高度な作成オプションを使用してプロジェクトを発行する必要があります。

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

重要

既存の関数アプリにデプロイすると、Azure にあるそのアプリの内容が常に上書きされます。

Azure アクティビティの [リソース] 領域で、先ほど作成した関数アプリリソースを見つけて、リソースを右クリックし、[関数アプリにデプロイ] を選択します。
前のデプロイの上書きを求められたら、[デプロイ] を選択して、関数コードを新しい関数アプリリソースにデプロイします。
デプロイの完了後、[View Output] (出力の表示) を選択すると、作成済みの Azure リソースなど、作成とデプロイの結果が表示されます。通知を見逃した場合は、右下隅にあるベルアイコンを選択して、再度確認します。

Azure で関数を実行する

[リソース] 領域 (サイドバー内) に戻り、サブスクリプション、新しい関数アプリ、[関数] の順に展開します。 HttpExample 関数を右クリック (Windows) または Ctrl キーを押しながらクリック (macOS) して、[Execute Function Now]\(今すぐ関数を実行\) を選択します。
[Enter request body]\(要求本文を入力してください\) に、要求メッセージ本文の値として { "name": "Azure" } が表示されます。 Enter キーを押して、この要求メッセージを関数に送信します。
Azure で関数を実行し、応答が返されると、Visual Studio Code で通知が発生します。

コードを変更して Azure に再デプロイする

Visual Studio Code のエクスプローラービューで、./HttpExample/index.js ファイルを選択します。

このファイルを次のコードに置き換え、JSON オブジェクトを作成して返します。

module.exports = async function (context, req) {

    try {
        context.log('JavaScript HTTP trigger function processed a request.');

        // Read incoming data
        const name = (req.query.name || (req.body && req.body.name));
        const sport = (req.query.sport || (req.body && req.body.sport));

        // fail if incoming data is required
        if (!name || !sport) {

            context.res = {
                status: 400
            };
            return;
        }

        // Add or change code here
        const message = `${name} likes ${sport}`;

        // Construct response
        const responseJSON = {
            "name": name,
            "sport": sport,
            "message": message,
            "success": true
        }

        context.res = {
            // status: 200, /* Defaults to 200 */
            body: responseJSON,
            contentType: 'application/json'
        };
    } catch(err) {
        context.res = {
            status: 500
        };
    }
}

関数アプリをローカルで実行します。
プロンプト [Enter request body] (要求本文を入力してください) で、要求メッセージ本文を { "name": "Tom","sport":"basketball" } に変更します。 Enter キーを押して、この要求メッセージを関数に送信します。

通知の応答を表示します。

{
  "name": "Tom",
  "sport": "basketball",
  "message": "Tom likes basketball",
  "success": true
}

関数を Azure に再デプロイします。

トラブルシューティング

次の表を利用して、このクイックスタートの使用時に発生する最も一般的な問題を解決してください。

問題	解決策
ローカル関数プロジェクトを作成できない場合	Azure Functions 拡張機能がインストールされていることを確認してください。
関数をローカルで実行できない場合	Azure Functions Core Tools の最新バージョンがインストールされていることを確認してください。 Windows で実行している場合、Visual Studio Code の既定のターミナルシェルが WSL Bash に設定されていないことを確認してください。
関数を Azure にデプロイできない場合	出力でエラー情報を確認します。出力は、右下隅にあるベルアイコンでも確認できます。既存の関数アプリに発行していないか確認します。この操作を実行すると、Azure にあるそのアプリの内容が上書きされます。
クラウドベースの関数アプリを実行できなかった場合	必ず、パラメーターで送信するクエリ文字列を使用してください。

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

この後、次の手順に進んで Azure Storage キューバインドを関数に追加する場合、既存の作業をベースにするので、リソースはすべてそのままにしておく必要があります。

それ以外の場合は、追加コストの発生を避けるために、次の手順に従って関数アプリとその関連リソースを削除してください。

Visual Studio Code で、Azure アイコンを選択して Azure エクスプローラーを開きます。
[リソースグループ] セクションで、自分のリソースグループを見つけます。
そのリソースグループを右クリックして、 [削除] を選択します。

Functions のコストについて詳しくは、「従量課金プランのコストの見積もり」を参照してください。

次のステップ

Visual Studio Code を使用して、HTTP によってトリガーされる単純な関数を含む関数アプリを作成しました。次の記事では、Azure Cosmos DB または Azure Storage に接続することによってその関数を拡張します。他の Azure サービスへの接続について詳しくは、「Azure Functions の既存の関数にバインドを追加する」を参照してください。セキュリティの詳細については、「Azure Functions のセキュリティ保護」を参照してください。

Azure Cosmos DB に接続する

Azure Queue Storage へ接続する

Visual Studio Code を使用して、HTTP によってトリガーされる単純な関数を含む関数アプリを作成しました。

JavaScript 関数の詳細情報

クイックスタート: Visual Studio Code を使用して Azure に JavaScript 関数を作成する

環境を構成する

Core Tools のインストールまたは更新

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

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

Azure へのサインイン

Azure に関数アプリを作成する

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

Azure で関数を実行する

コードを変更して Azure に再デプロイする

トラブルシューティング

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

次のステップ

その他のリソース

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