Разверните приложение create-реакции-приложение в Plesk Onyx

Question

Хорошо - это не будет особенно загружено деталями, потому что проблема очень проста и касается ограничений в том, как Plesk Onyx реализует поддержку Node.

Я пытаюсь развернуть реагирующее приложение, созданное с помощью create-Reaction-app, в домене, размещенном на сервере с установленным Plesk Onyx. Я, очевидно, не могу возиться с главным сервером, потому что я могу взломать другие домены. Поэтому мне нужно установить это приложение так, чтобы Plesk правильно его обрабатывал. Проблема в том, что я нигде не нахожу руководство, как это сделать.

Plesk требует структуры проекта, которая на самом деле довольно негибкая, и это не что иное, как структура, навязанная create-реагировать-приложение. Например, Plesk требует, чтобы корень документа был дочерним по отношению к корню приложения, что полностью противоположно тому, как create-реагировать-приложение настраивает проект.

На данный момент, я просто надеюсь, что кто-то, возможно, имел некоторый опыт, пытаясь развернуть проект, управляемый созданием приложения, в Plesk Onyx, и может предоставить указатели здесь.

Пожалуйста, не отрицайте это из-за отсутствия примеров кода и т. Д. - это проблема развертывания, а не проблема кода и включает структуру проектов и то, как протолкнуть круглый колышек в квадратную дыру.

Answer 1

У меня была похожая проблема, но я думаю, что у меня есть какой-то обходной путь. Я на самом деле не пробовал, работает ли он в Plesk Onyx или нет.

По сути, я хотел поместить приложение create-реагировать на хостинг на основе 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, Мое приложение (простая игра в крестики-нолики из учебного пособия по реакции) доступно на локальном порту 8080.

Корневая страница

Я дам вам обновление, если мне это удастся.

Answer 2

Этот поток немного староват, но я обнаружил, что действительно легко сделать это без добавления Express или использования узла. Это также сделает react-router работай.

1. Добавьте следующее .htaccess подать в ваш public папка в вашем create-react-app папка

    Опции -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME}!-F
    RewriteRule ^ index.html [QSA,L]

2. Бегать npm run-script build
3. FRP все содержимое build каталог на ваш сервер Linux на Plesk

Answer 3

моя работа по этой проблеме

1. загрузите свой код.

2. запустить установку Npm

3. запустите это из опции запуска-скрипта:

   строить

4. после этого установите корневой каталог документа на http://your-URL.com/build следующим образом.

это сработало для меня.

Answer 4

Обходной путь Валиана действительно работает для SPA. Однако, если вы используете реакции-маршрутизатор для создания многостраничного приложения, это легко исправить.

Вам нужно добавить дополнительный 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);