Expressでchild_process出力のハンドリング方法

Question

前提

ExpressでユーザがWebブラウザ操作をしたらサーバ内プログラム（Windows バッチファイル）の出力結果を画面上に表示するシステムを試作しています。
今回はやり方を学ぶためdirコマンドにしていますが、将来的には独自プログラムで処理を行いその結果をWebブラウザで表示することを想定しています。

child_processモジュールにてサーバ上の実行可能ファイルを呼び出せたのですが出力がコンソールにもWebブラウザ側にも表示されません。

実現したいこと

1. http://localhost:3000/dir を実行
2. 画面上にdirコマンドの出力結果が表示される

発生している問題・エラーメッセージ

VSCodeのターミナル上には以下のメッセージしか表示されません。
Web画面

PS C:\dirservice> SET DEBUG=dirservice.* 
& npm start

Id     Name            PSJobTypeName   State         HasMoreData     Location             Command      
--     ----            -------------   -----         -----------     --------             -------      
1      Job1            BackgroundJob   Running       True            localhost            Microsoft.Po…

> dirservice@0.0.0 start C:\dirservice
> node ./bin/www

GET / 304 5280.695 ms - -
GET /stylesheets/style.css 304 2.375 ms - -
GET /favicon.ico 404 18.653 ms - 1582
GET /dir 200 1.494 ms - 8

Webブラウザ

該当のソースコード

Expressジェネレータで作成して、dir.bat、dir.jsを足しています。

PS> npm install express-generator -g
PS> express --view=pug dirservice
PS> cd dirservice
PS> npm install
PS> SET DEBUG=dirservice:* & npm start

フォルダ構成は以下です。

C:\WORK
|   .gitignore
|   
\---dirservice
    |   app.js
    |   dir.txt
    |   package-lock.json
    |   package.json
    |   
    +---bin
    |       dir.bat
    |       www
    |       
    +---node_modules
    |       
    +---public
    |   +---images
    |   +---javascripts
    |   \---stylesheets
    |           style.css
    |           
    +---routes
    |       dir.js
    |       index.js
    |       users.js
    |       
    \---views
            error.pug
            index.pug
            layout.pug

dir.bat

@echo off
dir

dir.js

var express = require('express');
var router = express.Router();
var exec = require('child_process').exec;

/* GET home page. */
router.get('/', function(req, res, next) {
    res.send('GET dir!');
    exec('cmd.exe ../bin/dir.bat', function(error, stdout, stderr) {
        if (error != null) {
            console.log(error);
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
        res.send('stdout: ${stdout}');
        res.send('stderr: ${stderr}');

    });
});

module.exports = router;

app.js、localhost:3000/dir にアクセスしたときdir.jsへルーティングする設定を追加しています。

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var dirRouter = require('./routes/dir');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/dir', dirRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

以下、Expressジェネレータで作成されたまま使用しています。
bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('dirservice:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

error.pug

extends layout

block content
  h1= message
  h2= error.status
  pre #{error.stack}

index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content

index.js

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

users.js

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;

補足情報（FW/ツールのバージョンなど）

PS> node --version
v14.18.1

package.json

{
  "name": "dirservice",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "encoding-japanese": "^2.0.0",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "pug": "2.0.0-beta11"
  }
}

Answer 1

こんな感じでしょうか。ポイントは、

• res.send は 1 回しか呼んではいけません。2 回目以降はエラーになります。
  ('GET dir!' を表示したければ console.log しましょう。)
• cmd.exe に bat ファイルを渡す場合は /c オプションが必要なようです。
  (これがないとコマンド入力待ちになって cmd.exe は終了せず、残りの部分は実行されません。)
• dir.bat の相対パスの起点は dir.js がある場所ではなく、カレントディレクトリ (npm start した場所) になります。
  さらに、パスの区切りは / ではなく \ (文字列中では \\) とする必要があるようです。
  (ついでに言うと、cmd.exe /c なしで 'bin\\dir.bat' だけでも良いみたい。)
• ${stdout} のように文字列中に式を展開したい場合は、シングルクォート ' ではなくバッククォート ` で囲みます。
  また、res.send は 1 回しか使えないので、stdout と stderr はまとめて出力しましょう。
  (あと、何も指定しないと HTML として出力されて表示が崩れるので、Content-Type: text/plain にすると良いかも。)

// dir.js
router.get('/', function(req, res, next) {
    exec('cmd.exe /c bin\\dir.bat', function(error, stdout, stderr) {
        if (error != null) {
            console.log(error);
        }
        console.log(`stdout: ${stdout}`);
        console.log(`stderr: ${stderr}`);
        res.set('Content-Type', 'text/plain');
        res.send(`stdout: ${stdout}\nstderr: ${stderr}`);
    });
});

Comments

[S.Nakagawa255]

ポイントを分かりやすくありがとうございます！
おかげさまで次のステップに進めそうです！！