Heroku では Python, Ruby, Go など様々な言語を用いてウェブアプリを開発することができますが，今回は Node.js での開発をスタートする方法を紹介したいと思います．

開発環境の構築

今回は macOS で進めていきます．Windows の場合は，公式ページからダウンロードしてください．

まず，パソコンに Heroku の開発用パッケージをインストールします．

$ brew install heroku/brew/heroku

インストールが終了したら，メールアドレスとパスワードで Heroku にログインします．

$ heroku login

Node.js, npm, Git を利用するので，インストールされているか確認します．

$ node --version
v10.6.0

$ npm --version
6.1.0

$ git --version
git version 2.15.2 (Apple Git-101.1)

サンプルアプリのインストール

# 任意のディレクトリに移動 (ここではホームディレクトリ直下)
$ cd ~/

$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started

# 依存パッケージのインストール
$ npm install

パソコン上にチュートリアルとして用意されているアプリをダウンロードして展開します．

アプリの構成

どのようなファイルによってアプリが構成されているかを簡単に確認します．

Procfile

web: node index.js

プロセスタイプは web です．デプロイ時に実行するコマンドを書きます．

package.json

{
  "name": "node-js-getting-started",
  "version": "0.3.0",
  ...
  "engines": {
    "node": "8.11.1"
  },
  "dependencies": {
    "ejs": "^2.5.6",
    "express": "^4.15.2"
  },
  ...
}

アプリの基本情報や依存するパッケージなどを記述します．

$ npm init

# Yarn の場合
$ yarn init

npm init でプロジェクトを初期化でき，package.json が生成されます． --yes オプションですべてデフォルト値で生成します．

ディレクトリ

• public: CSS と画像
• views: ejs (Embbed JavaScript)

index.js

アプリ本体のファイルです．Express がサーバの機能を提供しています．

ローカルサーバでの起動

$ heroku local web

ローカルで起動すると Procfile に従ってコマンドが実行され，サンプルのアプリであれば http://localhost:5000 で開くことができます．

Heroku へのデプロイ

# Heroku アプリの作成
$ heroku create

# チュートリアルアプリをデプロイ
$ git push heroku master

# アプリを開く
$ heroku open

heroku create では自動的に名前が付けられますが， --name オプションで既存のアプリと被りのない名前を付けることができます．

各コマンド

ログの確認

$ heroku logs --tail

アプリのスケーリング

$ heroku ps

現在動作している dyno を調べることができます．dyno はコアのような概念で，無料プランではひと月 1000 dyno 時間まで利用できます．

最後に

サンプルアプリは Express というウェブアプリケーションフレームワークを利用しており，これによってルーティングなどが機能しています．また，UI として HTML ではなく ejs が用いられているようです．

Vue では webpack-dev-server (webpack-serve) が開発用サーバとして使われることが多く，開発中は Express を考えなくてもなんとかなりますが，本番環境にデプロイするときは webpack-dev-server が使えないので，そこら辺を考える必要があります．