演習 - サンプル プロジェクトを設定して探索する

  • 5 分

このユニットでは、GitHub から既存のアプリケーションのコードを取得し、コードを準備し、開発環境を設定します。

コードを取得して準備する

  1. Bash ターミナルで、コード リポジトリを複製します。

    git clone https://github.com/MicrosoftDocs/mslearn-module-shifting-nodejs-express-apis-to-serverless learn-functions

  2. コード リポジトリ ディレクトリに変更します。

    cd learn-functions

  3. npm パッケージの依存関係をインストールします。

    npm install

  4. Node.js Express と Angular コードをビルドします。

    npm run full:build

アプリケーション構造を理解する

サンプル アプリケーションは、次のエンドポイントを提供する 4 つのメソッドを備えた従来の Node.js と Express API です。

メソッド ルート エンドポイント
GET vacations
POST vacations
PUT vacations:id
DELETE vacations/:id

Visual Studio Code でプロジェクトを開き、server フォルダーを開いて API の構造を調べます。

server
 | - data
 | | - vacations.json
 | - models
 | | - vacation.model.ts
 | - routes
 | | - index.ts            👈 1. Entry point
 | | - vacation.routes.ts  👈 2. The vacation routes
 | - services
 | | - index.ts
 | | - vacation.service.ts 👈 3. The logic and data 
 | - index.ts
 | - server.ts             👈 The Express server
 | - tsconfig.json
  1. エントリ ポイントは "server/index.ts" ファイルです。このファイルでは "server.ts" コードが実行され、Express サーバーが起動します。
  2. 次に、ルート (/vacations など) が /routes フォルダーから読み込まれます。
  3. このルートを使用すると、/services フォルダー内にある適切なコードが実行されます。 データ ストアの構成は、vacation.service.ts ファイル内で定義されます。

Angular クライアント アプリは /api/vacations ルートに HTTP GET 要求を行い、routes/vacation.routes.ts 内のルートは services/vacation.service.ts ファイル内のデータ ロジックを呼び出して vacations を取得します。

[プロキシ構成]

Angular アプリケーションは、Node.js Express API に対して要求を行うことができる必要があります。 Angular アプリケーションは、プロキシを使用して Express サーバーに要求を転送します。 プロキシを設定すると、ブラウザーで Express サーバーを見つけることができます。 proxy.conf.json を開き、ポートが Express アプリのポートである 7070 に設定されていることを確認します。

{
  "/api": {
    "target": "http://localhost:7070",
    "secure": false
  }
}