Express で静的ページを返す方法

Express のインストール
Express で静的コンテンツを保存するディレクトリ名を指定
Express で静的コンテンツを返す時に仮想ディレクトリ名を指定する方法

Express のインストール

Express を使うとスタティックコンテンツを返す、簡易ウェブサーバーを簡単に作成することができます。

ディレクトリを作成後、node.js プロジェクトを初期化します。

mkdir foo
cd foo
npm init -y

次のコマンドで Express をインストールします。

npm install express

Express で静的コンテンツを保存するディレクトリ名を指定

さっそくコード例として、index.js を次のようにします。

const express = require('express')
const app = express()
app.use(express.static('statics'))
app.listen(3000, () => console.log('Listening on port 3000...'))

次のように statics フォルダを作成し、その中に test1.html と test2.html を作成します。

中身はスタティックコンテンツならなんでもいいですが、とりあえずここでは次のようにしました。

test1.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test1</title>
    <style>body { font-family: sans-serif; }</style>
  </head>
  <body>
    <h1>Page 1</h1>
    <p>Go to <a href="test2.html">Page 2</a>.</p>
  </body>
</html>

test2.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test2</title>
    <style>body { font-family: sans-serif; }</style>
  </head>
  <body>
    <h1>Page 2</h1>
    <p>Back to <a href="test1.html">Page 1</a>.</p>
  </body>
</html>

node.js でスクリプトを開始します。

node index.js
Listening on port 3000...

ブラウザから localhost のポート 3000 番に対して、test1.html を要求すると次のようにページが表示されるはずです。

Page 2 へのリンクをクリックすると確かに次のページにいきます。

以上で、Express を用いてスタティックコンテンツを返すコード例と実行例を示しました。

express.static に誤ったパスを渡している場合、次のエラーが発生することがあります。 (このままのエラーメッセージではなく、表示されるエラーメッセージの一部です）

var opts = Object.create(options || null)
TypeError: Object prototype may only be an Object or null

Express で実行されているウェブサーバーで POST された JSON 形式、あるいはフォームデータを受け取る方法については、「body-parser」も参考にしてください。

Express で静的コンテンツを返す時に仮想ディレクトリ名を指定する方法

上記では statics という名前の実ディレクトリ名で、そのまま静的コンテンツをパブリッシュしています。

もし、この物理パスに対して、仮想ディレクトリ名として public　を割り当てるなら、上記の index.js の 3 行目を次のように指定します。

app.use('/public', express.static('statics'))

これで、上記の test1.html は http://localhost:3000/public/test1.html としてアクセスできます。