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

Question

我完全不熟悉部署前端代码，因此对这个问题一无所知。 我有一个 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 进程运行。我如何在生产服务器上执行此操作并将其作为后台进程运行，这样即使我退出终端，应用程序仍会继续运行。 我检查过这个问题， How to make a node.js application run permanently?

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

Answer 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 ):

Getting ready for production use

So we've cheated a little bit by using babel-node. While this is great for getting something going. It's not a good idea to use it in production.

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

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

$ mv index.js lib/index.js

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

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

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

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

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

$ touch .gitignore

dist

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