将create-react-app部署到Plesk Onyx

时间:2018-07-08 03:03:56

标签: reactjs create-react-app plesk-onyx

好的-这不会特别详细,因为问题是非常基本的,并且与Plesk Onyx实施Node支持的方式有关。

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

Plesk所需要的项目结构实际上非常不灵活,并且与create-react-app所施加的结构完全不同。例如,Plesk要求文档根是应用程序根的子级,这与create-react-app设置项目的方式完全相反。

在这一点上,我只是希望那里的某人可能有一些尝试将创建创建应用程序驱动的项目部署到Plesk Onyx的经验,并且可以在此处提供指针。

请不要因为缺少代码示例等而对此表示反对。这是一个部署问题,而不是代码问题,涉及项目的结构以及如何将圆钉钉入方孔。

3 个答案:

答案 0 :(得分:1)

我遇到了类似的问题,但我认为我有某种解决方法。我实际上还没有尝试过是否可行,或者是否在Plesk Onyx中使用。

基本上,我想将一个create-react-app放入基于plesk onyx的托管并运行npm start,最终导致react-scripts start,我意识到Plesk没有能力那。 Plesk不是VPS ...

相反,Plesk运行js脚本文件来执行服务器,例如App.jsserver.js,可以通过Plesk NodeJS控制面板进行设置。

为此,我通过运行以下命令安装了expressnpm 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教程中的一个简单的井字游戏)在本地主机端口8080中可用。

The root page

如果我能成功的话,我会给你更新。

答案 1 :(得分:0)

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);

答案 2 :(得分:0)

该线程有点旧,但是我发现不添加express或使用node来执行此操作确实很容易。这也将使react-router正常工作。

  1. 将以下.htaccess文件添加到public文件夹中的create-react-app文件夹中
    Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]
  1. 运行npm run-script build
  2. build目录的全部内容FRP到Plesk上的Linux服务器上