MEANスタック

Angular4だけでもかなりなことはできますが、色々なことをやろうとすると、データベースやサーバサイドの処理等が出てくるのは見えているので、Angular4だけではなく、それらを詰め込んだ MEANスタックの環境を構築してみようと思います。

MEAN スタックの環境作成については、
http://mean.io/
に従っていこう。。。かと思ったのですが、blog の所をよく見ると mean.io の内容は最近はアップデートされていないようです。

比較的新しくて、 Angular4 での MEAN STACK の解説をしているところを探して、
https://coursetro.com/posts/code/84/Setting-up-an-Angular-4-MEAN-Stack-(Tutorial)
にたどり着きました。（もっとよさげなところがあったら教えてください）

とりあえず、従っていきます。

まずは、vagrant で新しい環境を構築します。

D:\vagrant>md mean

D:\vagrant>cd mean

D:\vagrant\mean>copy ..\centos\Vagrantfile .

D:\vagrant\mean>vagrant up

簡単に新しい環境が作れるのは良いですね。

で、ログイン後

$ sudo yum -y update

を実施して、あとは node と angular をインストール

nodeは、

curl --silent --location https://rpm.nodesource.com/setup_6.x | sudo bash -

して

sudo yum -y install nodejs

して、

sudo yum install gcc-c++ make

します。

終わったら、

＄sudo npm install -g @angular/cli

で、あとはサイトに書いてあるとおり、

$ ng new mean

$ cd mean

$ ng build

とします。

で、Express.js のインストールに移ります。

公式を見た方がよいかもしれないけれど、とりあえずここではホームページに書かれている内容に従います。

npm install express body-parser --save

次に、再びサイトの内容にしたがって、server.js というファイルを作成します。

const express = require('express');
const bodyParser = require('body-parser');
const path = require('path');
const http = require('http');
const app = express();

// API file for interacting with MongoDB
const api = require('./server/routes/api');

// Parsers
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false}));

// Angular DIST output folder
app.use(express.static(path.join(__dirname, 'dist')));

// API location
app.use('/api', api);

// Send all other requests to the Angular app
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist/index.html'));
});

//Set Port
const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);

server.listen(port, () => console.log(`Running on localhost:${port}`));

そして MongoDB, サイトの内容は Windows向けのようなので、

https://docs.mongodb.com/manual/tutorial/install-mongodb-on-red-hat/

に従ってインストールします。

$ sudo vi /etc/yum.repos.d/mongodb-org-3.4.repo

で、次のファイルを作成

[mongodb-org-3.4]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.4/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.4.asc

で、次のコマンドを実行

sudo yum install -y mongodb-org

mongodbを起動します。

sudo service mongod start

であとは mongodb の自動起動も on にしておきます。

sudo chkconfig mongod on

一応、公式の手順どおり、ログの最後も見ておきましょう。

sudo tail /var/log/mongodb/mongod.log

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten]

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/defrag is 'always'.

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** We suggest setting it to 'never'

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten]

2017-10-22T07:59:08.910+0000 I FTDC [initandlisten] Initializing full-time diagnostic data capture with directory '/var/lib/mongo/diagnostic.data'

2017-10-22T07:59:08.928+0000 I INDEX [initandlisten] build index on: admin.system.version properties: { v: 2, key: { version: 1 }, name: "incompatible_with_version_32", ns: "admin.system.version" }

2017-10-22T07:59:08.928+0000 I INDEX [initandlisten] building index using bulk method; build may temporarily use up to 500 megabytes of RAM

2017-10-22T07:59:08.930+0000 I INDEX [initandlisten] build index done. scanned 0 total records. 0 secs

2017-10-22T07:59:08.931+0000 I COMMAND [initandlisten] setting featureCompatibilityVersion to 3.4

2017-10-22T07:59:08.933+0000 I NETWORK [thread1] waiting for connections on port 27017

問題なく動いてるようですね。

$ mongo と実行します。

あれあれ、ワーニングが一杯。。。

mongo

MongoDB shell version v3.4.9

connecting to: mongodb://127.0.0.1:27017

MongoDB server version: 3.4.9

Welcome to the MongoDB shell.

For interactive help, type "help".

For more comprehensive documentation, see

http://docs.mongodb.org/

Questions? Try the support group

http://groups.google.com/group/mongodb-user

Server has startup warnings:

2017-10-22T07:59:08.898+0000 I CONTROL [initandlisten]

2017-10-22T07:59:08.898+0000 I CONTROL [initandlisten] ** WARNING: Access control is not enabled for the database.

2017-10-22T07:59:08.898+0000 I CONTROL [initandlisten] ** Read and write access to data and configuration is unrestricted.

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten]

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/enabled is 'always'.

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** We suggest setting it to 'never'

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten]

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** WARNING: /sys/kernel/mm/transparent_hugepage/defrag is 'always'.

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten] ** We suggest setting it to 'never'

2017-10-22T07:59:08.899+0000 I CONTROL [initandlisten]

気持ち悪いので調べます。すぐに同じ状況にあっている人のページが見つかりました。

https://qiita.com/hmitr/items/dcf70e3106d513b9967b

公式ドキュメントにも書かれているようです。

https://docs.mongodb.com/manual/tutorial/transparent-huge-pages/

(でもやっぱりこういうことが起きるから Ubuntuの方がよいのかもしれませんが）

が、公式ドキュメント通りやってもワーニングは消えないという情報も見つけました。

ともかくやってみましょう。

公式ドキュメントの通りに、

/etc/init.d/disable-transparent-hugepages

というファイルを作成します。中身は公式に書かれているとおり、次の内容をコピペします。

#!/bin/bash
### BEGIN INIT INFO
# Provides:          disable-transparent-hugepages
# Required-Start:    $local_fs
# Required-Stop:
# X-Start-Before:    mongod mongodb-mms-automation-agent
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Disable Linux transparent huge pages
# Description:       Disable Linux transparent huge pages, to improve
#                    database performance.
### END INIT INFO

case $1 in
  start)
    if [ -d /sys/kernel/mm/transparent_hugepage ]; then
      thp_path=/sys/kernel/mm/transparent_hugepage
    elif [ -d /sys/kernel/mm/redhat_transparent_hugepage ]; then
      thp_path=/sys/kernel/mm/redhat_transparent_hugepage
    else
      return 0
    fi

    echo 'never' > ${thp_path}/enabled
    echo 'never' > ${thp_path}/defrag

    re='^[0-1]+$'
    if [[ $(cat ${thp_path}/khugepaged/defrag) =~ $re ]]
    then
      # RHEL 7
      echo 0  > ${thp_path}/khugepaged/defrag
    else
      # RHEL 6
      echo 'no' > ${thp_path}/khugepaged/defrag
    fi

    unset re
    unset thp_path
    ;;
esac

あとは、

sudo chmod 755 /etc/init.d/disable-transparent-hugepages

をやってから

sudo chkconfig --add disable-transparent-hugepages

をして、再起動します。


再起動したら　再び mongo を起動してみます。

mongo
MongoDB shell version v3.4.9
connecting to: mongodb://127.0.0.1:27017
MongoDB server version: 3.4.9
Server has startup warnings:
2017-10-22T08:47:42.980+0000 I CONTROL  [initandlisten]
2017-10-22T08:47:42.980+0000 I CONTROL  [initandlisten] ** WARNING: Access control is not enabled for the database.
2017-10-22T08:47:42.980+0000 I CONTROL  [initandlisten] **          Read and write access to data and configuration is unrestricted.
2017-10-22T08:47:42.980+0000 I CONTROL  [initandlisten]
> exit
bye

エラーは減りましたが、まだ残ってますね。
こちらに関しては、
https://docs.mongodb.com/v3.0/tutorial/enable-internal-authentication/

に記事があります
まず、keyfile を作成。その前にディレクトリを作成

sudo mkdir -p /srv/mongodb
sudo chmod 777 /srv/mongodb
openssl rand -base64 741 > /srv/mongodb/mongodb-keyfile
chmod 600 /srv/mongodb/mongodb-keyfile

$ sudo vi /etc/mongod.conf
security:
  keyFile: /srv/mongodb/mongodb-keyfile


あとは、/srv/mongodb/ongodb-keyfileの owner を mongod ユーザにしておきます。

sudo chown mongod:mongod /srv/mongodb/mongodb-keyfile

で、再起動
$ sudo systemctl restart mongod
ログ確認
sudo tail /var/log/mongodb/mongod.log

2017-10-22T09:18:55.767+0000 I FTDC     [initandlisten] Initializing full-time diagnostic data capture with directory '/var/lib/mongo/diagnostic.data'

2017-10-22T09:18:55.768+0000 I NETWORK [thread1] waiting for connections on port 27017






起動したことを確認し、




$ mongo と実行





$ mongo

MongoDB shell version v3.4.9

connecting to: mongodb://127.0.0.1:27017

MongoDB server version: 3.4.9

>





無事、エラーも消えました。 チュートリアルに戻ります。




mongodb のシェルから、

> use mean

> db.users.insert({"name":"John Doe"})




とまあチュートリアル通りにたたいてみます。

あれ、エラー。。。。ああ。セキュリティ先にオンにしたからかな。。




とりあえず、/etc/mongod.conf の security項目を外して、再起動してから








> use mean

switched to db mean

> db.users.insert({"name":"John Doe"})

WriteResult({ "nInserted" : 1 })

> db.stats();

{

        "db" : "mean",

        "collections" : 1,

        "views" : 0,

        "objects" : 1,

        "avgObjSize" : 41,

        "dataSize" : 41,

        "storageSize" : 4096,

        "numExtents" : 0,

        "indexes" : 1,

        "indexSize" : 4096,

        "ok" : 1

}





チュートリアルのどこかでセキュリティ設定でてくるかな。。と思いつつ続けていきます。




mean ディレクトリの下に、server, その下にroutesディレクトリを作れと

/mean (project folder)
   /server
      /routes


そして、



$ npm install mongodb --save
を実行。その後、routes ディレクトリのしたに、api.js というファイルを作成。



const express = require('express');
const router = express.Router();
const MongoClient = require('mongodb').MongoClient;
const ObjectID = require('mongodb').ObjectID;

// Connect
const connection = (closure) => {
    return MongoClient.connect('mongodb://localhost:27017/mean', (err, db) => {
        if (err) return console.log(err);

        closure(db);
    });
};

// Error handling
const sendError = (err, res) => {
    response.status = 501;
    response.message = typeof err == 'object' ? err.message : err;
    res.status(501).json(response);
};

// Response handling
let response = {
    status: 200,
    data: [],
    message: null
};

// Get users
router.get('/users', (req, res) => {
    connection((db) => {
        db.collection('users')
            .find()
            .toArray()
            .then((users) => {
                response.data = users;
                res.json(response);
            })
            .catch((err) => {
                sendError(err, res);
            });
    });
});

module.exports = router;
そして、mean ディレクトリに戻って、次のコマンドを実行。




$ node server


Running on localhost:3000




と出て、サーバが動きます。




http://localhost:3000/api 

にアクセスすると jsonが表示されると書いてありますが、実際は

http://localhost:3000/api/users ですね。

ちょっと悩みました。

























































私自身のExpressの勉強が足らないので、どこに express が関係してるんだろう？と思わなくもないですが、まあ server.js の中にも api.js の中にも 

const express = require('express');　

とは書いてあるので何か関係してるんでしょう。もしくはこれから関係するんでしょう。きっと。まあ徐々にわかるようになっていきましょう。。




で、次。ですが、いったんここまでにします。次は、





Fetching Data from Angular


ということで、Angular から MongoDBのデータを取る部分ですね。

これができれば色々サーバとフロントの連携ができますね。

このブログを検索

とあるエンジニアの独り言

Data visualization in Python (Coursera course)

MEANスタック

Fetching Data from Angular

コメント

コメントを投稿

このブログの人気の投稿

Python_programming (Coursera)

7/22 再開再開。。

Data visualization in Python (Coursera course)