##MongoDB Atlasを用いて、ローカルホスト以外からMongoDBに接続できるようにする
MongoDB Atlas:MongoDB公式が提供している、MongoDBのホスティングサービス。( https://www.mongodb.com/cloud/atlas )
・MongoDB Atlasにアカウントを作成する(googleアカウントでsign in可能)。MongoDBデータベース、1つだけなら無料で使用することができる。
・「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にデプロイ
※「dev.env」ファイルは「.gitignore」でデプロイしないようにしておく。↓
Herokuにアプリを作成
ターミナルに、 「heroku create (アプリ名)」 で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にデプロイしたアプリにつながっているデータベースを確認できる