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

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

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

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

環境を構成する

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

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

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

  1. アクティビティ バーの Azure アイコンを選択します。 [ワークスペース (ローカル)] 領域の + ボタンを選択して、ドロップダウンから [関数の作成] を選択します。 確認を求められたら [新しいプロジェクトの作成] を選択します。

    [新しいプロジェクトの作成] ウィンドウのスクリーンショット。

  2. プロジェクト ワークスペースのディレクトリの場所を選択し、[選択] を選択します。 新しいフォルダーを作成するか、プロジェクト ワークスペースの空のフォルダーを選択する必要があります。 ワークスペースに最初から含まれているプロジェクト フォルダーは選択しないでください。

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

    Prompt [選択]
    Select a language for your function project (関数プロジェクトの言語を選択してください) JavaScript を選択します。
    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 (プロジェクトを開く方法を選択してください) Add to workspace を選択します。

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

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

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

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

    ローカル関数の VS Code 出力のスクリーンショット。

    Windows での実行に問題がある場合、Visual Studio Code の既定のターミナルが WSL Bash に設定されていないことをご確認ください。

  2. Core Tools がターミナルでまだ実行されている状態で、アクティビティ バーの Azure アイコンを選択します。 [ワークスペース] 領域で、[ローカル プロジェクト]>[関数] を展開します。 新しい関数を右クリック (Windows) または Ctrl キーを押しながらクリック (macOS) して、[Execute Function Now] (今すぐ関数を実行) を選択します。

    Visual Studio Code から今すぐ関数を実行する

  3. [Enter request body](要求本文を入力してください) に、要求メッセージ本文の値として が表示されます。 Enter キーを押して、この要求メッセージを関数に送信します。

  4. ローカルで関数を実行し、応答が返されると、Visual Studio Code で通知が発生します。 関数の実行に関する情報は、 [ターミナル] パネルに表示されます。

  5. [ターミナル] パネルにフォーカスがある状態で、Ctrl + C キーを押して Core Tools を停止し、デバッガーの接続を解除します。

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

Azure へのサインイン

アプリを発行するには、Azure にサインインしておく必要があります。

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

    VS Code 内の [Azure にサインイン] ウィンドウのスクリーンショット。

    既にサインインしていて、既存のサブスクリプションを確認できる場合は、次のセクションに進みます。 まだ Azure アカウントがない場合は、[Azure アカウントの作成] を選択します。学生の方は [Create an Azure for Students Account] (Azure for Students アカウントの作成) を選択してください。

  2. ブラウザーでプロンプトが表示されたら、ご利用の Azure アカウントを選択し、その Azure アカウントの資格情報を使用してサインインします。 新しいアカウントを作成した場合は、アカウントの作成後にサインインできます。

  3. 正常にサインインしたら、新しいブラウザー ウィンドウを閉じてかまいません。 ご利用の Azure アカウントに属しているサブスクリプションがサイド バーに表示されます。

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

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

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

    Azure サブスクリプションでリソースを作成する

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

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

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

    Azure リソース作成のログ

  3. 作成が完了すると、次の Azure リソースがサブスクリプションに作成されます。 リソースは、関数アプリの名前に基づいて命名されます。

    • リソース グループ。関連リソースの論理コンテナーです。
    • Standard Azure ストレージ アカウント。プロジェクトについての状態とその他の情報を保持します。
    • 関数アプリ。関数コードを実行するための環境となります。 関数アプリを使用すると、同じホスティング プランに含まれるリソースの管理、デプロイ、共有を容易にするための論理ユニットとして関数をグループ化できます。
    • App Service プラン。関数アプリの基になるホストを定義します。
    • 関数アプリに接続された Application Insights インスタンス。アプリ内の関数の使用を追跡します。

    関数アプリが作成され、展開パッケージが適用されると、通知が表示されます。

    ヒント

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

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

重要

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

  1. アクティビティ バーの Azure アイコンを選択し、[ワークスペース] 領域でプロジェクト フォルダーを選択して、[デプロイ] ボタンを選択します。

    Visual Studio Code ワークスペースからプロジェクトをデプロイする

  2. [Deploy to Function App](関数アプリへのデプロイ) を選択し、先ほど作成した関数アプリを選び、[Deploy](デプロイ) を選択します。

  3. デプロイの完了後、[View Output] (出力の表示) を選択すると、作成済みの Azure リソースなど、作成とデプロイの結果が表示されます。 通知を見逃した場合は、右下隅にあるベル アイコンを選択して、再度確認します。

    [出力の表示] ウィンドウのスクリーンショット。

Azure で関数を実行する

  1. サイド バー内の[リソース] 領域に戻り、サブスクリプション、新しい関数アプリ、[関数] の順に展開します。 関数を右クリック (Windows) または Ctrl キーを押しながらクリック (macOS) して、[Execute Function Now](今すぐ関数を実行) を選択します。

    Visual Studio Code から Azure 内の関数を実行するスクリーンショット。

  2. [Enter request body](要求本文を入力してください) に、要求メッセージ本文の値として が表示されます。 Enter キーを押して、この要求メッセージを関数に送信します。

  3. Azure で関数を実行し、応答が返されると、Visual Studio Code で通知が発生します。

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

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

  2. このファイルを次のコードに置き換え、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
            };
        }
    }
    
  3. 関数アプリをローカルで実行します。

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

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

    {
      "name": "Tom",
      "sport": "basketball",
      "message": "Tom likes basketball",
      "success": true
    }
    
  6. 関数を Azure に再デプロイします。

トラブルシューティング

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

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

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

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

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

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

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

次のステップ

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