Node.js
MongoDB
Express
angular
MEAN

MEANをAngularで構築してみる

More than 1 year has passed since last update.

MEANとは

LAMP(Linux、Apache、MySQL・MariaDB、Perl・PHP・Python)のようなソフトウェアバンドルの一種。

  • M:MongoDB(jsonを扱うことができるドキュメント指向DB)
  • E:Express(Node.js上で動作するバックエンドフレームワーク)
  • A:AngularJS(フロントエンドjsフレームワーク)
  • N:Node.js(サーバサイドjs環境)

各要素を見ると分かると思いますが、jsだけで開発可能というのが一番の特徴。ただし、Node.jsを使うので、あまり大規模なシステムには向いてないかと思います。

今回やる事

  • MEANを構築
  • AはAngularJSではなく、Angular(4.x.x)を使う
  • angular-cliを利用してAngularのプロジェクトを作成してから構築

MEANのN:Node.js

インストール

インストール方法は以下の記事で詳しく書かれています。
- nodistでNode.jsをバージョン管理

この時、nodistのバージョンは6.9.x、npmは3.x.x以上にしておいてください(Angularで必要となるバージョン)。

MEANのA:Angular

プロジェクト作成

まずはangular-cliを入れます。

npm install -g @angular/cli

インストールが完了したら、プロジェクトを作成します。

ng new mean-test

mean-testはプロジェクト名なので、任意のものに変更しても大丈夫です。
必要なパッケージも自動でnpmでインストールされるので、結構時間がかかります。

ここまで完了したら、作成したプロジェクトのディレクトリ(mean-test)の中に移動して、以下のコマンドでとりあえずAngularの起動確認をしてみます。
※以降はカレントディレクトリがmean-testになっていることを前提に進めます。

ng serve --open

--openオプションを付けると自動でブラウザでlocalhiost:4200が開きます。

こんな感じに表示されればOK。

image.png

MEANのE:Express

インストール

作成したプロジェクトのディレクトリ(mean-test)の中に移動して、Expressをインストールします。

npm install --save express

起動設定

インストール出来たら、server.jsを作成します。

server.js
// 使用するライブラリの読み込み
const express = require('express');
const path = require('path');
const http = require('http');

// api.js(サーバサイドの処理スクリプト)の読み込み
const api = require('./server/routes/api');

// expressの初期化
const app = express();

// 静的ファイルパスの設定
// ビルド後のAngularのパスを設定する
app.use(express.static(path.join(__dirname, 'dist')));

// /apiでアクセスしたときはapi.jsを表示
app.use('/api', api);

// 任意のURLでアクセスしたときはdist/index.html(Angularのindex.html)を表示
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

/**
 * ポート設定
 */
const port = process.env.PORT || '3000';
app.set('port', port);

/**
 * HTTPサーバの作成
 */
const server = http.createServer(app);

/**
 * ポート監視を開始する
 */
server.listen(port, () => console.log(`API running on localhost:${port}`));

あと、server/routes/api.jsも作ります。

server/routes/api.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  res.header('Content-Type', 'text/plain;charset=utf-8');
  res.send('これはサーバサイドスクリプトだよ');
});

module.exports = router;

ここまでできたら、以下のコマンドでnode.jsの上でserver.jsを動かします。

node server.js

localhost:3000でHTTPサーバが起動したよと表示されれば成功。
ブラウザからlocalhost:3000にアクセスしてみる。
基本的にどのようなパスにアクセスしても、dist/index.htmlが表示されるため、Angularの時に見た「app works!」という文字が表示されます。
しかし、localhost:3000/apiにアクセスすると次のように、api.jsが動きます。

image.png

MEANのM:MongoDB

インストール

まずはMongoDBをインストールします。
MongoDB Download Centerからインストーラをダウンロードします。
インストーラを起動して、進めていけばインストールできます。
完了したら、インストールフォルダ内のbinのパスを環境変数Pathに追加して、コマンドプロンプトから実行できるようにしておくと便利です。
インストールが完了したら、C:\data\dbのディレクトリを作成しましょう。
これはMongoDBのデータが格納されるパス(デフォルトなので、設定で変更は可能)になります。

起動とデータ作成

次のコマンドでMongoDBを起動します。

mongod

MongoDBが起動したら別のコマンドプロンプトを起動します。
MongoDBへの接続し、test_dbというDBへの切り替えを行います。

mongo
uset test_db

さらに、コレクション(RDBMSでいうテーブル)usersを作成し、そこにデータを登録します。
この先、mongooseというライブラリを使ってNode.jsからMongoDBを呼び出しますが、その時の命名規則がモデル名のlower caseにsを付けたものになります。
今回、モデル名をUserにしたいので、usersになります。
コレクション作成後に、「satoh ichiro」「suzuki jiro」をjsonとして登録します。

db.createCollection('users');
db.users.insert( { last_name:'satoh', first_name:'ichiro' } );
db.users.insert( { last_name:'suzuki', first_name:'jiro' } );

データが登録されているかどうかは次のコマンドで確認します。

db.users.find()

Node.jsとの接続

Node.jsのスクリプトからmongooseライブラリを使ってMongoDBと接続を行います。
まずは、mongooseをインストールします。

npm install mongoose

その後、server/routes/api.jsにmongooseでの接続処理を追加します。
今回は、api/userにアクセスしたときに表示されるようにしました。

server/routes/api.js
const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');

// スキーマを定義
var Schema   = mongoose.Schema;
var UserSchema = new Schema({
  first_name:  String,
  last_name: String
});
mongoose.model('User', UserSchema);

// MongoDBに接続
mongoose.connect('mongodb://localhost/test_db');

var User = mongoose.model('User');

router.get('/', (req, res) => {
  res.header('Content-Type', 'text/plain;charset=utf-8');
  res.send('これはサーバサイドスクリプトだよ');
});

router.get('/user',(req, res) => {

  // MongoDBからデータを取得
  User.find({}, function(err, docs) {
    res.json(docs);
  });
});

module.exports = router;

最終確認

Node.jsを一度停止し、再度server.jsを起動します。
その後、localhost:3000/api/userに接続すると、先ほど登録したjsonデータが表示されます。
(登録時に自動的に振られる_idも表示されます)

image.png

これで一通り、MEANスタックができました。
今回はjsonのReadのみでしたが、mongooseを使えばCRUDも実現できます。
扱うのがjavascriptやjsonだけなので、javascriptだけ知っていればサーバサイドの処理もかけるようになる・・・と言いたいところですが、Node.jsを少し触りましたが結構javascriptとは別物の感じなのでそううまくはいかないようです。

参考

MEAN App with Angular 2 and the Angular CLI ― Scotch
Easily Develop Node.js and MongoDB Apps with Mongoose
Mongooseを使ってmongodbにアクセスしてみる