Как развернуть React Frontend + Node Backend на производственном сервере? - PullRequest
Новая
       27

Как развернуть React Frontend + Node Backend на производственном сервере?

0 голосов
/ 11 июня 2019

Впервые я работаю над темой React Frontend с Node Backend. Сейчас у меня небольшая проблема, и я потратил много времени на поиски решения, но безуспешно.

Я разработал контактную форму с react.js и antd в качестве компонента дизайна и проверки входных данных во внешнем интерфейсе. Для серверной части я использую узлы express, cors и axios для выполнения веб-запросов. В качестве менеджера пакетов я использую yarn.

Эта контактная форма находится в общедоступном репозитории GitHub: https://github.com/philippbck/react-nodemailer

Ниже вы можете найти мой package.json со всеми использованными зависимостями: 

 {
  "name": "react-nodemailer",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "antd": "^3.19.1",
    "axios": "^0.19.0",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "espress": "^0.0.0",
    "nodemailer": "^6.2.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Эта контактная форма прекрасно работает на моем компьютере, но теперь я хочу развернуть ее на своем производственном облачном сервере с CentOS7 и Apache Webserver. Но моя проблема в том, как? Насколько я понимаю, я создаю производственную сборку для реагирующей части интерфейса с yarn run build и помещаю все файлы из папки сборки в папку htdocs на моем сервере. А для внутреннего файла app.js, расположенного в корневом каталоге моего проекта, я создал корневую папку на моем сервере с именем /apps. И я запустил службу узла вручную с помощью приложения узла на сервере.

Когда я открываю свой веб-сайт с помощью контактной формы и нажимаю кнопку отправки, возникает следующая ошибка: 

xhr.js:166 OPTIONS http://localhost:5000/send net::ERR_CONNECTION_REFUSED

У меня вопрос, как я могу развернуть свою контактную форму на рабочем сервере, чтобы она проснулась? Я не хочу использовать серверные решения для этого случая. Большое спасибо!

UPDATE:

После изменения аксиос-адреса POST с «localhost» на производственный URL-адрес «philipp-buck.de» теперь возникает следующая ошибка: 

OPTIONS https://philipp-buck.de:5000/send net::ERR_CONNECTION_TIMED_OUT

Ответы [ 3 ]

2 голосов
/ 12 июня 2019

Contactform.js имеет внутренний URL-адрес для жестко запрограммированного. localhot: 5000 [https://github.com/philippbck/react-nodemailer/blob/master/src/contactform.js#L45]

Ваш производственный интерфейс должен указывать на производственный сервер.

1 голос
/ 13 июня 2019

вы должны ответить на ваш HTML 

   // in the beginning of app
    app.use(express.static('public'));

   // ...your code

    // serves frontend application
    app.get('/*', (req, res) => {
        res.sendFile(path.resolve('public/index.html'), { root: __dirname }, err => {
            if (err) {
                res.status(500).send(err);
            }
        });
    });
1 голос
/ 12 июня 2019

Вы должны депонировать на Производство по pm2

Вы включаете cors в Back-end или используете прокси в Front-end?

...