はじめに
先日React学習のためにローカル環境でJSON Serverと連携したテックブログを組んだのですが、今後の課題にしていたmongoDBとの連携を行っていく記録の第2弾「mongoDBとの接続編」になります。
※学習用のREST APIのためセキュリティやエラー処理については考慮されていない点ご了承ください。
今回はmongoDB Atlasとの接続とダミーデータの投入を行います。
環境構築編
mongoDBとの接続（この記事）
Controllerの作成
完成！?
mongoDBとの接続部分の構築
エントリーポイントとなるindex.tsファイルとmongoDBとの接続を記載をconfig/db.tsファイルとして作成します。
src/index.ts
import express from 'express';
import cors from 'cors';
import connectDB from './config/db';
// DBと接続
connectDB();
const app = express();
// CORS設定
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// .envファイル内PORT設定したポート番号で起動。デフォルトは3001。
const port = process.env.PORT || 3001;
app.listen(port);
console.log('Express WebAPI listening on port ' + port);
src/config/db.ts
import mongoose from 'mongoose';
import dotenv from 'dotenv';
// .envファイルの設定を読み込み
dotenv.config();
// .envファイルで設定したMONGO_URIを設定
const DATABASE_URL = process.env.MONGO_URI || 'http:localhost:3001';
const connectDB = async () => {
try {
const connection = await mongoose.connect(DATABASE_URL, {
// options https://mongoosejs.com/docs/connections.html#options
useUnifiedTopology: true,
useNewUrlParser: true,
useCreateIndex: true,
useFindAndModify: false,
});
console.log(`MongoDB Connected ${connection.connection.host}`);
} catch (error) {
console.error(`Error: ${error.message}`);
process.exit(1);
}
};
export default connectDB;
ターミナルからExpressを起動して接続を確認します。
$ yarn dev
yarn run v1.22.10
$ ts-node-dev --respawn src/index.ts
[INFO] 11:12:00 ts-node-dev ver. 1.1.6 (using ts-node ver. 9.1.1, typescript ver. 4.2.4)
Express WebAPI listening on port 3001
MongoDB Connected cluster0-shard-00-00.*****.mongodb.net
実行後にMongoDB Connected cluster0-shard-00-00.*****.mongodb.netと接続先のエンドポイントが返ってきたらひとまず接続成功です！
Modelの作成
接続がうまくいったところで、次は実際に投入するデータの形を決めていきます。
今回はテックブログの投稿記事をデータとして格納したいので下記のような形としました。
なお、記事のIDはmongoDBが自動生成してくれる_idフィールドを利用します。
タイトル 文字列 必須項目
記事本文 文字列 必須項目
サムネイル画像 文字列（パス） 必須項目
いいね数 数値 必須項目 デフォルト値:0
公開非公開のフラグ 真偽値 必須項目 デフォルト値:false
作成日 日時 必須項目 デフォルト値:登録日時
更新日 日時
次にModelファイルにスキーマを記載します。mongoDBではスキーマの登録という形で実際のデータ形式を決めていきます。
src/models/postModel.ts
import mongoose from 'mongoose';
const PostSchema = new mongoose.Schema(
{
title: {
type: String,
required: true,
},
body: {
type: String,
required: true,
},
image: {
type: String,
required: true,
},
like: {
type: Number,
required: true,
default: 0,
},
publish: {
type: Boolean,
required: true,
default: false,
},
createdAt: {
type: Date,
required: true,
default: Date.now,
},
updatedAt: {
type: Date,
},
},
// timestampsオプションをtrueにすることでmongoDBが自動的にupdatedAtフィールドを生成、更新してくれます。
// 今回はフロントエンドのロジックの都合上上記で手動で用意しています。
// {
// timestamps: true,
// },
);
const Post = mongoose.model('Post', PostSchema);
export default Post;
次にダミーデータを用意します。（とくにTypeScriptである意味はありません。。。）
src/post.ts
export const posts = [
{
createdAt: 1621139532415,
title: 'Reactを使ったテックブログを作成してみた',
body: 'ダミーデータ',
image: '/assets/images/dummy01.jpg',
like: 2,
publish: true,
},
{
createdAt: 1621139552415,
title: 'Reactを使ったテックブログを作成してみた2',
body: 'ダミーデータ2',
image: '/assets/images/dummy01.jpg',
like: 102,
publish: false,
},
];
登録用のseed.tsファイルを作成します。
src/seed.ts
import dotenv from 'dotenv';
import { posts } from './data/post';
import Post from './models/postModel';
import connectDB from './config/db';
dotenv.config();
// DBに接続
connectDB();
// データのインポート
const importData = async () => {
try {
// 一旦中身を全削除
await Post.deleteMany();
// postsの中身を全件登録
const createPosts = await Post.insertMany(posts);
console.log(`Data Imported!`);
process.exit();
} catch (error) {
console.error(`Error: ${error}`);
process.exit(1);
}
};
// 登録データの破棄
const destroyData = async () => {
try {
await Post.deleteMany();
console.log(`Data Destroyed!`);
process.exit();
} catch (error) {
console.error(`Error: ${error}`);
process.exit(1);
}
};
// コマンドラインでパラメータ -d を渡すと削除モードにする
if (process.argv[2] === '-d') {
destroyData();
} else {
importData();
}
これで登録の準備ができました！
登録スクリプトもTypeScriptとなっているので一旦JavaScriptファイルへビルドしてからインポートを実行します。
$ yarn build
$ yarn data:import
yarn run v1.22.10
$ node dist/seed
MongoDB Connected cluster0-shard-00-01.****.mongodb.net
Data Imported!
✨ Done in 2.55s.
Data Imported!と返ってきたら処理成功です！
念の為mongoDB Atlasの管理画面からCollectionsの中にデータが入っていることを確認します。
さいごに
これでmongoDBへの接続とダミーデータの登録まで完了しました！
次回はデータのCRUD操作を行う部分を作成してみます。
なお、完成版？のソースはこちらになります。
↧