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

问题描述

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

I'm completely new to deploying front-end code and thus the question.I have a React App which I need to run as a background process, however I'm a little confused about the how to do this.I run a npm script

npm run build

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

to build, minify and serve the project on a server.The relevant code for the build process is this.

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

这是distServer.js中的代码

This is the code inside the 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}`);
  }
});

这项工作和项目运行，但是当我关闭终端时项目停止。
构建过程创建三个文件

This works and the project runs, however the moment I close my terminal the project stops.The build process creates, three files,

index.html
index.js
styles.css

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

Now if I navigate to the index.html and open it in a browser, but naturally, nothing shows up. So I'm assuming that I'd have to run it as a node process. How do I do this on the production server and run it as a background process so that even if I exit the terminal the app continues to run.I have checked this issue,How to make a node.js application run permanently?

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

But this has a javascript file as the entry point, in my case it's a html file. I'm not sure how can I modify my scripts to run the front-end app permanently as a background process. Any help appreciated.

推荐答案

您的Javascript文件（ distServer.js ） 是您的入口点 - 它是您启动服务器时运行的文件。您的HTML文件（ index.html ）仅用作对请求的回复。

Your Javascript file (distServer.js) is your entry point – it's the file that you run to start your server. Your HTML file (index.html) is only served as a response to the requests.

babel-node 可以用于开发，但它不适合生产。您可以将您的Javascript文件预编译为vanilla Javascript，然后使用或，如的问题，以便在关闭终端后保持服务器运行。

babel-node is OK for development, but it's not suitable for production. You can precompile your Javascript files to vanilla Javascript, then use forever or pm2 as described in the question you already linked to in order to keep the server running even after you close your terminal.

如何你组织你的源文件和编译文件取决于你，但这是一种方法（引用）：

How you organize your source files and compiled files is up to you, but here's one way to do it (quote from the documentation for an example Node server with Babel):

我们应该预编译你的文件，所以我们现在就这样做。

We should be precompiling your files, so let's do that now.

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

First let's move our server index.js file to lib/index.js.

$ mv index.js lib/index.js

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

And update our npm start script to reflect the location change.

  "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 。

Next let's add two new tasks npm run build and 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运行服务用于在生产中启动我们的服务器。

Now we can use npm run build for precompiling our assets, and npm run serve for starting our server in production.

$ npm run build
$ npm run serve

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

This means we can quickly restart our server without waiting for babel to recompile our files.

哦，不要忘记添加 dist 到我们的 .gitignore 文件。

Oh let's not forget to add dist to our .gitignore file.

$ touch .gitignore

dist

这将确保我们不小心将我们构建的文件提交到
git。

This will make sure we don't accidentally commit our built files to git.

这篇关于运行React应用程序作为后台进程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！