Herokuでgulpのwebserverをそのまま使う #Heroku

自分でサクッとherokuで一旦公開したいときに
いつも迷うのでメモしておこうと思います。

Herokuでアプリを作っている、Herokuにpcからログインできる状態を前提にしています。

GitHubに上げている場合は「Deploy」
「App connected to GitHub」からリポジトリを選択して下さい。

herokuにログイン

ログアウト

heroku logout
Local credentials cleared.

herokuのアプリのHOSTを変更

heroku config:set --app <アプリ名> HOST=0.0.0.0

pagekage.jsonのdevDependenciesをインストールするために

heroku config:set NPM_CONFIG_PRODUCTION=false

package.jsonのscripts

priinstallでbuildするようにする。
startでサーバーを起動する

"scripts": {
    "postinstall": "$(npm bin)/gulp build --minify=true",
    "start": "$(npm bin)/gulp webserver",
},

基本的にはdeployされるとnpminstallされそのあとにpostinstallが走り
終わったらstartが実行されるという流れのようです。

gulpのserverの設定を変更する

gulp.task('webserver', () => {
    connect.server({
        root: config.dest,
        livereload: true,
        host: process.env.HOST || 'localhost',
        port: process.env.PORT || 8000
    });
});

もろもろ設定が終わったら

herokuの「Manual deploy」より「Deploy Branch」を押して現在のリポジトリをデプロイしましょう。

Herokuでgulpのwebserverをそのまま使う