次の方法で共有

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

  • [アーティクル]

適用対象: MongoDB

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

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

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

ビデオ チュートリアル

前提条件

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

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

ヒント

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

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

  1. Windows のコマンド プロンプトまたは Mac のターミナル ウィンドウを開いて Angular CLI をインストールします。

    npm install -g @angular/cli

  2. 次のコマンドをプロンプトに入力して TypeScript をインストールします。

    npm install -g typescript

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

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

    ng new angular-cosmosdb --minimal --style scss

  2. コマンドが完了したら、src/client フォルダーに移動します。

    cd angular-cosmosdb

  3. そのフォルダーを Visual Studio Code で開きます。

    code .

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

  1. Visual Studio Code の [エクスプローラー] ウィンドウで src フォルダーを右クリックし、 [新しいフォルダー] をクリックして、新しいフォルダーに server という名前を付けます。

  2. [エクスプローラー] ウィンドウで server フォルダーを右クリックし、 [新しいファイル] をクリックして、新しいファイルに index.js という名前を付けます。

  3. コマンド プロンプトに戻り、次のコマンドを使って body-parser をインストールします。 アプリはこれを使って、API 経由で渡された JSON データを解析することができます。

    npm i express body-parser --save

  4. 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}`));

  5. Visual Studio Code の [エクスプローラー] ウィンドウで server フォルダーを右クリックし、 [新しいファイル] をクリックします。 新しいファイルに routes.js という名前を付けます。

  6. 次のコードを 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;

  7. 変更を加えたファイルをすべて保存します。

  8. Visual Studio Code で、[デバッグ] ボタン をクリックし、歯車ボタン をクリックします。 Visual Studio Code で新しい launch.json ファイルが開きます。

  9. launch.json ファイルの 11 行目で "${workspaceFolder}\\server" を "program": "${workspaceRoot}/src/server/index.js" に変更して、ファイルを保存します。

  10. アプリを実行するには、 [デバッグの開始] ボタン をクリックします。

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

Postman でアプリをテストする

  1. 今度は Postman を開いて [GET] ボックスに「http://localhost:3000/api/heroes」と入力します。

  2. [Send](送信) ボタンをクリックして、アプリから json の応答を取得します。

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

    要求と応答を示す Postman の画面

次のステップ

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

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

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

Angular で UI を作成する

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