概要
MEANは近代的でフルスタックな開発フレームワーク。以下の構成要素の頭文字をつなげたもの
M | MongoDB | NoSQLなデータベース |
E | Express | Node上で動くWebアプリケーションフレームワーク |
A | AnglarJS | フロントエンドのMVCフレームワーク |
N | NodeJS | サーバサイドのJavaSciprt実行環境(Webサーバの役割) |
今回は、vagrantを用いて以下のように仮想環境を立ち上げて、そこにMEAN環境を構築した
$ vagrant box add debian https://github.com/holms/vagrant-jessie-box/releases/download/Jessie-v0.1/Debian-jessie-amd64-netboot.box
導入したOSは以下のとおり、Debian 8.7である
$ cat /etc/debian_version 8.7 $ uname -a Linux Debian-jessie-amd64-netboot 3.16.0-4-amd64 #1 SMP Debian 3.16.39-1 (2016-12-30) x86_64 GNU/Linux
MongoDB
MongoDBはNoSQL(表形式じゃないDBMS)のデファクトスタンダード。
MongoDBのインストール
$ sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10 $ echo "deb http://repo.mongodb.org/apt/ubuntu "$(lsb_release -sc)"/mongodb-org/3.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.0.list $ sudo apt-get update $ sudo apt-get install mongodb-org
適当にデータを入れておく
ここでは、mydbというデータベースを作成し、さらにUsersというコレクション(テーブルのようなもの)を作成し、そこに適当なオブジェクトを挿入する。
$ mongo (省略) > use mydb; > db.users.insert({name: 'sasaki' , age: 24}); WriteResult({ "nInserted" : 1 }) > db.users.find({}); { "_id" : ObjectId("5881d7ed4393e91ab4ebd18d"), "name" : "sasaki", "age" : 24 }
バイナリをダウンロード
何故か上記のやり方でバイナリが落ちなかったので別途入れる
$ curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.2.9.tgz $ tar -zxvf mongodb-linux-x86_64-3.2.9.tgz $ mv mongodb-linux-x86_64-3.2.9/bin/* /usr/local/bin
確認
$ mongo --version MongoDB shell version: 3.2.9
NodeJS
NodeJSはサーバサイドでのJavaScriptの実行環境。ノンブロッキングIOを用いて大量アクセスを華麗に裁く
nodejsのインストール
aptを用いてインストールできるnodeは非常に古い。
とりあえず古いバージョンをインストールし、バージョンアップする手段を用いる。
$ sudo apt install nodejs $ nodejs -v v0.10.25
npmのインストール
npmはnodeで動くパッケージの管理ツール。必須。
$ sudo apt install npm $ npm -v 4.1.2
nのインストール
nはnode本体のバージョンを管理するツール。npmを用いてインストールする
$ sudo npm -g install n $ n --version 2.1.3
nodeを最新版に引き上げる
$ sudo n stable $ node -v v7.4.0
Express
expressはnode上で動作するWebアプリケーションフレームワーク。これもnpmを用いてインストールする
expressのインストール
$ npm install express -g $ express --version 4.14.0
AngularJS
AngularJSはフロントエンドのMVCフレームワーク。こちらはCDNを用いるので、別途インストールの作業はない。
Hello,World
必要なnodeモジュールを追加でインストールする
ejsはテンプレートエンジン。mongodbはnodeからmongodbにアクセスするモジュール。
$ npm install ejs $ npm install mongodb
nodeでmongodbに接続するためのスクリプトを作成
ここでは27017番ポートでmongodbが立ち上がっているものとし、データベース名がmydbであるとする。
var db; var MongoClient = require('mongodb').MongoClient; var assert = require('assert'); var url = 'mongodb://0.0.0.0:27017/mydb'; MongoClient.connect(url, function(err, mongodb) { assert.equal(null, err); console.log("Connected correctly to server"); db = mongodb; }); var collection = function(name) { return db.collection(name); } module.exports = collection;
メインスクリプトを作成
作業ディレクトリにapp.jsを作成する。この例では、8086番ポートでサーバを立ち上げている。
// express準備 var express = require('express'); var ObjectID = require('mongodb').ObjectID; var collection = require('./mongo'); var COL = 'users'; var app = express(); // テンプレートディレクトリのパスを指定 app.set('views', __dirname + '/views'); // テンプレートエンジンをejsに指定 app.set('view engine', 'ejs'); // ルーティング設定 app.get('/', function (req, res) { collection(COL).find({}).toArray(function(err , docs) { res.render('index' , {name: docs[0].name}); }); //res.render('index'); }); // サーバー起動 var server = app.listen(8086, function () { var host = server.address().address; var port = server.address().port; console.log('Example app listening at http://%s:%s', host, port); });
トップページを作成
views/index.ejsを作成する。この例では、AngularJS1.6.1をCDNから引っ張ってきている。
ややこしいが、<%= hoge %>が、ejsによるサーバサイドでの値出力。{{hoge}}が、AngularJSによるクライアントサイドでの値出力となる。
<!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}! My name is <%= name %>!</h1> </div> </body> </html>
サーバを起動
$ node app.js Example app listening at http://:::8086
ブラウザから8086番ポートにアクセスし、以下の画面が表示されれば成功
クライアントからの要求は、NodeJSがリクエストを初めに受け取る。NodeJS上で動作するexpressは、URLを元にルーティングし、MongoDBからデータを取得してejsテンプレートに引き渡している。ejsがテンプレートに値を埋め込むと、それをHTMLとしてクライアントに返却。クライアントはHTMLに含まれているAngularJSをダウンロードし、Angularアプリを描画する。そんな流れ。