Windows
Git
Node.js
Heroku
Express

Node.js + Express + HerokuでHello World for Windows

前回、ローカル環境でHelloWorldしたので、今回はHerokuでHelloWorldしてみます!
とりあえず動かしたいんだよ!!という方向けです。

前回 -> 【10分】Node.js + ExpressでHello World for Windows

環境

  • Node.js(v8.10.0)
  • Express(v4.16.0)
  • Heroku(heroku-cli/v6.16.3)
  • Git(v2.16.3.windows.1)

package.jsonの編集

アプリルートフォルダにpackage.jsonというファイルがあると思います。

そのpackage.jsonに"engines"を追加します。
ここでは、node -v と npm -v で得られたバージョンを記載します。

{
  "name": "nodewebapp",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  },
  "engines": {
    "node": "8.10.0",
    "npm": "5.6.0"
  }
}

Herokuの登録

まずはHerokuにアカウントを登録します。
https://signup.heroku.com/
herokusignup.png

次にHerokuをコマンドラインで使用するために「Heroku Toolbelt」をインストールします。
https://devcenter.heroku.com/articles/heroku-cli
herokutoolbelt.png

Herokuの使用

コマンドラインで下記のコマンドを入力し、上で作成したアカウントのEmailとPasswordを入力します。

$ heroku login
Enter your Heroku credentials.
Email: [Email]
Password: [Password]
Authentication successful.

そして、Herokuに新しいアプリケーションを作成します。

$ heroku create [アプリ名]

するとこんなURLが返ってくるかと思います。保管しておいてください!

https://xxxxxxxxxx.herokuapp.com/ | https://git.heroku.com/xxxxxxxxxx.git

僕の場合はこんな感じでした
createheroku.png

Gitのインストール

HerokuへのデプロイはGit経由で行います。
下記サイトよりダウンロードし、インストールします。
https://git-scm.com/downloads

インストーラーで色々聞かれます。
改行コードの設定とか先にしておくと楽なんですが、デフォルト値で次へ次へしても使えます。

.gitignoreファイルの作成

コミットしたくないファイルやフォルダを設定できます。
アプリフォルダ直下に「.gitignore」というファイルを作成してください。

中身はとりあえずこれだけです。

node_modules

Procfileファイルの作成

Herokuで使用するプロセスの記述ファイルです。

web: node ./bin/www

Gitリポジトリの作成

アプリケーションフォルダで下記コマンドを実行してください。
リモート先にはHerokuアプリ登録の際に取得したURLを入力します。

$ git init
$ git add .
$ git commit -m "Init"
$ git remote add heroku https://git.heroku.com/xxxxxxxxxx.git

$ git push heroku master

なにやらごちゃごちゃでます。
赤枠のURLがデプロイされたアプリのURLなので、ブラウザで開いてみましょう!
herokudeployed.png

やったー!!

herokuhelloworld.png

動かない~という方はぜひコメントくださるとうれしいです!
次回はHerokuにデプロイしたアプリでDBを使う!(PostgreSQL)にトライしてみたいと思います!

参考情報