將 create-react-app 部署到 Plesk Onyx

Question

這個問題不會特別詳細，因為這個問題非常基本，並且與 Plesk Onyx 如何實現節點支持的限制有關。

我正在嘗試將使用 create-react-app 創建的 react 應用程序部署到安裝了 Plesk Onyx 的服務器上托管的域。 我顯然不能亂搞核心服務器，因為我可能會破壞其他域。 因此，我需要以 Plesk 正確處理的方式安裝此應用程序。 我遇到的問題是我沒有找到如何在任何地方執行此操作的指南。

Plesk 需要一個非常不靈活的項目結構，它與 create-react-app 強加的結構完全不同。 例如，Plesk 要求文檔根目錄是應用程序根目錄的子節點，這與 create-react-app 設置項目的方式完全相反。

我沒有在這里顯示代碼，因為這是部署問題，而不是代碼問題，並且涉及項目的結構以及如何將圓釘塞入方孔中。

Answer 1

我遇到了類似的問題，但我想我有某種解決方法。 我還沒有真正嘗試過這是否有效，或者在 Plesk Onyx 中是否有效。

基本上，我想將 create-react-app 放到基於 plesk onyx 的托管並運行npm start最終導致react-scripts start ，我意識到 Plesk 沒有能力做到這一點。 Plesk 不是 VPS...

相反，Plesk 運行一個 js 腳本文件來執行服務器，如App.js或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 教程的簡單井字游戲）在本地主機端口 8080 中可用。

根頁面

如果我成功了，我會給你一個更新。

Answer 2

我發現一個非常簡單的方法是在不添加 express 或使用 node.js 的情況下做到這一點。 這也將使react-router工作。

1. 將以下.htaccess文件添加到create-react-app文件夾中的public文件夾中

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

2. 運行npm run-script build
3. 將build目錄的全部內容 FRP 到您在 Plesk 上的 Linux 服務器

Answer 3

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

Answer 4

我解決這個問題的方法是

1. 上傳您的代碼。

2. 運行 Npm 安裝

3. 從運行腳本選項運行它：

   建造

4. 之后將您的文檔根設置為http://your-URL.com/build像這樣

這對我有用。