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

IT技术 javascript node.js linux reactjs npm
2021-05-04 00:13:33

我对部署前端代码和问题完全陌生。我有一个需要作为后台进程运行的 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 并在浏览器中打开它,但很自然地,什么也没有显示。所以我假设我必须将它作为节点进程运行。我如何在生产服务器上执行此操作并将其作为后台进程运行,以便即使我退出终端应用程序继续运行。我已经检查过这个问题, 如何使 node.js 应用程序永久运行?

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

1个回答

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

babel-node适合开发,但不适合生产。您可以将您的 Javascript 文件预编译为 vanilla Javascript,然后按照您已经链接到问题中的描述使用永远pm2,以便即使在您关闭终端后也能保持服务器运行。

如何组织源文件和编译文件取决于您,但这是一种方法(引用自文档中的示例 Node 服务器与 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 buildnpm 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

这将确保我们不会意外地将构建的文件提交给 git。