演習 - 関数プロジェクトを作成する

完了

Tailwind Traders では従来の API のビルドを予定していましたが、あなたは、トラフィックが予期せず急増する API にはサーバーレスが最適であることをうまく伝えることができました。 また、既存のコードベースを妨げることなく実行できます。 お疲れ様でした。 あなたは、将来、オンラインのハードウェア販売で長いキャリアを積んでいるでしょう。

次は、高尚な専門用語について確認します。 ここで、Products Manager アプリ用の HTTP API となる新しいプロジェクトを Azure Functions で作成する必要があります。 これは、Products Manager アプリで製品を作成、読み取り、更新、削除できるようにするために必要となるエンドポイントをすべて備えた、Azure Functions プロジェクトを作成すること意味します。

既存のコードを使ってプロジェクトを作成する

この演習には、部分的に完成しているコード ベースが用意されています。 新しい Azure Functions アプリを作成するときは、既存の package.json ファイルをそのまま残しておく必要があります。 package.json ファイルは、プロジェクトの依存関係を含むファイルです。 上書きすると、既存の依存関係が失われます。

このワークフローは、プロジェクトを開始しやすくするために選択されました。 プロジェクトをゼロから設定することにではなく、サーバーレス コードとデータベース統合コードに集中できます。

新しい Azure Functions プロジェクトを作成する

  1. Visual Studio Code で、コマンド パレットを開きます。

  2. create new project」と入力します。

  3. [Azure Functions: 新しいプロジェクトの作成] を選択します。

  4. api フォルダーを選択します

  5. メッセージが表示されたら、次の値を入力します。 メッセージが表示されたときに、package.json ファイルを上書きしないでください

    Name
    言語 TypeScript
    TypeScript プログラミング モデルを選択する モデル V4
    [テンプレート] HTTP トリガー
    名前 GetProducts
    package.json の上書き いいえ
  6. .gitignore または package.json ファイルの上書きを求めるメッセージが表示されたら、必ず [いいえ] を選択してください。

    api/srcfunctions フォルダーに、api/src /functions/GetProducts.ts に関数が含まれた新しい Azure Functions アプリが含まれるようになりました。 host.jsonlocal.settings.json など、必要な他のプロジェクト ファイルもいくつか追加されます。

  7. src/index.ts で、この import ステートメントを追加します。

    import { GetProducts } from "./functions/GetProducts";
    
  8. src/index.ts で、ルート定義のハンドラーを追加します。

    app.http('GetProducts', {
        methods: ['GET', 'POST'],
        authLevel: 'anonymous',
        handler: GetProducts
    });
    

Create、Update、Delete 関数を調べる

Create、Update、Delete の各関数は、既に作成されています。 これらは、GetProducts 関数の作成に使用したものと同じプロセスで作成され、データベース アクセス コードが既に含まれています。

  • api プロジェクトには、CreateProductDeleteProductUpdateProduct の各関数が既に含まれています。

Azure Functions プロジェクトを実行する

Azure Functions プロジェクトは、Visual Studio Code 内からローカルで実行およびデバッグすることができます。

  1. コマンド パレットを開きます。

  2. debug select」と入力します。

  3. [デバッグ: 選択してデバッグを開始] を選択します。

  4. [Attach to Node Functions](ノード関数にアタッチ) を選択します。

    Azure Functions プロジェクトが起動します。 ターミナルに関数アプリの URL が表示されます。

    関数の URL を表示している Visual Studio Code 統合ターミナルのスクリーンショット。

Visual Studio Code で "未定義のプロパティ 'endpoint' を読み取れません" というエラーが生成されます。 問題ありません。 これは、データベース接続文字列をまだ設定していないためです。 そのエラーの上に 4 つのエンドポイントが表示されていること、およびそのいずれかを選択すると同じエラーが表示されることに注意してください。