Herokuで静的ファイルに直接アクセスする方法を参考に nulltask/heroku-static-provider を使って環境を整えようとしたのですが、Expressのバージョンを上げるとエラーが出るので注意が必要でした。

Expressのバージョンを上げる

"dependencies"の"express": "~3.3.4"を消して、新しくExpressを入れます。せっかくなんで yarnを使います。

$ yarn add express

その後、node server.jsとすると、エラーが出てしまいます。

エラー概要

Error: Most middleware (like logger) is no longer bundled with Express and must be installed separately.
Please see https://github.com/senchalabs/connect#middleware.

分離されたMiddlewareを使え、ということですね。

新しくパッケージを追加し、server.jsを書き換えます。せっかくなんでES6の記法を使います。

$ yarn add morgan compression serve-static basic-auth-connect

server.js

const express     = require('express');
const app         = express();
const morgan      = require('morgan');
const compression = require('compression');
const serveStatic = require('serve-static');
const basicAuth   = require('basic-auth-connect');

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

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

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

app.use(morgan('dev'));
app.use(compression());
app.use(serveStatic(`${__dirname}/public`));

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

ベーシック認証を使うためにはbasic-auth-connectを読み込まなければならないので、地味に注意する必要があります。これに関しては、分かりやすいエラーが出ません。

さいごに

今回の記事のコードは y-temp4/heroku-static-provider にありますので、再現してみたい方は確認してみてください。

また、今回のコードを使ってHerokuでWebSocketを用いたチャットアプリを動かす記事も書きましたので、もしよかったらチェックしてみてください。

HerokuでExpressとexpress-wsを使ってチャットアプリを動かすサンプル