LoginSignup
1

More than 5 years have passed since last update.

Herokuで静的ファイルにNode.js経由 ( Express4.x系 ) でアクセスする時の注意点

Last updated at Posted at 2016-12-10

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を使ってチャットアプリを動かすサンプル

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1