先日記述した「Herokuへのアップロードでつまづいた時の対処法」の後編になります。なお、タイトル通りMongoDBを使っていない場合には、この後編を参考にする必要はありません。前編に引き続き、これを見た未来の困っている人たちの手助けになれば嬉しいです。それでは順を追って説明していきます。

前編で記述したprocfileの作成方法や.gitignoreの作成方法をすでに行っている前提で話していきます。

１：HerokuでMongoDBのアドオンを使用するためには、Herokuでクレジットカード情報を登録する必要があります。ただし、お金は一切かかりませんし、メルマガなどの勧誘もありません。登録方法はこちらの方の記事を参考にしてみてください。👉https://wp.developapp.net/?p=5250
大体4-5分でできます。

２：登録が完了したらHeroku上の自分のアプリケーション画面に移動します。👉https://dashboard.heroku.com/apps

３：今回Herokuへアップロードするアプリを選択しクリックする。

４：画面の上部に表示されている”Resources”をクリックする。

５：Find more add-onsをクリックする。

６：Heroku Add-onsと表示され、多数のアドオンが表示されるので、その中の”mLab MongoDB”を選択する。クリックするとそのアドオンのリンク先に飛ぶ。

７：スクロールダウンすると"install mLab MongoDB"のボタンがあるのでクリックする。

８：App to provision toのsearchボックスの中に自分のHerokuアプリ名を入力し、"Provision add-on"をクリックする。これでアプリとアドオンの紐付けが完了。

９：次にアドオンのアドレス情報を登録するので、今のHerokuの画面上に表示されている"mLab MongoDB"(名前部分)をクリックする。

１０：画面中央のUsersを選択すると、右側に"Add database user"が表示されるので、クリックする。

１１：Database UsernameとDatabase Passwordは後々必要になるが、ここでは以下のように例として設定する。※パスワードは英数6文字以上、チェックボックスをチェックする必要はなし。

Database Username: user

Database Password: 123qwe

１２：作成したら自分の画面に表示されている以下の部分をコピーする。下のはあくまでもサンプル例。これでHeroku上での設定は終わりです。次のステップからファイルとRobo 3Tを使用していきます。

mongodb://:@ds151508.mlab.com:51508/heroku_mxzlxdnp

１３：mongoose.connectを書いているファイルを開き、先ほどコピーしたURIを以下のように貼り付けます。そして、process.env.MONGODB_URIも以下の通りに追記します。

mongoose.connect(process.env.MONGODB_URI || "mongodb://:@ds151508.mlab.com:51508/heroku_mxzlxdnp", {
useNewUrlParser: true
});

１４：コピーして貼り付けたURIの中に:と書かれているので、私の場合、先ほどuserと123qweと設定して作ったため、ここをそれぞれuser:123qweと書き換えます。以下完成文。これでファイルの中身の設定は終わりです。

mongoose.connect(process.env.MONGODB_URI || "mongodb://user:123qwe@ds151508.mlab.com:51508/heroku_mxzlxdnp", { useNewUrlParser: true });

１５：Robo 3Tを使って接続を確立させるので、Robo 3Tを開いてください。Robo 3Tをダウンロードしていない方はここからダウンロードしてください。※今後作業する時もRobo 3T使うと結構便利です。👉https://robomongo.org/

１６：Robo 3Tの画面上で、"Create"をクリックする。わからない場合は、左上の"FIle"を選択し"Connect"を選ぶと"Create"を選べる画面が表示される。

１７：Connection Settingで、まず、接続名を入力する。

１８：とりあえず先ほどコピーしたURIをAddressに貼る。”localhost”の文字は消す。

Address: mongodb://user:123qwe@ds151508.mlab.com:51508/heroku_mxzlxdnp

１９：ここから以下のように変更する。

Address: 　ds151508.mlab.com

２０：次に、隣の5桁の数字を消して、自分のURI内に書かれてある5桁の数字を代わりに入力する。

ds151508.mlab.com:51508/heroku_mxzlxdnp

51508　👈ds151508.mlab.com:と/heroku_mxzlxdnpの間の数字

従って、最終的には以下のようになる。※私の場合

Address: 　ds151508.mlab.com　　：51508

２１：Connectionの隣にあるAuthenticationをクリックする。

２２：Perform authenticationにチェックを入れると、他の部分の入力が可能になる。

２３：Database: の部分には自分のURIの最後のherokuから始まる部分を入力する。以下参考にしてください。

mongodb://user:123qwe@ds151508.mlab.com:51508/👉👉heroku_mxzlxdnp👈👈これこれ

従って以下のようになる。

Database: heroku_mxzlxdnp

２４：UsernameとPasswordには自分が設定したものを入力する。私の場合、userと123qwe、なので以下のようになる。

Username: user

Password: 123qwe

２５：最後に左下の"Test"をクリックし、どちらもグリーンになれば全ての設定が完了。

２６：Command Line(Hyper Terminal)を起動し、Herokuへとアップロードするファイルを選択。

２７：次のコマンドを順々に実行する。

コマンド：$heroku login

コマンド：$git init

コマンド：$git add

コマンド：$git commit -m "random message"

コマンド：$git push heroku master
※冒頭でも伝えたように、procfileや.gitignore、その他の作業はすでに実行済の想定で書いています。

２８：長くなりましたが、これで終了です。DBも全て反映されるようになります。

日本語で正解のドキュメントを探すのも一苦労のプログラミング世界ですが、試行錯誤を重ねに重ねて、さらに重ねまくった上で実装できた時は嬉しいですね笑

1歩1歩頑張っていきましょう。