Как перенаправить порт для производства React

Question

Я пытаюсь настроить приложения Express.js и React.js на одном сервере Ubuntu.Это VPS, который запускает Plesk Onyx , где у нас много виртуальных хостов, работающих через порт 80.

Для их непрерывной работы я установил и запустил навсегда , затем эти приложения запускаются на портах 3000 и 5000 (например).

Я выполнил команды:

forever start -c "node src/server" ./ -l ./express.log
forever start -c "npm start" ./ -l ./react.log

Ни один из файлов журнала ничего не сохраняет, но это неточка.Оба работают так же, как и в предыдущей командной строке, но в этих портах.

Как перенаправить по крайней мере порт React на 80 для этого единственного приложения?Обычно с PHP должно работать .htaccess, но я не уверен в Nodejs.

Редактировать: Код формы, который отправляется из приложения React через Express (отлично работал с React.js перед сборкой с npm run build:

Компонент React:

sendEmail(evt) {
    evt.preventDefault();
    (async () => {
        let response = await fetch(
            `${window.location.origin}/contacto`,
            options
        );
        let data = await response.json();

        if (!data.success) {
            this.setState(
                Object.assign(this.state, {
                    error: true,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-danger"
                    }
                })
            );
        } else {
            this.setState(
                Object.assign(this.state, {
                    error: false,
                    texto: { error: <p>{data.message}</p> },
                    alert: {
                        visible: true,
                        tipo: "alert-success"
                    }
                })
            );
            document.getElementById("formulario-contacto").reset();
        }
    })();
}

Экспресс-материал:

// Static site init
server.use("/", express.static("build"));

server.post("/contacto", (req, res) => {
  try {
    server.mailer.send(
      "email",
      {
        to: process.env.EMAIL_FROM,
        subject: `Contacto ${req.body.asunto}`,
        body: req.body
      },
      err => {
        if (err) {
          res.send({ success: false, message: err });
        } else {
          res.send({ success: true, message: "Mensaje enviado" });
        }
      }
    );
  } catch (err) {
    res.send({ success: false, message: err });
  }
});   

Answer 1

Я не уверен, что полностью понимаю вопрос, но так как вы используете экспресс, у вас будет вызов app.listen(3000) где-то в вашем index.js.

Вы можете изменить это на 3000или 80 в зависимости от значения process.env.NODE_ENV, для которого будет задано значение «production», «development» или «none».

Answer 2

Похоже, вы захотите изменить то, как вы собираетесь это делать.Вам следует подумать о том, чтобы встроить приложение React в статический вывод, который вы затем используете в приложении / сервере Express.js.

Предполагая, что вы используете create-реагировать-приложение, вы можете запустить команду "build", чтобы создать статический файл.файлы.Затем установите приложение Express.js для обслуживания.См. здесь для получения подробной информации об обслуживании статических файлов и здесь для создания статических файлов для вашего приложения реагирования.

В качестве альтернативы вы также можете использовать webpack или parcel , чтобы создать приложение реагирования, если вы не использовали creat-Reaction-app.

Для получения экспресс на порт 80 вы можете установить переменную порта равной 80 или напрямую установить ее в функции app.listen () app.listen(80)

Answer 3

Предполагается, что вы используете CRA с Facebook.Вы можете создать файл .env в корневой папке проекта и указать в нем PORT=80