Help us understand the problem. What is going on with this article?

MEANをAngularで構築してみる

More than 3 years have 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にアクセスしてみる

frost_star
まだまだ半人前プログラマー。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした