Современные технологии веб-приложений Node с удаленной БД на mLab MongoDB


Node.JS (Express), Heroku и mLab MongoDB or MongoDB Atlas

Современные технологии веб-приложений (концепция MVC) с GUI на основе Node (Express) - MongoDB (Mongoose) с удаленной БД на mLab MongoDB

Автор: Владимир Ткаченко

Источник: Обучение в интернет

Продолжение статьи Технологии создания веб-приложений на основе Node (Express) и MongoDB (Mongoose) с применением концепции MVC. Продолжим рассмотрение методов взаимодействия приложений, созданных на основе Node, Express и MongoDB (Mongoose) с удаленной БД. В качестве удаленной СУБД MongoDB применим mLab MongoDB или MongoDB Atlas. Дело в том, что в настоящее время осуществилась миграция mLab в MongoDB Atlas и mLab теперь закрыта для новых регистраций, но mLab предоставляет услуги тем, кто имеет учетная запись mLab.

В рамках слияния двух организаций сервис mLab в будущем будет закрыт и все пользователи mLab будут перенесены в MongoDB Atlas к концу 2019 года. Выбор удаленной базы данных mLab MongoDB от Heroku, управляемой через Internet обусловлен тем, что mLab предоставляет бесплатные 0.5 GB места для хранения данных для каждого аккаунта, а на бесплатный хостинг Heroku можно бесплатно разместить небольшие проекты на Node.JS. Следует отметить, что MongoDB Atlas также предоставляет бесплатные 0.5 Гб места для хранения данных.

Я имею учетная запись mLab. При выборе удаленной БД mLab необходимо было выбрать тип плана, например, для тестирования приложений целесообразно выбрать Sandbox, FREE, размер 0,5 GB. Кроме того, необходимо выбрать регион расположения облачной СУБД MongoDB, например, Europe и назначить имя базы данных, например, websmsdb.

Реквизиты БД mLab MongoDB
Рис. 1. Скриншот, на котором отображаются некоторые параметры СУБД MongoDB.

После регистрации была представлена СУБД MongoDB (websmsdb) на mLab MongoDB и адрес mongodb://dbuser:dbpassword@ds247310.mlab.com:47310/websmsdb для подключения приложения.

Адрес базы данных websmsdb на mLab MongoDB для подключения приложения
Рис. 2. Скриншот, на котором отображается адрес СУБД MongoDB (websmsdb) на mLab MongoDB для подключения приложения.

В качестве веб-приложения рассмотрим Web коммуникационную систему рассылки СМС-сообщений через Интернет на платформе Node.js - MongoDB. Веб-приложение будем строить на основе конструкционного шаблона проектирования или паттерна MVC (Model-View-Controller) на Node.js.

Создание директории для веб-приложения с СУБД MongoDB (websmsdb) и коллекцией "employees"

Создадим для веб-приложения новый каталог, который назовем smsmvcmlab. Создаем скелет веб-приложения при выполнении в командной строке "npm i -g express" и дальнейшего выполнения команды, например, "express –e" с опцией –e. Затем выполним "npm install", после чего необходимые для каркаса модули будут установлены и добавлены в директорию node_modules. Далее после редактирования каркаса веб-приложения и установки библиотеки mongoose файл "package.json" имеет вид:


{
  "name": "smsmvcmlab",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.0",
    "ejs": "~2.5.5",
    "express": "~4.14.1",
    "mongoose": "^5.4.9",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.2"
  }
}		        

Cтруктура веб-приложения на основе Node (Express) и MongoDB (Mongoose) с применением концепции MVC (подкаталоги и входящие в нее файлы) после редактирования с учетом поставленной задачи имеет следующий вид:

Структура веб-приложения на основе Node (Express) и MongoDB (Mongoose) в директории smsmvcmlab
Рис. 3. Скриншот структуры веб-приложения в директории smsmvcmlab.

Cоздание серверной части веб-приложения app.js на основе паттерна MVC

Разработка файла серверного приложения app.js, которое является главной точкой входа, выполнена с учетом концепции MVC. В файле app.js сначала подключаем библиотеки mongoose, express, body-parser и определяем jsonParser, импортируем объект router (employeeroute). Далее создаем объект приложения express с именем app и подключаем промежуточное ПО или middleware.

Затем подключаем Web application к удаленной базе данных websmsdb, помещенной на mLab MongoDB, где dbuser - логин, а dbpasswor - пароль для подключения к БД. Подключаем библиотеку express.static для обработки статических файлов из папки /public. Для импортированного файла (кода) employees.js задаем путь к директории '/employees'. Все, серверное приложение app.js готово к работе.


//app.js - smsmvcmlab
'use strict';
const express = require('express');
const mongoose = require("mongoose");
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
// Импорт маршрутов 
const employees = require ('./routes/employees');
const index = require('./routes/index');
const users = require('./routes/users');
mongoose.Promise = global.Promise;
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.set('port', (process.env.PORT || 5000));

// Подключаемся к удаленной базе данных websmsdb, помещенной на mLab MongoDB
mongoose.connect("mongodb://dbuser:dbpassword@ds247310.mlab.com:47310/websmsdb", { useNewUrlParser: true }, function(err){
	 if(err) {
      console.log("Error:", err);
    }
	else {
    app.listen(app.get('port'), function() {
    console.log('Server listens on port', app.get('port'));	
	})
	}
});

app.use('/', index);
app.use('/users', users);
// Для импортированного файла (кода) employees.js задаем путь к директории '/employees' 
app.use('/employees', employees);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Router - employeerouter.js

В файле employeerouter.js сначала подключаем фреймворк Express для приложений Node.js. Затем Express используется для получения объекта router (const router = express.Router()). Далее подключаем модуль body-parser для обработки запросов HTTP POST и определяем jsonParser. Следующий шаг - импортируем объект employeecontroller. Далее для экземпляров объекта router задаем пути маршрутизации.

Затем объект router экспортируется, в результате чего он может использоваться файлом app.js (объект router импортируется в файл app.js). Следует отметить, что в рассматриваемом веб-приложении все маршруты, ориентированные на CRUD-операции (post, get, delete и put), помещены в единый файл employeerouter.js.


// smsmvcmlab, файл employees.js из каталога путей routes
const express = require('express');
const router = express.Router();
// Подключаем модуль body-parser.
const bodyParser = require("body-parser");
const jsonParser = bodyParser.json();
// Импорт контроллеров
const employeecontroller = require('../controllers/employeecontroller');

// Маршрут добавления документа в MongoDB 
router.post ('/', employeecontroller.employeesave);
// Маршрут чтения документов
router.get('/', employeecontroller.employeeread);
// Маршрут чтения документа по id
router.get('/:id', employeecontroller.employeereadid);
// Маршрут удаления документов 
router.delete('/:id', employeecontroller.employeedelete);
 // Маршрут обновления документов   
router.put('/', jsonParser, employeecontroller.employeeput);

module.exports = router; 

Controller - employeecontroller.js

Контроллеры определяют логику работы веб-приложения. Контроллеры получают данные от роутеров из файла employeerouter.js, вызывают модель из файла employeemodel.js и обрабатывают входящие запросы и исходящие ответы. Исходящие ответы (данные) контроллеры передают приложению client.js. Следует отметить, что все контроллеры помещены в единый файл employeecontroller.js.

В файле employeecontroller.js сначала импортируем объект Employee. Затем создаем контроллеры управления запросами и объекты файла employeecontroller.js экспортируем, в результате чего они могут использоваться файлом employeerouter.js. Объекты контроллеров (employeecreate, employeeread, employeereadid, employeedelete, employeeput) импортируются в файл employeerouter.js.


// smsmvcmlab, файл employeecontroller.js из каталога controllers
// Импорт модели
const Employee = require('../models/employeemodel');

// Вывода шаблона представления и чтение всех документов коллекции Employees
exports.employeeread = function (req, res) {
    Employee.find({}, function(err, employees){
        if(err) return console.log(err);
		res.render('../views/employees/index', {employees: Employee});
     });
};

// Добавление документа в MongoDB
exports.employeesave = function (req, res) {
    if(!req.body) return res.sendStatus(400);
    const employeeName = req.body.name;
    const employeePhone_number = req.body.phone_number;
    const employee = new Employee({name: employeeName, phone_number: employeePhone_number});
    // Чтобы сохранить сотрудника в базу, необходимо вызвать метод save
	employee.save(function(err){
        if(err) return console.log(err);
		res.send(employee)
    });
};

 // Чтение документа по id
exports.employeereadid =  function(req, res){
    const id = req.params.id;
    Employee.findById(req.params.id, function(err, employee){
        if(err) return console.log(err);
        res.send(employee)
    });
};
 // Удаление документа 
exports.employeedelete = function(req, res){
    const id = req.params.id;
    Employee.findByIdAndDelete(id, function(err, employee){
        if(err) return console.log(err);
        res.send(employee)
    });
};
 // Обновление документа   
exports.employeeput = function(req, res){
    if(!req.body) return res.sendStatus(400);
    const id = req.body.id;
    const employeeName = req.body.name;
    const employeePhone_number = req.body.phone_number;
    const newEmployee = {name: employeeName, phone_number: employeePhone_number};
    Employee.findOneAndUpdate({_id: id}, newEmployee, {new: true}, function(err, employee){
        if(err) return console.log(err); 
        res.send(employee)
    });
};					

Model - employeemodel.js

Модель - это средство для манипуляции с данными документов на основе схемы, которые представляют концепцию управления приложением. Схема - это свойство mongoose.Schema, а модель - это метод mongoose.model(), который принимает два параметра, один из которых схема. Файл employeemodel.js создает модель, с помощью которой на основе employeeSchema осуществляются CRUD-операции взаимодействия веб-приложения на основе Node.js с MongoDB.

В файле employeemodel.js сначала подключаем библиотеку mongoose. Затем определяем схему модели с двумя свойствами: name и phone_number. Далее создаем модель Employee и выполняем экспорт модели, в результате чего модель может использоваться файлом employeecontroller.js (объект Employee импортируется в файл employeecontroller.js)


//  smsmvcmlab, файл employeemodel.js из каталога models
const mongoose = require('mongoose');
mongoose.Promise = global.Promise
const Schema = mongoose.Schema;
// Определяем схему с двумя свойствами: name и phone_number 
const employeeSchema = new Schema({name: String, phone_number: Number}, {versionKey: false});
// Создаем модель, с помощью которой на основе employeeSchema создаем документы 
// Export the model
module.exports = mongoose.model('Employee', employeeSchema);			
				

Представление - index.ejs

Представление отвечает за отображение данных в Web браузере пользователя. Файл index.ejs помещен в директорию views/employees. Клиентская часть веб-приложения или скрипт client.js для файла index.ejs помещен в подкаталог javascripts, который помещен в директорию public. В рассматриваемом веб-приложении применяем коды графического интерфейса пользователя index.html и клиентской части приложения client.js, которые использовались в проекте: Технологии создания веб-приложений на основе Node, Express и MongoDB.

Запуск веб-приложения на локальном сервере

Запустим серверное приложение app.js на выполнение в командной строке, для этого перейдем в каталог smsmvcmlab, в котором он помещен:
C:\smsmvcmlab>node app.js

Введем в адресную строку браузера локальный адрес веб-приложения http://localhost:5000/employees, в результате чего в окне браузера будет отображаться веб-страница index.html с пустой таблицей данных о сотрудниках и средствами управления базой данных websmsdb на mLab MongoDB.

Используя средства управления графического интерфейса пользователя, можно выполнять основные операции CRUD, которые изложены в Node.JS, Express и MongoDB.

Развертывание приложения на Heroku

Для подготовки приложения к помещению его на хостинг Heroku (облачную PaaS-платформу) необходимо добавить следующие файлы .gitignore, Procfile, README.md и создать локальный репозиторий в директории smsmvcmlab. Создадим файл .gitignore с содержимым /node_modules, затем создадим файл Procfile в командной строке $ touch Procfile. Отредактируем файл Procfile, введем в него следующую строку: web: node app.js. Этот файл необходим для запуска главного исполняемого файла нашего приложения на Heroku.

Далее создадим проект Git с помощью команды git init (создание хранилища в Git) $ git init и проверим его статус $ git status. Затем добавляем содержимое рабочей директории в индекс для последующего коммита $ git add * и проверяем статус. Это необходимо выполнить для того, чтобы добавить файлы в каталог под версионный контроль.

Далее фиксируем начальное состояние проекта. Для этого используем команду "git commit с флагом –m" и "Version1". Таким образом, мы подготовили Web приложение smsmvcmlab с удаленной БД (websmsdb) на mLab MongoDB для помещения его на облачную PaaS-платформу Heroku.

Обновленное содержимое директории smsmvcmlab
Рис. 4. Скриншот, в котором отображается обновленное содержимое директории smsmvcmlab .

Развертывание веб-приложения (smsmvcmlab) в облако Heroku можно выполнить двумя способами:

  • с GitHub (GitHub/Connected)
  • c ПК (Heroku Git/Use Heroku CLI)

Для помещения веб-приложения на облачную платформу Heroku применим способ Heroku Git/Use Heroku CLI, т.е. применим способ развертывания приложения с ПК с помощью CLI (Command Line Interface) интерфейса командной строки.

Для этого регистрируемся на сайте https://dashboard.heroku.com. Открываем страничку для создания приложений dashboard.heroku.com/apps. Щелкаем на кнопке "New" и из раскрывающегося списка “New” выбираем команду “Create new app”, откроется окно, в котором выбираем регион ЦОДа облачной платформы и вводим название веб-приложения, например, smsmvcmlab и нажимаем Create app.

Строка ввода названия приложения и региона платформы Heroku
Рис. 5. Скриншот, в котором отображается строка ввода для названия приложения и региона.

Откроется окно, в котором выбираем способ Heoku Git/Use Heroku CLI развертывания Node-приложения на облачную PaaS-платформу.

В окне Heroku отображаются способы развертывания приложений
Рис. 6. Скриншот, в котором отображаются способы развертывания приложений на Heroku.

Далее выполняем методику развертывания приложения, изложенную на Heroku, с помощью Heroku Git/Use Heroku CLI.

Методика развертывания приложения на Heroku
Рис. 7. Скриншот, в котором отображается методика развертывания приложения на Heroku.

Для выполнения алгоритма развертывания приложения на Heroku, созданного на основе Node, Express и MongoDB (Mongoose) открываем на ПК консоль Git Bash. Git Bash это командная строка или консоль системы контроля версий Git. Система контроля версий Git предназначена для ведения разработок веб-приложений. Необходимо отметить, что Heroku поддерживает только эту систему контроля версий.

Командная строка или консоль системы контроля версий Git
Рис. 8. Скриншот, в котором отображается командная строка или консоль системы контроля версий Git.

После выполнения инструкции о развертывании приложения его можно запустить, щелкнув на кнопке "Open app". В результате приложение smsmvcmlab было запущено по адресу: smsmvcmlab.herokuapp.com/employees. Скриншот графического интерфейса пользователя или веб-страницы, созданного приложения, представлен на рисунке 9.

Графический интерфейс пользователя или веб-страницы
Рис. 9. Скриншот, в котором отображается графический интерфейс пользователя или веб-страницы.

Используя средства управления БД (кнопки Submit и Reset, а также средства "Редактировать" и "Удалить"), можно ввести и отредактировать данные о сотрудниках, которые вводятся в базу данных websmsdb, помещенную на mLab MongoDB. После выполнения тестирования приложения, созданного на базе Node (Express) - MongoDB (Mongoose) с применением шаблона MVC и помещенного на облачную PaaS-платформу Heroku, с удаленной БД на mLab MongoDB было удалено.