Plesk/React/Express - 起点是 (React) index.html但我无法执行后端请求 在 Plesk 上运行 react/express 的两种方法问题排查

如何解决Plesk/React/Express - 起点是 (React) index.html但我无法执行后端请求 在 Plesk 上运行 react/express 的两种方法问题排查

自从我进行了更多研究后进行了重大修改

我正在尝试使用 Plesk 在云服务器上部署我的第一个 Nodejs/React 应用程序。

这就是我首先尝试的： 我创建了一个包含以下内容的 .httaccess 文件。

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

问题是，我无法再访问 express app.js，因为 react 的 index.html 文件可以处理所有内容。因此，另一种方法是从 express 中相应地从 app.js 中路由出来。我找到了以下方法并尝试实施它。

方法：

/api/app.js
app.use('/result',resultRouter);
app.use(express.static(path.join(__dirname,'build')));

app.get('/',function (req,res) {
  res.sendFile(path.join(__dirname,'build','index.html'));
});

app.get('/*','index.html'));
});

我的实现：

var createError = require('http-errors');
var express = require('express');
const cors = require('cors');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
require('dotenv').config();
var helmet = require('helmet');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var resultRouter = require('./routes/result');

var app = express();
app.use(helmet());
app.use(cors());
app.use((req,res,next) => {
  res.header('Access-Control-Allow-Origin','http://localhost:3000');
  next();
});

//Set up mongoose connection
var mongoose = require('mongoose');
var mongoDB = 'MYMONGODBURL';
mongoose.connect(mongoDB,{ useNewUrlParser: true,useUnifiedTopology: true });
var db = mongoose.connection;
db.on('error',console.error.bind(console,'MongoDB connection error:'));

// view engine setup
app.set('views',path.join(__dirname,'views'));
app.set('view engine','ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());

app.use('/result',res) {
  res.sendFile(path.resolve(__dirname,'index.html'));
});

app.get('*','index.html'));
});

// catch 404 and forward to error handler
app.use(function (req,next) {
  next(createError(404));
});

// error handler
app.use(function (err,req,next) {
  // set locals,only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

虽然我确信这通常是正确的解决方案，但我未能实现它。 app.js 文件位于 api 文件夹中。在将它上传到 Plesk 之前，我从 react 中插入了 build 文件夹。因此 app.js 和 build 文件夹位于目录的同一级别。

通过 git 上传后，我将文档根目录和应用程序根目录都设置为 configurator/api。 Configurator只是我事先设置的一个空文件夹。

如果我将文档根设置为 configurator/api/build，我的 react index.html 文件的起始页就会显示出来。但是路由到任何其他 React 组件都不起作用。

我在这里做错了什么？我也启用了“browsing for a domain”，但仍然收到 504 网关超时错误。

我希望有人能指出我正确的方向，或者对我接下来应该看的地方有一些意见。

提前致谢

解决方法

找到了解决我的问题的方法。

所以我知道我的问题是真正的初学者级别，事后看来，我没有提供足够的信息来帮助我。但是我找到了一个解决方案，希望可以帮助其他陷入困境的初学者。所以我写信来分享我在这个过程中学到的东西并反思它。

在 Plesk 上运行 react/express 的两种方法

基本上有两种方法可以让 react/express 在 Plesk 上运行。这两种解决方案都是可行的，但要解决不同的先决条件。

解决方案 1：您想通过 react 呈现静态站点，该站点不对 nodejs 执行任何后端请求。

在这种情况下，您在 react-folder 中运行 ǹpm run build 并将新创建的 build 文件夹放在 express 文件夹中。在 build 文件夹中，创建一个 .htaccess 文件，内容如下：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

我认为这样做，您甚至不需要 nodejs。但我没试过。反正。通过 git 将文件夹（我们称之为 api）上传到 Plesk 并将文档根设置为 api/build，而应用程序根只是 api。

解决方案 2：您想要呈现静态反应，但您在任何时候执行后端请求以表达某些业务逻辑或数据库请求。

与解决方案 1 一样，创建 build 文件夹并将其移动到 api 文件夹中。 build 文件夹是您在 React 中为您的应用程序最终工作所需的一切。在 api 文件夹中，在根级别创建一个新的 Javascript 文件。将其命名为 server.js。里面放如下代码：

const app = require('./app');
const http = require('http');

http.createServer(app).listen(process.env.PORT);

据我所知，这首先会启动您的服务器，否则您将收到 504 超时错误。

其次，你需要告诉 nodejs，它会重定向到 react 的 index.html 文件，每当你遇到一个路由，这在 express 中没有定义。为此，请打开您的 app.js 文件。转到最后一条快速路线下方并插入以下内容：

app.use('/result',resultRouter); 
// ^ above is the last route of my express app. 
// below tells your server to redirect all other routes to index.html from React
app.use(express.static(path.join(__dirname,'build')));

app.get('/',function (req,res) {
  res.sendFile(path.resolve(__dirname,'build','index.html'));
});

app.get('*','index.html'));
});

修改并上传到 Plesk 后，将 Plesk-Nodejs 应用程序中的文档根目录和应用程序根目录设置为 api（或任何您的根文件夹）。然后，将应用程序启动文件设置为server.js。现在一切正常。

问题排查

这里是我在路上遇到的一些障碍，你也可能会遇到。

• 内容安全策略错误：在使用解决方案 2 成功设置所有内容后，我遇到了内容安全策略错误。这是因为我在 express-app 中使用了中间件头盔。将头盔注释掉以测试是否是问题所在。如果是，则有多种方法可以正确设置 Helmet。你真的不需要禁用它。
• CORS 错误： 我的后端请求失败，同源策略受到损害。这是因为从 react 到 express 的 axios 请求仍然引用 localhost。将 React 中的所有 axios 请求 url 替换为您的生产域中的正确 url。