Debian8.7にMEAN開発環境を構築する

概要


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アプリを描画する。そんな流れ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です