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

6 分

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

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

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

関数アプリを取得する

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

API ブランチを作成する

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

Visual Studio Code で、F1 キーを押してコマンドパレットを開きます。
「Git: Chekout to...」と入力して選択します。
[Create new branch](新しいブランチの作成) を選択します。
新しいブランチ名として「api」と入力し、Enter キーを押します。

これで api git ブランチが作成されました。

Azure Functions API を完成させる

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

Visual Studio Code で、F1 キーを押してコマンドパレットを開きます。
「(アクティブなワークスペースで) Terminal: Create New Integrated Terminal」と入力して選択します。
プロジェクトのルートフォルダーを開いていることを確認します。
次の git コマンドを実行して、api-starter フォルダーの名前を api に変更します。
```
git mv api-starter api
```
F1 キーを押して、コマンドパレットを開きます。
「Git: Commit All」と入力して選択します。
コミットメッセージとして「api」と入力し、Enter キーを押します。

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

フォルダーとファイル	方法	ルート
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

HTTP GET 関数を作成する

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

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

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

Visual Studio Marketplace に移動し、Visual Studio Code 用 Azure Functions 拡張機能をインストールします。
拡張機能タブが Visual Studio Code に読み込まれたら、[インストール] を選択します。
インストールが完了したら、[再読み込み] を選択します。

Note

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

関数を作成する

次に、製品を取得する関数を使って Azure Function アプリを拡張します。

Visual Studio Code で、F1 キーを押してコマンドパレットを開きます。
[Azure Functions: 関数の作成] を入力して選択します。
関数の作成を求められたら、[HTTP トリガー] を選択します。
関数の名前として、「products-get」と入力します。
認証レベルとして [匿名] を選択します。

Note

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

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

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

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

次のようにして関数を構成します。

api/products-get/function.json ファイルを開きます。
メソッドにより GET と POST が両方許可されることに注意します。
GET 要求だけを許可するようにメソッド配列を変更します。
メソッド配列の後に "route": "products" エントリを追加します。

これで、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 を公開します。

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

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

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

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 で返されます。

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

ここで、コンピューターでの Web アプリによる API に対する HTTP 要求を許可するように、Azure Functions に指示します。

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

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

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

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

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

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

Note

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

API を実行する

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

Note

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

git ターミナルを開き、api フォルダーに移動します。
```
cd api
```
Azure Functions アプリをローカルで実行します。
```
npm install
```
```
npm start
```

Web アプリを実行する

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

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

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

angular-app/proxy.conf.json ファイルを開きます。
target: 'http://localhost:7071' 設定を見つけます。
ターゲットのポートが 7071 を指していることに注目してください。

react-app/package.json ファイルを開きます。
"proxy": "http://localhost:7071/", 設定を見つけます。
プロキシのポートが 7071 を指していることに注目してください。

svelte-app/rollup.config.js ファイルを開きます。
const api = 'http://localhost:7071/api'; というコード行を見つけます。
API のポートが 7071 を指していることに注目してください。

vue-app/vue.config.js ファイルを開きます。
target: 'http://localhost:7071', 設定を見つけます。
ターゲットのポートが 7071 を指していることに注目してください。

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

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

2 つ目の git ターミナルインスタンスを開きます。
次に、以下のコマンドを入力して、任意のフロントエンドフレームワークのフォルダーに移動します。
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```
フロントエンドクライアントアプリケーションを実行します。
```
npm start
```
```
npm start
```
```
npm run dev
```
```
npm run serve
```

アプリに移動する

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

http://localhost:4200 を参照します。

http://localhost:3000 を参照します。

http://localhost:5000 を参照します。

http://localhost:8080 を参照します。

アプリケーションをビルドしたので、ローカルで実行すると、API に対して HTTP GET 要求が行われるようになりました。ここで、ターミナルで Ctrl + C キーを押して、実行中のアプリと API を停止します。

次の手順

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

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

関数アプリを取得する

API ブランチを作成する

Azure Functions API を完成させる

HTTP GET 関数を作成する

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

関数を作成する

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

関数ロジックを更新する

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

API を実行する

Web アプリを実行する

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

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

アプリに移動する

次の手順

フィードバック

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

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

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