More than 5 years have passed since last update.

mern-starterを取り急ぎherokuで実行させる方法

Posted at 2016-10-01

「MongoDB + Express + React + nodeの良いboilerplateないかな〜。。」

「mern-starterがあるじゃないか！」

と思ったけどherokuでどうやって実行させるんだろ〜、とあれこれやったのでその備忘です。

＜注意＞以下手順を行なった時のmern-starterのバージョンは2.0.0です。

手順

package.json

"webpack": "2.1.0-beta.8",

を"devDependencies"から"dependencies"に移動。
なぜかwebpackがserver.bundle.js（ビルドされたサーバーサイドのファイル）でrequireされているため。

$ npm run clean
$ npm run build
$ npm run build:server

distフォルダが作成され、その下にクライアント・サーバー両方のファイルがビルドされて配置される。

.gitignore

dist

をコメントアウトまたは削除する。
一つ前の手順で作ったファイルをherokuにあげるため。

web: npm run start:prod

これによりherokuでNODE_ENV=productionという環境変数を設定した状態でサーバーが起動される。

server/config.js

  mongoURL: process.env.MONGO_URL || 'mongodb://localhost:27017/mern-starter',

のMONGO_URLをMONGODB_URIに書き換える。
herokuで使うmLab MongoDBアドオンがURLの環境変数としてMONGODB_URIを自動で設定するため。

$ heroku create [app_name]
$ heroku addons:create mongolab:sandbox --app [app_name]

でherokuのappを作成してMongoDBのアドオンを追加。

$ git add .
$ git commit -anm "first commit"
$ git push heroku master

https://[app_name].herokuapp.com/
にアクセスして確認する。

端末はMacBook Air(macOS Sierra)です。

$ sw_vers -productVersion
10.12
$ npm -v
3.8.3
$ node -v
v5.10.1