演習 - Azure Functions プロジェクトを作成する

  • 6 分

ショッピング リスト Web アプリには API が必要です。 この演習では、Azure Functions プロジェクトを使用して、API をビルドし、実行します。 そこから、Visual Studio Code 用の Azure Functions 拡張機能を使用して、新しい関数で API を拡張します。

この演習では、次の手順を行います。

  1. Web アプリを変更するための準備としてブランチを作成します。
  2. Azure 関数プロジェクトを調べる。
  3. HTTP GET 関数を作成します。
  4. 関数のスタート コードを、製品を取得するためのロジックに置き換えます。
  5. HTTP 要求を API にプロキシするように Web アプリを構成します。
  6. API と Web アプリを実行します。

関数アプリを取得する

次に、API を追加し、それをフロントエンド アプリに接続します。 api-starter フォルダーには、不完全な Azure Functions プロジェクトが含まれています。 それでは、今すぐ完了しましょう。

API ブランチを作成する

アプリに変更を加える前に、変更用の新しいブランチを作成することをお勧めします。 アプリの API を完成しようとしているので、ブランチを作成する良い時期です。

  1. Visual Studio Code で、 F1 キーを押してコマンド パレットを開きます。

  2. 次のように入力して選びます: 「Git: Checkout to...」。

  3. [ 新しいブランチの作成] を選択します。

  4. 新しいブランチ名の API を入力し、 Enter キーを押します。

API Git ブランチを作成しました。

Azure Functions API を完成させる

API を完了するには、まず、スターター API コードを api という名前のフォルダーに移動します。 Static Web Apps インスタンスの作成時に 、api_location にこのフォルダー名を入力しました。

  1. Visual Studio Code で、 F1 キーを押してコマンド パレットを開きます。

  2. 「Terminal: Create New Terminal (In Active Workspace)」を入力して選択してください。

  3. プロジェクトのルート フォルダーにいることを確認します。

  4. 次の git コマンドを実行して、 api-starter フォルダーの名前を api に変更します。

    git mv api-starter api

  5. F1 キーを押してコマンド パレットを開きます。

  6. 「 Git: Commit All」と入力して選択します。

  7. コミット メッセージ API を入力し、 Enter キーを押します。

これで、Visual Studio Code エクスプローラーに API フォルダーが表示されます。 API フォルダーには、Azure Functions プロジェクトと 3 つの関数が含まれています。

フォルダーとファイル メソッド 経路
api/products-post 投稿 products
api/products-put 配置する products/:id
api/products-delete 削除 products/:id

HTTP GET 関数を作成する

API には、ショッピング リストの製品を操作するためのルートがありますが、製品を取得するためのルートはありません。 今すぐ追加しましょう。

Visual Studio Code 用の Azure Functions 拡張機能をインストールする

Visual Studio Code 用の Azure Functions 拡張機能を使用して、Azure Functions アプリケーションを作成および管理できます。

  1. Visual Studio Marketplace に移動し、Visual Studio Code 用の Azure Functions 拡張機能をインストールします。

  2. Visual Studio Code で拡張機能タブが読み込まれたら、[インストール] を選択 します。

  3. インストールが完了したら、[ 再読み込み] を選択します。

注

Azure Functions をローカルで実行できる Azure Functions Core Tools を必ずインストールしてください。

関数を作成する

次に、製品を取得するための関数を使用して Azure 関数アプリを拡張します。

  1. Visual Studio Code で、 F1 キーを押してコマンド パレットを開きます。

  2. 「Azure Functions: 関数の作成」と入力して選択します。

  3. 関数の作成を求められたら、[ HTTP トリガー] を選択します。

  4. 関数の名前として products-get を入力します。

  5. 認証レベルとして [ 匿名 ] を選択します。

注

Functions アプリは API フォルダー内にあり、個々の Web アプリ プロジェクトから分離されます。 フロントエンド フレームワークを使用するすべての Web アプリは、同じ API を呼び出します。 アプリケーションを構成する方法を決定できますが、このサンプルでは、アプリケーションが分離されているのを確認するのに役立ちます。

HTTP メソッドとルート エンドポイントを構成する

フォルダー api/products-get にファイルfunction.jsonが含まれていることに注意 してください 。 このファイルには、関数の構成が含まれています。

規則により、ルート エンドポイントには、関数が含まれるフォルダーと同じ名前が付けられます。 この関数は products-get フォルダーに作成されるため、ルート エンドポイントは既定で products-get として生成されます。 ただし、エンドポイントを 製品にする必要があります。

関数を構成します。

  1. ファイル api/products-get/function.jsonを開きます。

  2. メソッドで GET と POSTの両方が許可されていることに注意してください。

  3. GET要求のみを許可するようにメソッド配列を変更します。

  4. メソッド配列の後に "route": "products" エントリを追加します。

これで、製品に対する HTTP GET要求で関数がトリガーされます。 function.json は次のコードのようになります。

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

関数ロジックを更新する

フォルダー api/products-get に index.js ファイルには、ルートへの HTTP 要求を行うときに実行されるロジックが含まれています。

製品を取得するには、ロジックを更新する必要があります。 JavaScript モジュール /shared/product-data.jsにデータ アクセス ロジックがあります。 product-data モジュールは、ショッピング リストの製品を取得するための関数getProductsを公開します。

ここで、関数エンドポイントを変更して製品が返されるようにします。

  1. ファイル api/products-get/index.jsを開きます。

  2. その内容を次のコードに置き換えます。

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

関数は製品を取得し、成功した場合は状態コード 200 で返します。

クロスオリジン リソース共有 (CORS) をローカルで構成する

Azure Static Web Apps に発行するときに CORS について心配する必要はありません。 リバース プロキシを使用して Azure 上の API と通信できるように、Azure Static Web Apps で自動的にアプリが構成されます。 しかし、ローカルで実行する場合は、Web アプリと API が通信できるように CORS を構成する必要があります。

次に、Web アプリがコンピューター上で API に HTTP 要求を行えるように Azure Functions に指示します。

  1. api/local.settings.jsonという名前のファイルを作成します。

  2. そのファイルに次の内容を追加します。

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

注

local.settings.json ファイルが .gitignore ファイルに一覧表示されているため、このファイルは GitHub にプッシュされません。 これは、GitHub に置きたくないシークレットをこのファイルに格納できるためです。 このため、テンプレートからリポジトリを作成したときに、ファイルを作成する必要がありました。

API を実行する

次は、Web アプリと Azure Functions プロジェクトが連携して動作することを確認します。 まず、次の手順に従って、Azure Functions プロジェクトをローカルで実行します。

注

Azure Functions をローカルで実行できる Azure Functions Core Tools を必ずインストールしてください。

  1. git ターミナルを開き、 api フォルダーに移動します。

    cd api

  2. Azure Functions アプリをローカルで実行します。

    npm install

    npm start

Web アプリを実行する

API が実行されています。 次に、API への HTTP 要求を行うためにフロントエンド アプリを構成する必要があります。 フロントエンド アプリは 1 つのポートで実行され、API は別のポート (7071) で実行されます。 各フロントエンド フレームワークは、HTTP 要求をポートに安全にプロキシするように構成できます。

プロキシ ポートを構成する

次の手順で、フロントエンド アプリのプロキシを構成します。

  1. ファイル angular-app/proxy.conf.jsonを開きます。

  2. target: 'http://localhost:7071' 設定を見つけます。

  3. ターゲットのポートが 7071 を指していることに注意してください。

  1. ファイル react-app/package.jsonを開きます。

  2. "proxy": "http://localhost:7071/", 設定を見つけます。

  3. プロキシのポートが 7071 を指していることに注意してください。

  1. ファイル svelte-app/rollup.config.jsを開きます。

  2. コード const api = 'http://localhost:7071/api';の行を見つけます。

  3. API のポートが 7071 を指していることに注意してください。

  1. ファイル vue-app/vue.config.jsを開きます。

  2. target: 'http://localhost:7071', 設定を見つけます。

  3. ターゲットのポートが 7071 を指していることに注意してください。

フロントエンド Web アプリを実行する

API は既にポート 7071 で実行されています。 これで、Web アプリを実行すると、API への HTTP 要求が行われます。 次の手順に従って Web アプリを実行します。

  1. 2 つ目の Git ターミナル インスタンスを開きます。

  2. 次に、次のコマンドを入力して、優先するフロントエンド フレームワークのフォルダーに移動します。

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. フロントエンド クライアント アプリケーションを実行します。

    npm start

    npm start

    npm run dev

    npm run serve

アプリに移動する

次は、アプリケーションが Azure Functions API に対してローカルに実行されていることを確認します。

  1. http://localhost:4200 にアクセスしてください。
  1. http://localhost:3000 にアクセスしてください。
  1. http://localhost:5000 にアクセスしてください。
  1. http://localhost:8080 にアクセスしてください。
  1. アプリケーションをビルドしたので、ローカルで実行すると、API に対して HTTP GET 要求が行われるようになりました。 次に、ターミナルで Ctrl キーを押しながら C キー を押して、実行中のアプリと API を停止します。

次のステップ

アプリはローカルで動作し、次の手順では API を使用してアプリを発行します。