Next.js × Express で日記アプリ制作 part3

part3ではMongoDBの使い方、アプリの接続方法を解説していきます。

part2ではBoostrapを利用してトップページと日記投稿ページを作成してきました。まだ見ていない方はこちらから見ることをお勧めします。

MongoDBとは

2007年に 10gen 社 (現 MongoDB Inc.) によって開発された、オープンソースの ドキュメント指向型NoSQL です。

今回はMongoDB Inc.が提供しているマネージメントサービスであるMondoDB Atlasを使ってアプリケーションと接続していきます。

NoSQLについてはこちらの記事が大変参考になりました。

MongoDB Atlasアカウントを作成しよう

MongoDB Atlasを使うためにアカウントを作ります。

公式サイトにアクセスし右上に見える「Try Free」ボタンからアカウントを作成していきます。

公式サイトにはこちらからアクセスすることができます。

「Try Free」ボタンを押すとEmailなどを入力する画面に以降しますので入力し「Get started free」ボタンを押します。

次にプランを選択する画面に以降しますので「Free」と書いているプランを選択します。

次にリージョンを選び画面に以降しますが既に選択されているプランで構いません。「Create Cluster」を押します。

これでアカウントを作成することができました。

反映まで時間がかかる場合がありますので直ぐに操作ができない場合は時間を空けてから再度アクセスしてください。

MongoDB Atlasと日記アプリを繋げる

MongoDB Atlasのアカウントが作成できましたら日記アプリから操作するために繋げていきます。

今回の日記アプリではJavaScriptのサーバーサイドで動くNode.jsのフレームワークであるExpress.jsを使いNext.jsのカスタムサーバーを作りMongoDBと繋げていきます。

Express.jsのインストール

Express.jsをインストールするため下記のコマンドを実行します。

npm install --save express

実行したコマンドが終了しましたらdaily-appの中にssr-server.jsファイルを作成し下記のように編集していきます。

//ssr-server.js
const express = require('express')
const next = require('next')
   
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
   
app.prepare()
.then(() => {
 const server = express()
   
 server.get('*', (req, res) => {
   return handle(req, res)
 })
   
 server.listen(3000, (err) => {
   if (err) throw err
   console.log('> Ready on http://localhost:3000')
 })
})
.catch((ex) => {
 console.error(ex.stack)
 process.exit(1)
})

次のdaily-appの中にあるpackage.jsonの一部を編集していきます。

{ "scripts": { "dev": "node ssr-server.js" } }

以上で npm run dev を起動した時にカスタムサーバーが動くように設定することができました。

mongooseのインストール

　Express.jsでMongoDBを操作するためにmongooseをインストールしていきます。下記のコマンドを実行してください。

npm install --save mongoose

モデルの作成

　次にデータを定義するモデルを作成していきます。daily-appの中にmodelフォルダを作成し、その中にdailySchema.jsを作成し下記のように編集しています。

//dailySchema.js
const mongoose = require('mongoose')

const dailySchema = new mongoose.Schema({
 title: {
   type: String
 },
 content: {
   type: String
 },
 created: {
   type: Date
 }
})

module.exports = dailySchema

MongoDBへの接続

　次にssr-server.jsからmongooseを使ってMongoDB Atlasに接続していきます。

 MongoDB Atlasにアクセスします。「CONNECT」を押します。

下記の画面に遷移しましたら①、②をそれぞれ入力していきます。

②のCreate a MongoDB User のUsernameとPasswordは後ほど使いますので忘れないようにメモを残してください。

上記の入力が終わり「Choose a connection method」を押すと下記の画面に遷移します。この画面では「Connect your application」を押します。

　下記の画面に遷移します。「DRIVER」はNode.js、「VERSION」は3.0 or laterにします。②の「Copy」を押しコピーします。これがssr-server.jsとMongoDBを繋げる文字列になります。<password>は「Create Mongo User」で入力したpasswordになります。

 次にssr-server.jsを下記の様に編集していきます。上記に貼っている画像の黒で覆われている部分と<password>は「Create Mongo User」で記入したdbnameとpasswordになります。

//ssr-server.js
const express = require('express')
const next = require('next')
   
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

const mongoose = require('mongoose');
const connectOption = {
 useUnifiedTopology: true,
 useNewUrlParser: true
}
mongoose.connect('上記でコピーした文字列を貼ってください', connectOption);
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'DB connection error:'));
db.once('open', () => console.log('DB connection successful'));
const dailySchema = require('./model/dailySchema');
const daily = mongoose.model('daily', dailySchema, 'daily');
   
app.prepare()
.then(() => {
 const server = express()
   
 server.get('*', (req, res) => {
   return handle(req, res)
 })
   
 server.listen(3000, (err) => {
   if (err) throw err
   console.log('> Ready on http://localhost:3000')
 })
})
.catch((ex) => {
 console.error(ex.stack)
 process.exit(1)
})

以上によりdaily-appとMongoDB Atlasの接続が完了しました。

まとめ

part3ではMongoDB Atlasのアカウント作成、カスタムサーバーの作成、daily-appとMongoDB Atlasの接続を行いました。

次回カスタムサーバーを編集しデータの保存、所得、データの表示を行っていきたいと思います。

参考

NoSQLについて勉強する。 - Qiita

Building a server-rendered React app with Next.js and Express.js - LogRocket Blog

Express.js(node.js)からMongoDBへの接続とRestfull APIの設定 | アールエフェクト

How to connect to MongoDB Atlas using Mongoose and Node