Azure Cosmos DB の MongoDB 用 API で Angular アプリを作成する - Node.js Express アプリを作成する

[アーティクル]
06/01/2023

適用対象: MongoDB

複数のパートから成るこのチュートリアルでは、Express と Angular を使用して Node.js に記入された新しいアプリを作成した後、Azure Cosmos DB の MongoDB 用 API を使用して構成された Azure Cosmos DB アカウントにそれを接続する方法を紹介します。

このチュートリアルのパート 2 では、イントロダクションの内容をベースとして、次のタスクについて取り上げます。

Angular CLI と TypeScript をインストールする
Angular を使って新しいプロジェクトを作成する
Express フレームワークを使ってアプリを作成する
Postman でアプリをテストする

ビデオチュートリアル

前提条件

このチュートリアルパートに取り組む前に、イントロダクションの動画をご覧ください。

さらに、次の要件を満たす必要があります。

Node.js バージョン 8.4.0 以降。
Postman
Visual Studio Code または任意のコードエディター。

ヒント

このチュートリアルでは、アプリケーションを作成する手順を段階的に説明しています。完成したプロジェクトをダウンロードしたい場合は、GitHub の angular-cosmosdb リポジトリから完全なアプリケーションを取得できます。

Angular CLI と TypeScript をインストールする

Windows のコマンドプロンプトまたは Mac のターミナルウィンドウを開いて Angular CLI をインストールします。
```
npm install -g @angular/cli
```
次のコマンドをプロンプトに入力して TypeScript をインストールします。
```
npm install -g typescript
```

Angular CLI を使って新しいプロジェクトを作成する

コマンドプロンプトで、新しいプロジェクトの作成先となるフォルダーに移動し、次のコマンドを実行します。このコマンドを実行すると、angular-cosmosdb という新しいフォルダーとプロジェクトが作成され、新しいアプリに必要な Angular コンポーネントがインストールされます。最小限の設定を行い (--minimal)、プロジェクトで Sass (フラグ形式の scss を使った CSS ライクな構文) を使うように指定します。
```
ng new angular-cosmosdb --minimal --style scss
```
コマンドが完了したら、src/client フォルダーに移動します。
```
cd angular-cosmosdb
```
そのフォルダーを Visual Studio Code で開きます。
```
code .
```

Express フレームワークを使ってアプリを作成する

Visual Studio Code の [エクスプローラー] ウィンドウで src フォルダーを右クリックし、 [新しいフォルダー] をクリックして、新しいフォルダーに server という名前を付けます。
[エクスプローラー] ウィンドウで server フォルダーを右クリックし、 [新しいファイル] をクリックして、新しいファイルに index.js という名前を付けます。
コマンドプロンプトに戻り、次のコマンドを使って body-parser をインストールします。アプリはこれを使って、API 経由で渡された JSON データを解析することができます。
```
npm i express body-parser --save
```
Visual Studio Code で、次のコードを index.js ファイルにコピーします。このコードによって以下が行われます。
- Express を参照する
- 要求の本体に格納された JSON データを読み取るための body-parser を読み込む
- 組み込みの機能 (path) を使用する
- コードの場所を特定しやすいようにルート変数を設定する
- ポートを設定する
- Express を作成する
- サーバーの機能に使用されたミドルウェアの使い方をアプリに伝える
- dist フォルダーに置かれるすべてのもの (静的コンテンツ) を提供する
- アプリケーションを表示する。サーバーに存在しない GET 要求には index.html を返す (ディープリンク)
- app.listen でサーバーを起動する
- アロー関数を使って、ポートが稼働状態であることをログに出力する
```
const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const routes = require('./routes');

const root = './';
const port = process.env.PORT || '3000';
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static(path.join(root, 'dist/angular-cosmosdb')));
app.use('/api', routes);
app.get('*', (req, res) => {
  res.sendFile('dist/angular-cosmosdb/index.html', {root});
});

app.listen(port, () => console.log(`API running on localhost:${port}`));
```
Visual Studio Code の [エクスプローラー] ウィンドウで server フォルダーを右クリックし、 [新しいファイル] をクリックします。新しいファイルに routes.js という名前を付けます。
次のコードを routes.js にコピーします。このコードによって以下が行われます。
- Express ルーターを参照する
- ヒーローを取得する
- 定義されているヒーローの JSON を返す
```
const express = require('express');
const router = express.Router();

router.get('/heroes', (req, res) => {
 res.send(200, [
    {"id": 10, "name": "Starlord", "saying": "oh yeah"}
 ])
});

module.exports=router;
```
変更を加えたファイルをすべて保存します。
Visual Studio Code で、[デバッグ] ボタンをクリックし、歯車ボタンをクリックします。 Visual Studio Code で新しい launch.json ファイルが開きます。
launch.json ファイルの 11 行目で "${workspaceFolder}\\server" を "program": "${workspaceRoot}/src/server/index.js" に変更して、ファイルを保存します。
アプリを実行するには、 [デバッグの開始] ボタンをクリックします。

エラーが発生することなくアプリが実行されれば成功です。

Postman でアプリをテストする

今度は Postman を開いて [GET] ボックスに「http://localhost:3000/api/heroes」と入力します。
[Send](送信) ボタンをクリックして、アプリから json の応答を取得します。

この応答から、アプリが稼働していること、またローカルで実行されていることが確認できます。

次のステップ

本チュートリアルのこのパートでは、次の手順を行いました。

Angular CLI を使って Node.js プロジェクトを作成しました。
Postman を使ってアプリをテストしました。

引き続き UI を作成します。次のチュートリアルパートに進んでください。

Angular で UI を作成する

Azure Cosmos DB への移行のための容量計画を実行しようとしていますか? 容量計画のために、既存のデータベースクラスターに関する情報を使用できます。

既存のデータベースクラスター内の仮想コアとサーバーの数のみがわかっている場合は、仮想コア数または仮想 CPU 数を使用した要求ユニットの見積もりに関するページを参照してください
現在のデータベースワークロードに対する通常の要求レートがわかっている場合は、Azure Cosmos DB Capacity Planner を使用した要求ユニットの見積もりに関するページを参照してください