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を用いたチャットアプリを動かす記事も書きましたので、もしよかったらチェックしてみてください。