クラウド上にあるMongoDBを使ってアプリケーションを構築してみたいという人向けにMongo DB Cloudでのアカウントの登録からローカルのExpressサーバからのアクセスまでの一連の流れを掲載しているので途中で迷うことなく初期設定を完了させることができます。

MongoDB CloudにはFreeのプランも用意されているのでクレジットカードの登録なしで簡単に利用することができます。

MongoDB Cloudの初期設定

MongoDB Cloudのアカウントを作成するためにmongodb.com/cloudにアクセスします。

mongodb.comの初期ページ
mongodb.comの初期ページ

画面中央にある”Try MongoDB Cloud Now”をクリックします。

メールアドレスまたはGoogleアカウントでアカウントを作成することができます。メッセージにもありますがクレジットカードの情報は必要ありません。

Get Started画面
Get Started画面

本文書ではGoogleアカウントを利用してアカウントの作成を行うのでSign up with Googleをクリックします。

Googleアカウント選択画面
Googleアカウント選択画面

Privacy Policy & Terms of Serviceが表示されるので問題がかければチェックを行なってください。チェックするとSubmitボタンがクリックできるようになります。

Privacy Policy & Terms of Service
Privacy Policy & Terms of Service

Welcome画面が表示されます。

Welcome画面が表示
Welcome画面が表示

Welcome画面が表示された管理画面が表示されます。初期設定を完了させるためにはOrganization, Projectsの設定が必要となります。”Create an Organization”をクリックしてください。

organizations画面
organizations画面

組織の名前を入力する画面が表示されるので任意の名前を設定してくだい。ここではReffectと入力しています。MongoDB Atlasのチェックをそのままにして”Next”ボタンをクリックします。

組織の名前を入力
組織の名前を入力

Create Organization画面が表示されるので”Create Organization”ボタンをクリックします。

Create Organization画面
Create Organization画面

Organizationが作成できたら次はProjectの作成を行います。右上にある”New Project”をクリックしてください。

プロジェクト一覧画面
プロジェクト一覧画面

任意のプロジェクト名を入力して”Next”ボタンをクリックしてください。

プロジェクトの作成
プロジェクトの作成

Create a Project画面が表示されたら”Create Project”ボタンをクリックしてください。

プロジェクトの作成
プロジェクトの作成

Projectの作成が完了したら、Clustersの画面が表示されます。”Build a Cluster”のボタンをクリックしてください。

Create a Cluster画面
Create a Cluster画面

プランの選択を行うことできます。FREEで利用することが可能です。ここではFREEのShared Clustersを選択します。右側のShared Clustersの”Create a Cluster”ボタンをクリックしてください。

Shared Clusterの選択
Shared Clusterの選択

”Create a cluster”ボタンをクリックするとCloud ProviderとRegionを選択することができます。

Cloud Provider&Regionの選択
Cloud Provider&Regionの選択

AWS, Google Cloud, Azureから選択することがでできますがここではTokyoの選択できるGoogle Cloudを選択します。選択したら下記にある”Create Cluster”ボタンをクリックしてください。

Google CloudのRegion Tokyoを選択
Google CloudのRegion Tokyoを選択

Clusterの作成中画面が表示されます。作成が完了するまでしばらく時間がかかります。Your Cluster is being createdのメッセージが表示されている間は作成中です。

Clustersの作成中画面
Clustersの作成中画面

Clustersの作成が完了すると以下の画面が表示されます。この状態ではまだMongoDBを利用することができないのでSANDBOXのCluster0の下にある”Connect”ボタンをクリックしてください。

Clustersの作成完了
Clustersの作成完了

接続できるIPアドレスを設定することができます。ローカルでテスト開発をする人が大半だと思うので”Add Your Current IP Address”ボタンをクリックします。もしIPアドレスが変わってもあとでIPアドレスの設定は変更可能です。

IPアドレスの設定
IPアドレスの設定

IP Addressに現在接続しているIPアドレスが表示されているので”Add IP Adress”を選択してください。

IPアドレス接続制限の設定
IPアドレス接続制限の設定

IPアドレスの設定が完了したらデータベースユーザの名前とパスワードを設定する必要があります。入力後に”Create Database User”ボタンをクリックしてください。データベースユーザの名前とパスワードはアプリケーションから接続する際に必須となります。

データベースユーザの作成
データベースユーザの作成

データベースユーザが作成できたら下記の画面が表示されるので”Choose a connection method”を選択してください。

接続に関するセキュリティ設定の完了
接続に関するセキュリティ設定の完了

3つの接続の選択を行うことができますが、真ん中の”Connect your application”を選択します。

接続方法の選択
接続方法の選択

アプリケーションで利用する際のコードも表示されるのでこのコードを使って接続を行うことができます。Include full driver code exampleをクリックするとより詳細なコードが表示されますが本文書では利用しないので無視してください。

mongodbへの接続情報
mongodbへの接続情報

管理画面では左側のメニューから先ほど設定したデータベースユーザの情報も確認することができます。

データベースユーザの情報
データベースユーザの情報

左側のメニューにあるNetwork Accessでは制限したIPアドレスの情報も表示されるので、削除したり編集したりすることが可能です。

Get Startedには2件残っていますがオプションのサンプルデータの挿入とClusterへの接続なのでまずはローカルからExpressを利用して接続を行なっていみましょう。

Get Startedの残りの件数
Get Startedの残りの件数

ここまでで初期設定は完了です。

Expressサーバからの接続

ここからはローカルのPCでの作業です。macOS Big Sur パージョン11.4で動作確認を行なっています。

MongoDBへの接続はExpressサーバから行います。Expressサーバを動作させるためにはNode.jsのインストールが完了している必要があります。node -vコマンドを実行してバージョンが表示されない場合は先にNode.jsのインストールを行ってください。


 % node -v
v14.7.0

Expressサーバを構築するnodeプロジェクト用のフォルダを任意の場所に作成してください。ここではmongodb-cloudという名前をつけています。作成したフォルダに移動して、npm init -yコマンドでpackage.jsonファイルを作成してください。


% mkdir mongodb-cloud
% cd mongodb-cloud
% npm init -y
Wrote to /Users/mac/Desktop/mongodb-cloud/package.json:

{
  "name": "mongodb-cloud",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

express, mongoose, nodemonをインストールします。mongooseはNode.jsからMongoDBを操作するために利用するためのライブラリです。ファイルを更新した場合に再度サーバを再起動する必要があります。nodemonを利用することでファイルを更新をnodemonが監視し、自動でサーバの再起動を行なってくれます。


 % npm install express mongoose nodemon

index.jsファイルを作成して下記のコードを記述してください。<your_password>には管理画面の途中で設定したパスワードを入力してください。もしパスワードがわからない場合は管理画面の左側のメニューのDatabase Accessから変更することができます。デフォルトのデータベースの名前はmyFirstDatabaseをそのまま利用します。

データベースの名前はmyFirstDatabase以外の任意の名前をつけることができます。任意の名前をつけて接続を行うその名前で自動でデータベースが作成されます。

ローカルPCのポート3000でExpressサーバを起動しています。


const express = require('express');
const app = express();
const mongoose = require('mongoose');

const port = 3000;

const options = {
  useUnifiedTopology: true,
  useNewUrlParser: true,
};

mongoose.connect(
  'mongodb+srv://mongodba:<your_password>@cluster0.11111.mongodb.net/myFirstDatabase?retryWrites=true&w=majority',
  options
);

const db = mongoose.connection;

db.on('error', console.error.bind(console, 'DB connection error:'));
db.once('open', () => console.log('DB connection successful'));

app.listen(port, () => console.log(`Express Server listening on port ${port}!`));

node index.jsコマンドを実行して下記のメッセージが表示されればクラウド上のデータベースへの接続は正常に行われています。


 % npx nodemon index.js
[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Example app listening on port 3000!
DB connection successful

Expessサーバへの接続

ポートの3000を開いてExpressサーバは起動しているので”/(ルート)”に接続後にHello Worldが表示できるようにルーティングの設定を行います。


//略
db.on('error', console.error.bind(console, 'DB connection error:'));
db.once('open', () => console.log('DB connection successful'));

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

ブラウザからアクセスを行ないHello Worldが表示されることを確認してください。Expressサーバもポート3000で正常に動作していることが確認できました。

Hello World
Hello World

MongoDBへの書き込み

一番重要なクラウド上にあるMongoDBへの書き込みを行います。mongooseを利用しているのでデータを書き込む前に書き込むデータのスキーマ情報を作成するためmodelsフォルダを作成してPost.jsファイルを保存します。スキーマはテーブルがどのような構造をしているかを定義するもので簡単に言えばテーブルがどのような列で構成されているかどうかを示すものです。今回はtitleとcontentを持つPOSTを定義します。timestampを設定しているので作成時間、更新時間も追加されます。

mongodbではテーブルではなくコレクションと呼びます。

const mongoose = require('mongoose');

const PostSchema = new mongoose.Schema(
  {
    title: {
      type: String,
    },
    content: {
      type: String,
    },
  },
  {
    timestamps: true,
  }
);

module.exports = mongoose.model('Post', PostSchema);

通常は外部からPOSTリクエストを送信することでデータが書き込まれますが今回は/posts/createにアクセスするとtitleとcontentが事前に設定されたデータが作成されます。

index.jsファイル上でPostにアクセスするためにはスキーマ情報の記述されたPost.jsファイルを読み込む必要があります。


const express = require('express');
const app = express();
const mongoose = require('mongoose');
const Post = require('./models/Post'); //追加

//略

app.get('/posts/create', async (req, res) => {
  const newPost = await Post({
    title: '初めてのデータ登録',
    content: '初めてクラウド上のMongoDBにデータを保存します。',
  });
  await newPost.save();
  res.status(200).json(newPost);
});

//略

データの作成にはcreateメソッドを利用することもできます。callback関数の中でresponseを行なっているためasync,awaitを利用せずに記述することができます。


app.get('/posts/create', (req, res) => {
  Post.create(
    {
      title: '初めてのデータ登録',
      contenet: '初めてクラウド上のMongoDBにデータを保存します。',
    },
    (err, data) => {
      if (err) {
        res.status(500).json(err);
      }
      res.status(200).json(data);
    }
  );

作成するための準備が完了したのでブラウザから/posts/createにアクセスを行なってください。ブラウザには作成したpostデータが表示されます。cratedAt, updatedAtはtimestampを設定したので表示されます。そのほかに自動で_idが付与されます。

作成されたデータ
作成されたデータ

表示されたデータがクラウド上のMongoDBに表示されるか確認してみましょう。

ブラウザ上に表示されていたデータと全く同じ情報が管理画面上にも表示されていることが確認できます。

管理画面上でのデータの確認
管理画面上でのデータの確認

データの取得

作成したデータをExpressからアクセスしてブラウザ上に表示してみましょう。今回は/posts/allにアクセスするとMongoDBに保存したデータを取得することができます。


app.get('/posts/all', async (req, res) => {
  const Posts = await Post.find({});
  res.status(200).json(Posts);
});

ブラウザから/posts/allにアクセスすると作成したデータが表示されます。現在は1件しかデータがないためわかりにくいですが、配列で戻されていることが確認できます。

mongoDBからのデータ取得
mongoDBからのデータ取得

Expressサーバからの書き込み、読み込みも正常に行えることが確認できました。ここからは実際のアプリケーションの作成を開始することができます。今後MongoDB Cloudの利用したアプリケーションの構築方法を公開する予定です。