单击按钮时执行服务器端 shell 脚本

我正在尝试执行驻留在我的服务器中的 shell 脚本。我需要在执行后获取此 shell 脚本的（字符串）结果。但是，只有当我的 ReactJS 应用程序中的某个按钮被按下时，才应该触发此脚本。

我花了相当多的时间寻找答案。到目前为止，所有答案都指向创建 Web 服务，然后让应用程序在单击按钮时调用该服务的想法。但没有一个答案指出这是如何完成的，也没有任何答案指出任何讨论这种方法的文章。 （抱歉，如果这是一个基本方法，但我上个月刚刚从 Udemy 学习了 ReactJS。）

您介意创建一个简单的代码来演示“shell 脚本 Web 服务”和按钮 (onClick) 之间的通信吗？或者至少提供一个讨论这种方法的文章链接？

谢谢你的帮助。

编辑：到目前为止我尝试过的是如何在Javascript中执行shell命令。但评论说这在浏览器上不起作用。我想这是我需要在网络服务中编写的代码？

最后我得到了它。以下是我所做的。

第1步：创建一个page/api/execute.js（适当命名你的文件）

步骤2：将此示例 shell 脚本（ls 命令）放入您的execute.js 中

export default function handler(req, res) {
  const execSync = require('child_process').execSync;
  // import { execSync } from 'child_process';  // replace ^ if using ES modules

  const output = execSync('ls', { encoding: 'utf-8' });  // the default is 'buffer'
  const splitted = output.split(/\r?\n/);  
  const filtered = splitted.filter( e => {
    return e !== '';
  });

  res.status(200).json(JSON.stringify(filtered))
}

第三步：在你的 React 组件中，添加一个带有 onClick 处理程序的按钮，如下所示：

<Button primary onClick={this.execCommand}>Execute Shell Command</Button>

第四步：创建 execCommand 函数：

async execCommand() {
    const req = await fetch("/api/execute");
    const data = await req.json();
    console.log(data);
}

第 5 步：单击按钮并在浏览器控制台上查看输出。

Cheers!