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

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

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

・MongoDB Atlasにアカウントを作成する（googleアカウントでsign in可能）。MongoDBデータベース、１つだけなら無料で使用することができる。
<img width="1054" alt="スクリーンショット 2020-07-18 16.33.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/34ac3c56-f7b4-8f99-1094-f101739614d9.png">



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

<img width="982" alt="スクリーンショット 2020-07-18 16.36.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/ff607bdf-c586-656f-aee5-61313283b4ea.png">

<img width="916" alt="スクリーンショット 2020-07-18 16.36.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/00e42ed4-4773-ff0d-f9ac-b11e9f872300.png">

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

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

<img width="1320" alt="スクリーンショット 2020-07-18 16.44.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/cdc32f36-bd02-d638-d7cc-3793058027c3.png">

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

<img width="1052" alt="スクリーンショット 2020-07-18 16.49.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/980cd3b2-d247-3dac-73f3-d63e1c619278.png">

①「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によってアクセスを制限する必要がある。

・接続方法を設定する。

<img width="777" alt="スクリーンショット 2020-07-18 16.53.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/567c2ccd-32bb-2f39-fab6-369174452388.png">

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

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

→「Connect using MongoDB Compass」を選択

##MongoDB Compassを設定する
・「I do not have MongoDB Compass」を選択

<img width="739" alt="スクリーンショット 2020-07-18 17.00.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/ffc54fc2-c2aa-3fe3-0c1f-b2574c3cc61f.png">

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

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

<img width="1270" alt="スクリーンショット 2020-07-18 17.08.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/304ae81a-04d5-ff9c-ac70-4728e7a3d009.png">

<img width="1268" alt="スクリーンショット 2020-07-18 17.08.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/93441422-efc2-e0c7-c23a-d0520a3dc30c.png">

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

##MongoDB CompassからMongoDB Atlasに接続する
・一旦、ローカルホストのMongoDBはDisconnectする
<img width="772" alt="スクリーンショット 2020-07-18 17.14.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/0a33007a-4a18-b7e4-3c7a-9b619fc1ff0d.png">

・MongoDB Atlasの「I do not have MongoDB Compass」画面を再び参照
<img width="756" alt="スクリーンショット 2020-07-18 17.15.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/445d7da6-2099-27cf-7961-9a80568435da.png">

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


・MongoDB Compassの「New Connection」を作成。
<img width="655" alt="スクリーンショット 2020-07-18 17.16.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/6867cbb9-a0c8-6e52-d4a0-7c7b02d94968.png">

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

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

の箇所にて設定

<img width="647" alt="スクリーンショット 2020-07-18 17.16.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/6fc68a13-66c4-3c89-9c85-bfe6d1910de5.png">

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

・「Connect」で、MongoDB Atlasからアクセスできるデータベースを作成することができる。
<img width="1250" alt="スクリーンショット 2020-07-18 17.34.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/d4b09d52-0be5-cc4f-f33e-44891b4ffd74.png">

<h6>・MongoDB Atlas側から確認する</h6>
<img width="1308" alt="スクリーンショット 2020-07-18 17.37.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/e2289839-335d-11ae-3d51-dddcb9b9073b.png">

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

<img width="1307" alt="スクリーンショット 2020-07-18 17.38.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/96bcd290-d75d-d777-ebf3-0c5b88810416.png">

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

<img width="1081" alt="スクリーンショット 2020-07-18 17.39.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/856259ee-12b8-b601-8771-cea28782c113.png">

<img width="832" alt="スクリーンショット 2020-07-18 17.39.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/a8a7dc60-515f-1179-cd10-c50cdabde2f9.png">

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

##Herokuにデプロイする

<h6>・環境変数の設定</h6>
「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

```javascript
const port = process.env.PORT 
```
・「MONGODB_URL：」MongoDBの接続設定。
接続するMongoDBデータベースを格納する。

※コードの記述
・mongoose.js

```javascript
const mongoose = require('mongoose')


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

```

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

```
JWT_SECRET=thisisaseacretkey
```

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

例）

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

sgMail.setApiKey(process.env.SENDGRID_API_Key)
```

↓
<h6>githubにデプロイ</h6>
※「dev.env」ファイルは「.gitignore」でデプロイしないようにしておく。

↓
<h6>Herokuにアプリを作成</h6>
ターミナルに、
「heroku create (アプリ名)」
でherokuアプリを作成。

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

<h6>Heroku環境変数の設定</h6>
ターミナルに、

```
heroku config:set key=value
```

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

```
herkou config:unset key
```

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

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

↓
・「JWT_SECRET」の設定

```
heroku config:set JWT_SECRET=thisisaseacretkey
```

・「MONGODB_URL」の設定


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

<img width="850" alt="スクリーンショット 2020-07-19 10.38.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/b7050a1d-aca6-4e53-f253-caee5328b98a.png">

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

<img width="743" alt="スクリーンショット 2020-07-19 10.39.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/f1492d67-fd0b-7e84-1a54-93e4f7aa3bbb.png">

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

編集したものをコピー

ターミナルに

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

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

↓
<h6>・Herokuにデプロイ</h6>

```
git push heroku maser
```

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

<img width="890" alt="スクリーンショット 2020-07-19 10.49.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/595580/fe46915c-330c-de06-c063-bf8452cdeb69.png">

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

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