Plesk/React/Express - 起点是 (React) index.html。但是我不能做后端请求

Question

自从我做了更多研究后进行了大编辑

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

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

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

问题是，我无法再表达app.js，因为反应的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('/*', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', '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', resultRouter);
app.use(express.static(path.join(__dirname, 'build')));

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

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

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

// error handler
app.use(function (err, req, res, 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 中的构建文件夹插入其中。所以app.js和build文件夹在同级目录下

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

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

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

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

提前致谢

Answer 1

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

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

2 种获取 react/express 运行ning on Plesk 的方法

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

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

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

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

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

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

与解决方案 1 一样，创建构建文件夹并将其移动到 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('*', function (req, res) {
  res.sendFile(path.resolve(__dirname, 'build', 'index.html'));
});

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

疑难解答

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

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

Plesk/React/Express - 起点是 (React) index.html。但是我不能做后端请求

Plesk/React/Express - Starting point is (React) index.html. But I can't do a backend request

reactjs

express

plesk

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

2 种获取 react/express 运行ning on Plesk 的方法

疑难解答