将 React 应用程序作为后台进程运行

Posted 2023-02-26

【中文标题】将 React 应用程序作为后台进程运行

【英文标题】：Running a React app as a background process

【发布时间】：2017-04-14 23:11:47

【问题描述】：

我对部署前端代码和问题完全陌生。 我有一个需要作为后台进程运行的 React 应用程序，但是我对如何执行此操作有点困惑。 我运行一个 npm 脚本

npm run build

在服务器上构建、缩小和提供项目。 构建过程的相关代码是这样的。

"prebuild": "npm-run-all clean-dist test lint build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"

这是 distServer.js 里面的代码

import express from 'express';
import path from 'path';
import open from 'open';
import compression from 'compression';


const port = 3000;
const app = express();

app.use(compression());
app.use(express.static('dist'));

app.get('*', function(req, res)
  res.sendFile(path.join(__dirname, '../dist/index.html'));
);

app.listen(port, function(err)
  if(err)
    console.log(err);
  else
    open(`http://localhost:$port`);
  
);

这有效并且项目运行，但是当我关闭终端时项目停止。 构建过程创建，三个文件，

index.html
index.js
styles.css

现在，如果我导航到 index.html 并在浏览器中打开它，但很自然，什么都没有显示。所以我假设我必须将它作为节点进程运行。如何在生产服务器上执行此操作并将其作为后台进程运行，以便即使我退出终端，应用程序仍可继续运行。 这个问题我查过了 How to make a node.js application run permanently?

但这有一个 javascript 文件作为入口点，在我的例子中它是一个 html 文件。我不确定如何修改我的脚本以将前端应用程序永久作为后台进程运行。任何帮助表示赞赏。

【问题讨论】：

至少对于开发而言，“后台进程”也可以只是终端模拟器中的另一个选项卡，它并不总是需要是与 init 系统一起设置的守护进程。显然你需要它来做产品，但是......

【参考方案1】：

您的 Javascript 文件 (distServer.js)是您的入口点——它是您运行以启动服务器的文件。您的 HTML 文件 (index.html) 仅用作对请求的响应。

babel-node 可以用于开发，但不适合生产。您可以将您的 Javascript 文件预编译为 vanilla Javascript，然后使用 forever 或 pm2（如 question you already linked to 中所述），以便即使在您关闭终端后也能保持服务器运行。

如何组织源文件和编译文件取决于您，但这里有一种方法（引用自documentation for an example Node server with Babel）：

为生产使用做好准备

所以我们使用babel-node 有点作弊。虽然这是 非常适合做一些事情。使用它不是一个好主意 生产。

我们应该预编译您的文件，所以现在就开始吧。

首先让我们将服务器index.js文件移动到lib/index.js。

$ mv index.js lib/index.js

并更新我们的npm start 脚本以反映位置变化。

  "scripts": 
-   "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
+   "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2"
  

接下来让我们添加两个新任务npm run build 和npm run serve。

  "scripts": 
    "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
+   "build": "babel lib -d dist --presets es2015,stage-2",
+   "serve": "node dist/index.js"
  

现在我们可以使用npm run build 预编译我们的资产，并使用npm run serve 在生产环境中启动我们的服务器。

$ npm run build
$ npm run serve

这意味着我们可以快速重启我们的服务器而无需等待 babel 重新编译我们的文件。

别忘了将dist 添加到我们的.gitignore 文件中。

$ touch .gitignore

dist

这将确保我们不会意外地将我们构建的文件提交到 混帐。

【讨论】：

经过一番努力，我想出了类似的东西，问题是我似乎无法在 linux 上安装 babel-node。我在使用 mac 时在开发中使用了 babel-node，它似乎可以工作，但看起来它在 linux 上不起作用。有没有绕过它？

@StochasticNerd 您的依赖项中有 babel-cli npm 包并已安装，对吧？