【gulp】heroku環境のgulp-webserverでbasic認証を設定する

gulp入門2日目です。

デザイナーさんからいただいたgulpプロジェクトのページを誰でも確認できるように、herokuへアップしました。
basic認証を設定したかったのですが、思った以上に（gulp触りたてというのもあるかもしれない…）はまったので、備忘録として。

gulp-webserver

gulp-webserverをインストールします。

$ npm -i --save 

gulp/tasks/webserver.jsを作成し、サーバ起動時のhost、portの設定を記述します。
herokuの場合、ポートが異なるためにアクセスできない状況になりやすいので、process.env.PORTでherokuのポートを取得します。

'use strict';

const gulp = require('gulp');
const webserver = require('gulp-webserver');

gulp.task('webserver', () => {
  gulp.src('dev')
    .pipe(webserver({
      // livereload: true, livereloadを使うときは有効にする
      host: process.env.HOST || 'localhost',
      port: process.env.PORT || 8000
    }))
});

$ npm run start
でサーバを起動できるように、"start": "gulp webserver"をpackage.jsonのscriptsに追加します。

{
  "scripts": {
    "start": "gulp webserver",
    "build": "gulp build"
  }
}

basic-auth

basic-authを利用して、gulp-webserverのmiddlewareにbasic認証を実装します。
まずはインストール。

$ npm -i --save basic-auth

middlewareの認証部分を追加した、webserver.jsの全体像はこちら。

heroku

basic認証のユーザ、パスはherokuの環境変数に設定します。

$ heroku config:set USER=user_name PASS=pass

また、devに保存したモジュールをインストールするための変数、web-serverのHOSTをherokuに追加します。

$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0

herokuでは、deploy -> npm install -> postinstall -> start の流れになるようなので、postinstallでbuildができるようにします。 package.json

{
  "scripts": {
    "postinstall": "gulp build",
    "start": "gulp webserver",
    "build": "gulp build"
  }
}

あとはherokuにプッシュして、見守ります。

余談

久々にherokuを見たのですが、以前はあった制限がなくなっていたりと、簡単なサービスなら十分herokuでも行けるのでは…？と思ったりしました。
実際に稼働しているサービスもありますし。

あとgulp。
最近webpackも触ったりしていたのですが、gulpも楽じゃーんと思ったりして、いまいちこのあたりの違いがまだ見えていなかったりします。
も少しフロントエンドの話題にもついていけるようにしたいなぁと思う今日この頃です。

今回のbasic認証、アクセスの度にURLが一瞬ちらついてしまうのがきになるところですね…もう少し調査が必要そうです…。

参考：

Herokuでgulpのwebserverをそのまま使う
Heroku上でもgulp-webserverを使う
Herokuでgulpのwebserverをそのまま使う
How to use middleware? · Issue #78 · schickling/gulp-webserver · GitHub