MongoDB AtlasとMongoDB Compassを使ってデータベースに接続したアプリをHerokuにデプロイ

MongoDB Atlasを用いて、ローカルホスト以外からMongoDBに接続できるようにする

MongoDB Atlas:MongoDB公式が提供している、MongoDBのホスティングサービス。( https://www.mongodb.com/cloud/atlas )

・MongoDB Atlasにアカウントを作成する（googleアカウントでsign in可能）。MongoDBデータベース、１つだけなら無料で使用することができる。

・「Create New Cluster」ページが立ち上がるので、作成したいデータベースの設定を行う
※clusterとは、複数のサーバーから接続できるMongoDBデータベースのこと。

Clusterをすでに作成している状態だと有料だが、最初の一つは無料で作成可能。
無料でサポートしている地域に東京はないが、シンガポールに設定しても問題なく動く。

・「Create Cluster」をクリックし、Clusterが作成されるのをしばらく待つ。
Clusterが作成されると以下の画面が「SANDBOX」に表示される。

・「SANDBOX」の「CONNECT」をクリックし、Clusterをセットアップする。

①「Add a Different IP Address」をクリックし、IP Addressに「0.0.0.0/0」を入力。
※「0.0.0.0/0」は全てのホスト、任意の宛先、という意味。
これを設定することにより、複数のサーバーからこのClusterにアクセスできるようになる。

②データベースで使用するUsernameとPasswordを設定する。
IPアドレスに「0.0.0.0/0」を設定しているため、UsernameとPasswordによってアクセスを制限する必要がある。

・接続方法を設定する。

・「自分のアプリから接続する」を設定する前に、MongoDB Compassからデータベースに接続しておくと、アプリに接続したデータベースの中身を見て確認できるので便利。

・「MongoDB Compass」とは、MongoDB公式が提供する、MongoDB用のGUI。以前Qiitaに投稿した「Robo3T」と類似したもの（※Robo3TからはMongoDB Atlasに接続できない）。

→「Connect using MongoDB Compass」を選択

MongoDB Compassを設定する

・「I do not have MongoDB Compass」を選択

①MongoDB AtlasからMongoDB Compassをダウンロード

・ダウンロードされたMongoDB Copmassを設定する
アプリを開き、
「Connect to Host」画面で接続するホストを設定する。
「Fill in connection Individually」で接続を確認。

デフォルトでで、ローカルホストのMongoDB（ポート番号：27017）に接続できるようになっている。
「Connect」
をクリックするとローカルホストのMongoDBに接続できるようになる。

MongoDB CompassからMongoDB Atlasに接続する

・一旦、ローカルホストのMongoDBはDisconnectする

・MongoDB Atlasの「I do not have MongoDB Compass」画面を再び参照

②「Copy the connection string, then open MongoDB Compass.」に書かれているURLの、「＠」より後、「/」より前をコピー。

・MongoDB Compassの「New Connection」を作成。

・「Hostname」に、先ほど MongoDB Atlasからコピーしたものを貼りつける。

・UsernameとPasswordに、MongoDB Atlasで設定したUsernameとPasswordを貼り付ける。
注）

②データベースで使用するUsernameとPasswordを設定する。
IPアドレスに「0.0.0.0/0」を設定しているため、UsernameとPasswordによってアクセスを制限する必要がある。

の箇所にて設定

・「More Option」はデフォルトのままでOK

・「Connect」で、MongoDB Atlasからアクセスできるデータベースを作成することができる。

・MongoDB Atlas側から確認する

「MongoDB Atlas」の「Database Access」の項目から「Edit」をクリックすると、パスワードの再編集ができる。

「Network Address」の項目からは、アクセスを要求可能なIPアドレスの確認、再設定ができる

「Cluster」の「COLLECTION」からは、MongoDB Atlasから作成済みのデータベースが見れる。

Herokuにデプロイする

・環境変数の設定

「dev.env」ファイルを作成し、環境変数として設定する値を設定する。
環境変数を呼び出す時は「process.env.〜」で呼び出す。

PORT=3010
MONGODB_URL=mongodb://127.0.0.1:27017/task-manager-api

・「PORT:」アプリが動くポートの設定。
「PORT=3010」にすると、Herokuにデプロイ後はHerokuの提供するポート、それ以外の時は3010のポートでアプリが起動する。

※コード側の記述
・index.js

const port = process.env.PORT 

・「MONGODB_URL：」MongoDBの接続設定。
接続するMongoDBデータベースを格納する。

※コードの記述
・mongoose.js

const mongoose = require('mongoose')


mongoose.connect(process.env.MONGODB_URL, {
  useNewUrlParser: true, 
  useUnifiedTopology: true,
  useFindAndModify: false
});

※プログラムコードの中に、外からは見せたくないものがある場合の処理

例）暗号化のためのキー（JWT_SECRET）
コード中に、データを暗号化するためのキーを書いている箇所がある。
キーは「thisisaseacretkey」だが、これをそのままコード内に書いたままgitやHerokuにデプロイすると、暗号化のためのキーが丸見えになってしまい、セキュリティ上最悪に。
↓
暗号のためのキーを環境変数に設定する。
「dev.env」ファイルの中に

JWT_SECRET=thisisaseacretkey

を設定。
暗号化のためのキーをそのまま打ち込んでいた箇所は、
「process.env.JWT_SECRET」
というコードで記述。

例）

const sgMail = require('@sendgrid/mail')

sgMail.setApiKey(process.env.SENDGRID_API_Key)

↓

githubにデプロイ

↓

Herokuにアプリを作成

「git push heroku master」でデプロイする前に、環境設定を行う
↓
「heroku config」コマンドを用いて、環境変数の設定を行う！

Heroku環境変数の設定

ターミナルに、

heroku config:set key=value

と打ち込むことで環境変数の設定。

herkou config:unset key

で環境変数を削除できる。

heroku config

で、設定した環境変数一覧を確認できる。

↓
・「JWT_SECRET」の設定

heroku config:set JWT_SECRET=thisisaseacretkey

・「MONGODB_URL」の設定

※MongoDB Atlasが提供する、接続のための文字列を取得する必要がある！！

Clusterの「CONNECT」より、「Connect your Application」を選択

②のアドレスをコピー
を削除し、最初に設定したデータベースのパスワードを入力
を削除し、接続したいデータベースの名前を入力

編集したものをコピー

ターミナルに

heroku config:set MONGODB_URL='先ほどコピーしたアドレス'

実行

・「PORT」
PORTはherokuがデフォルトで提供している環境なので設定不要

↓

・Herokuにデプロイ

git push heroku maser

MongoDB Compassからデータベースを確認

先ほど作成した「MongoDB Atlasからアクセスできるデータベース」に、MongoDB Compassからアクセス。

ここから、Herokuにデプロイしたアプリにつながっているデータベースを確認できる