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

我对于部署前端代码和问题是全新的。 我有一个React应用程序，我需要作为后台进程运行，但是我有点困惑如何做到这一点。 我运行一个npm脚本

npm run build 

在服务器上构build，缩小和服务项目。 构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}`); } }); 

这个工程和项目运行，但是当我closures我的terminal项目停止。 构build过程创build三个文件，

 index.html index.js styles.css 

现在，如果我导航到index.html并在浏览器中打开它，但自然，没有任何显示。 所以我假设我必须将其作为节点进程运行。 如何在生产服务器上执行此操作并将其作为后台进程运行，以便即使退出terminal，应用程序也能继续运行。 我检查了这个问题， 如何使一个node.js应用程序永久运行？

但是这有一个JavaScript文件作为入口点，在我的情况下，这是一个HTML文件。 我不知道如何修改我的脚本以永久运行前端应用程序作为后台进程。 任何帮助赞赏。

Answer 1

您的Javascript文件（ distServer.js ） 是您的入口点 – 它是运行启动您的服务器的文件。 您的HTML文件（ index.html ）仅作为对请求的响应。

babel-node可以开发，但不适合生产。 你可以预先编译你的Javascript文件到vanilla Javascript，然后按照你已经链接到的问题中所描述的那样使用永久或pm2 ，以便在closuresterminal后保持服务器运行。

如何组织你的源文件和编译文件取决于你，但是有一种方法可以做到这一点（引用一个带有Babel的Node服务器的文档 ）：

准备好生产使用

所以我们通过使用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重新编译我们的文件。

噢，别忘了给我们的.gitignore文件添加dist 。

 $ touch .gitignore dist 

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