9

这个问题不会特别详细，因为这个问题非常基本，并且与 Plesk Onyx 如何实现节点支持的限制有关。

我正在尝试将使用 create-react-app 创建的反应应用程序部署到安装了 Plesk Onyx 的服务器上托管的域。我显然不能乱搞核心服务器，因为我可能会破坏其他域。因此，我需要以 Plesk 正确处理的方式安装此应用程序。我遇到的问题是我没有找到如何在任何地方执行此操作的指南。

Plesk 需要一个非常不灵活的项目结构，它与 create-react-app 强加的结构完全不同。例如，Plesk 要求文档根目录是应用程序根目录的子节点，这与 create-react-app 设置项目的方式完全相反。

我没有在这里显示代码，因为这是一个部署问题，而不是代码问题，并且涉及项目的结构以及如何将圆钉塞入方孔中。

4

3 回答 3

4

我遇到了类似的问题，但我认为我有某种解决方法。我实际上并没有尝试过这是否有效或在 Plesk Onyx 中是否有效。

基本上我想把一个 create-react-app 放到一个基于 plesk onyx 的主机上并运行npm start，最终导致 . react-scripts start，我意识到 Plesk 没有能力做到这一点。Plesk 不是 VPS...

取而代之的是，Plesk 运行一个 js 脚本文件来执行服务器，例如App.jsor server.js，它可以通过 Plesk NodeJS 控制面板进行设置。

为此，我express通过运行安装： npm install express --save 并制作了一个server.js包含以下代码的文件：

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

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

app.listen(process.env.PORT || 8080);

我从这里得到了代码： https ://dev.to/loujaybee/using-create-react-app-with-express

然后我跑去npm run build创建一个生产版本，最后是node server.js. 我的应用程序（react 教程中的一个简单井字游戏）在 localhost 端口 8080 中可用。

根页面

如果我成功了，我会给你一个更新。

于 2018-12-10T08:09:59.337 回答
3

我发现一个非常简单的方法是在不添加 express 或使用节点的情况下做到这一点。这也将react-router起作用。

  1. 将以下.htaccess文件添加到您的public文件夹中的create-react-app文件夹
    选项 - 多视图
    重写引擎开启
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
  1. 跑npm run-script build
  2. 将目录的全部内容 FRPbuild到 Plesk 上的 Linux 服务器
于 2019-07-27T03:45:59.647 回答
1

Valian 的解决方法确实适用于 SPA。但是，如果您使用 react-router 创建多页应用程序，则很容易解决。

您需要添加一个带有通配符的附加 app.get() 以覆盖所有路径。

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
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'));
});

app.listen(process.env.PORT || 8080);
于 2019-07-04T02:21:42.040 回答