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
varexpress=require('express');varapp=express();varuser=process.env.USER;varpass=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 アプリ名でアプリ名を指定することもできます。