LoginSignup
11
9

More than 5 years have passed since last update.

Node.jsでアプリを作ってHerokuにデプロイするときのメモ

Last updated at Posted at 2016-05-03

LineBotAPI+Heroku+docomoAPI+Node.jsでBotをつくるをやったときに、デプロイまでにいろいろつまづいたのでデプロイしてちゃんと動くようになったところまでのメモ。

ディレクトリ構成

app/
├ .babelrc
├ .eslintrc
├ .gitignore
├ Procfile
├ index.js
├ package.json
├ src/
│ └ index.js
├ webpack.config.base.js

ES2015+babel+webpackの構成。
app/src/index.jsをbuildしてapp/index.jsに吐き出すような感じ。

ファイルとして見慣れなかったのは、Procfileというファイルで、アプリケーションで管理するプロセスを記述する。また、アプリケーションのルートディレクトリに配置する必要がある。
Herokuでは、process typewebを指定しないとダメ。

web: node index.js
参考

package.json

アプリで採用するNodeのバージョンや、使用モジュールをdependenciesに漏れなく記述してないとうまく実行されない。

{
  "name": "app-name",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": "v4.2.x",
    "npm": "3.8.x"
  },
  ...
  "dependencies": {
    ...
    "async": "^2.0.0-rc.3",
    "body-parser": "^1.15.0",
    "express": "^4.13.4",
    "request": "^2.72.0"
  }
}

webpack.config.base.js

webpackを使ってNode.js向けにjsを生成するときは、

module.exports = {
 ...
 target: "node",
 ...
}

の記述が必要。記述がないと、

Error: no window object present

のエラーが出る。


また、requestを使っていると、

Module not found: Error: Cannot resolve module 'fs' ...
Module not found: Error: Cannot resolve module 'net' ...
Module not found: Error: Cannot resolve module 'tls' ...

みたいなエラーがたくさん出たので、下記を追加。

module.exports = {
  ...
  node: {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  ...
}

参考:https://github.com/request/request/issues/1529


さらに、request関連で

Error: define cannot be used indirect

とエラーが出たので、以下を追加。

module: {
    noParse: /node_modules\/json-schema\/lib\/validate\.js/,
    ...
}

参考: https://github.com/request/request/issues/1920

デプロイ方法

開発が終わったら、Herokuサイトにも書いて通り、

git add .
git commit -am 'make it better'
git push heroku master

でデプロイします。
うまくいったら、Heroku上でアプリが正しく動いているか確認します。

heroku logs --tail

ログを見ると、どこでエラーが起こっているかなど確認できるのでデバッグに使えます。

11
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
9