nuxt.jsで作成したWebアプリのBackendサーバーをexpress+sequelizeで立てる





この記事は、Nuxt.jsとOnsenUIでHello,Worldするまでの続きの記事です。

Nuxt.jsの役割はフロントのルーティングとViewの描画であり、MVCモデルでいるところのViewとControllerです。

ではModelの取り扱いはどうでしょうか?多分Nuxtの中に入れるより、外部からaxiosでのajaxでフェッチしてくるほうがシンプルだと思ったので、通信用のサーバーを立てます。

今回はexpress + Sequelize(ORM)で小さなバックエンドサーバを立てて対応します。

前提
データベースはmysqlを使用します。
また、Tasksというテーブルを予め作成しておきます。テーブル定義は
id: int primary key autoincrement
name: varchar(255) not null,
description: text

とまぁこんな感じです。サンプルを作るのでかなり適当です。

expressプロジェクトを作成

前回のNuxt.jsのディレクトリの下で以下を実行

express backend

これで{ProjectRoot}/backend 以下に、expressの環境ができる

ポートをずらす

3000番で起動しようとするとフロントのNuxtと被ってしまうので、/backend/app.jsの中身を編集

app.listen(3001,()=>{
  console.log('port 3001 express works...')
})

CORSの許可設定

yarn add cors

corsモジュールをuseする。app.jsは以下のような感じ

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

const cors = require('cors'); //corsモジュールの読み込み

var app = express();
app.listen(3001,()=>{ // portの書き換え
  console.log('port 3001 express works...')
})

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

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(cors()) // ミドルウェアとして設定

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// 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;


Sequalizeの導入

DBドライバはお好みに合わせて。

yarn add sequelize mysql2 

Modelの定義

backend/modelsパッケージをおもむろに切る。
tasks.jsを配置

const Sequelize = require('sequelize');

const sequelize = require('../sequelize_connection')

const Task = sequelize.define('tasks', {
  id: {type: Sequelize.INTEGER, primaryKey: true, autoIncrement: true},
  name: Sequelize.STRING,
  description: Sequelize.STRING
}, {
  timestamps: false
});
module.exports= Task


別件で、backend/にsequelize_connection.jsというものを作っておいた。

const Sequelize = require('sequelize');
const sequelize = new Sequelize('test_database', 'root', '', {
  host: 'localhost',
  dialect: 'mysql',

  pool: {
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  },

  // http://docs.sequelizejs.com/manual/tutorial/querying.html#operators
  operatorsAliases: false
});

module.exports = sequelize

インスタンス化したConnectionObjectを使いまわしやすいようにモジュール化したものです。

Controllerの改修

routes/index.jsにおもむろに生やす

var express = require('express');
var router = express.Router();

const Task = require('../models/tasks')

/* GET home page. */
router.get('/', function (req, res, next) {
  Task.findAll().then((tasks)=>{
    console.log(tasks)
    console.log(tasks[0].id)
    console.log(tasks[0].name)
    res.json(tasks)

  })
});

module.exports = router;

これでサーバーを npm run startで立ち上げて、localhost:3001にアクセスすればTasksのjsonが取得できる

Nuxt.js側の改修

tasks/index.vueを以下のように、createdでAPIと通信できるようにしておく(疎通確認なので雑なのは失敬)

  import HelloWorld from '@/components/HelloWorld.vue'
  // Webpack CSS import
  import 'onsenui/css/onsenui.css';
  import 'onsenui/css/onsen-css-components.css';
  import axios from 'axios'

  // JS import
  import Vue from 'vue';
  import VueOnsen from 'vue-onsenui'; // This already imports 'onsenui'

  Vue.use(VueOnsen);


  export default {
    name: "index",
    components: {
      HelloWorld
    },
    created: function () {
      axios.get('http://localhost:3001').then(tasks => {
        console.log(tasks)
      }).catch(err => {
        console.error(err)
      })
    }
  }

で、localhost:3000にアクセスし、consoleを見ると、tasksの中身が見えていればOK

これで、nuxt.jsとバックエンドAPIサーバの通信の仕組みが簡易的にできたことになります。

ソースコード

githubに公開しています。https://github.com/yohira0616/nuxt-sandbox

発展

docker化したりとかgitリポジトリを分けたりとかいろいろできることはあると思うけど適宜やっていく、一旦記事としてここで区切りをつけます。