JSON Serverで静的ファイル(画像, CSV等)を配信する方法

JSON Serverで静的ファイルを配信する方法

はじめに

JSON ServerでCSVファイルや画像ファイルを配信しようとして、ちょっと苦戦したのでまとめておく。
JSON Serverではpublicディレクトリに配置したものを配信することができるが、
デフォルトではルートディレクトリに存在するpublicディレクトリを参照してしまうため、
ルートディレクトリ以外にpublicディレクトリを配置したい場合、これを変更する必要がある。

静的ファイルを配置するデフォルトディレクトリを変更する方法

JSON Serverをモジュールとして使用し、
以下のようにjsonServer.defaults()のオプションを指定することで、
静的ファイルのデフォルトディレクトリを変更することができる。
JSON Serverをモジュールとして使用する方法については過去記事を参考にしてほしい。

server.js

server.use(jsonServer.defaults({static: ${配置したいパス}}))

具体的な例として、以下のように静的ファイルを配置した場合、

mock
├── public
│   └── img
│       └── hogehoge.jpg
└── server.js

server.js

const jsonServer = require("json-server")
const server = jsonServer.create()
const middlewares = jsonServer.defaults({static: `${__dirname}/public`})
const port = 3000

server.use(middlewares)

// モックサーバ起動
server.listen(port, () => {
  console.log(`JSON Server is running in localhost:${port}`)
})

とすれば、http://localhost:3000/img/hogehoge.jpgでアクセスすることができる。