タスクランナーで作ったサイトをHerokuでデプロイする

npm-scriptsやgulpで静的サイトを作った際にHerokuをテストサーバにしたい時の手順です。

前提

npm-scriptsやgulpで静的サイトを作った場合、管理の都合で、静的サイトはgitigoreしていることが多いと思います。
同じリポジトリのまま、Herokuへデプロイする手順です。

手順

(1) Heroku上でnodeでサーバを立ち上げるファイルを作る

# Procfileを作る
echo 'web: node server' >> Procfile

# expressをインストール
npm i express

# server.jsを作成する
touch server.js

(2) Herokuでサーバーを立ち上げるserver.jsを編集

server.js

var express = require('express');
var app = express();

var user = process.env.USER;
var pass = process.env.PASS;

app.set('port', process.env.PORT || 3000);

if (user && pass) {
  app.use(express.basicAuth(user, pass));
}

app.use(express.logger('dev'));
app.use(express.compress());
app.use(express.static(__dirname + '/dist'));

app.listen(app.get('port'), function() {
  console.log('Server listening on port %s', app.get('port'));
});

/dist をルートディレクリとしてサイトを作成している想定です。必要に応じて編集してください。

(3) package.jsonへheroku環境でサイトをビルドするスクリプトを入力

package.json

{
  "scripts": {
    "postinstall": "gulp build" 
  }
}

Heroku上でpackageのインストールが完了したあとにpostinstallが実行されます。
postinstallにはサイトをビルドするスクリプトを記入してください。

(4) デプロイする

# アプリーケーション
heroku create

# デプロイ
git push heroku master

# アプリケーションを開く
heroku open

heroku create アプリ名でアプリ名を指定することもできます。