💡

Expressで静的ファイルを返却するローカルサーバを立てる

2021/04/26に公開

JavaScript

概要

今回は検証用にローカルサーバを立てて、静的なXMLファイルを返すコードのサンプルを紹介します。
サーバサイドからファイルを読み込むような機能全般の検証(モックサーバを立てる)に使えるため、実務でよく使っている内容になります。

過去記事ですが、json-serverでモックサーバを立てたこともあります。

前提

本番環境と開発環境があり、それぞれtest1.xmlとtest2.xmlがある
/xml/dev/test1.xmlに対しては開発環境用のXMLを返却
/xml/product/test2.xmlに対しては本番環境用のXMLを返却
今後同様のXMLや他ファイルが増えた時ようにある程度拡張しやすい作りにしたい
Nodeはインストール済み

インストール

おなじみexpressを使います。

yarn add express

ディレクトリ構造

ディレクトリ構造を先に記します。
以降基本的にはserver.jsをいじっていきます。
devが開発用、productが本番用のファイルが格納されている想定です。

.
├── server.js
├── dev
│   ├── test1.xml
│   └── test2.xml
└── product
    ├── test1.xml
    └── test2.xml

以下server.jsです。

server.js

var express = require("express");
var path = require("path");
var app = express();

// 開発環境のエンドポイント基底
const devPath = "/xml/dev";
// 本番環境のエンドポイント基底
const productPath = "/xml/product";

// 開発環境用ファイルパス
const __devDir = "/dev";
// 本番環境用ファイルパス
const __productDir = "/product";

var server = app.listen("3000", function () {
  console.log("Listening to PORT --> " + server.address().port);
});

// dev/test1.xml
app.get(`${devPath}/test1`, function (req, res, next) {
  res.contentType("application/xml");
  res.sendFile(path.join(__dirname, `${__devDir}/test1.xml`));
});

// dev/test2.xml
app.get(`${devPath}/test2`, function (req, res, next) {
  res.contentType("application/xml");
  res.sendFile(path.join(__dirname, `${__devDir}/test2.xml`));
});

// product/test1.xml
app.get(`${productPath}/test1`, function (req, res, next) {
  res.contentType("application/xml");
  res.sendFile(path.join(__dirname, `${__productDir}/test1.xml`));
});

// product/test2.xml
app.get(`${productPath}/test2`, function (req, res, next) {
  res.contentType("application/xml");
  res.sendFile(path.join(__dirname, `${__productDir}/test2.xml`));
});

起動

ここまで作成したら、以下コマンドで起動します。

node server.js

これでlocalhost:3000/xml/dev/test1のようにアクセスすると、目的のファイルが返ります。

まとめ

今回はexporessを使った任意の静的ファイルを返してくれるローカルサーバの立て方について紹介しました。
サーバ側のファイルに細かい修正が入る際に、手元でちょこちょこ直しながら検証ができるので地味に重宝するなぁという内容です。

この内容が役立ちましたら幸いです。

概要

前提

インストール

ディレクトリ構造

起動

まとめ

Discussion