Как я могу развернуть серверную часть Node J и клиентскую часть React J на ​​сервере? - PullRequest
Новая
       35

Как я могу развернуть серверную часть Node J и клиентскую часть React J на ​​сервере?

0 голосов
/ 11 января 2019

Я создал серверную часть, используя Node Express, которая работает на port 5000. И мой интерфейс использует React Js, который работает на port 3000. И оба они находятся в разных папках в корневом каталоге.

Я хочу загрузить оба из них и развернуть на цифровом сервере Ocean. Я новичок в этом процессе отдела. Как я могу развернуть их на сервере и запустить одной командой, пожалуйста

Ответы [ 3 ]

0 голосов
/ 11 января 2019

Вы можете выполнить рендеринг вашего приложения реакции на сервере с вашего Node.js / Express, я думаю, что в настоящее время вы используете webpack для рендеринга вашего приложения реакции на порт 3000. Если вы можете загрузить свой код для просмотра, вам будет проще помощь

0 голосов
/ 11 января 2019

Вот один из способов сделать это (использовать сервер узлов в качестве API для веб-сайта React, обслуживаемого сервером Apache).

Вы можете оставить nodejs работающим на порту 5000 (на удаленном сервере), но убедитесь, что вы используете не localhost, а 0.0.0.0.

есть. app.listen(5000, "0.0.0.0");

Теперь вы должны иметь возможность общаться с сервером узла через публичное имя IP / DNS на этом порту, т.е. myPublicIpOrDNSname: 5000 . (при условии, что вы установили nodejs, а также npm =>, будьте осторожны с версией, apt-get install nodejs по умолчанию выберет более старую версию)

Если вам нужна более новая версия nodejs, вы можете получить ее, выполнив следующие действия (вы можете заменить эту деталь setup_8.x предпочитаемой версией). 

cd ~
curl -sL https://deb.nodesource.com/setup_8.x -o nodesource_setup.sh
sudo bash nodesource_setup.sh
sudo apt-get install nodejs

Используйте сервер Apache2 для обслуживания ваших статических (React, css, ...) файлов (вам не нужно запускать create-react-app server). 

sudo apt-get update
sudo apt-get install apache2

Создайте свой проект React, используя npm run build, а затем поместите файлы, созданные в папке /build (в папке React), на /var/www/html (на удаленном сервере). Обратите внимание, что вам нужно поместить туда файлы и папки из папки /build, а не из самой папки /build.

Теперь вы можете видеть, как работает ваш реагирующий веб-сайт, когда вы вводите адрес myPublicIpOrDNSname (при условии, что Apache работает sudo systemctl start apache2).

Для правильной работы Apache (если вы используете интерфейсную маршрутизацию - т.е. react-router-dom), вам нужно перейти на /etc/apache2/sites-enabled/000-default.conf и поместить эту конфигурацию 

<Directory "/var/www/html">
    RewriteEngine on
    # Don't rewrite files or directories
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    # Rewrite everything else to index.html to allow html5 state links
    RewriteRule ^ index.html [L]
</Directory>

в разделе <VirtualHost ...> в этом файле. (Apache не знает о ваших маршрутах React. Это заставит его отправлять каждый запрос, который он не знает, как обработать в корень, и оставить React обрабатывать маршрутизацию)

Затем необходимо убедиться, что RewriteEngine работает (в противном случае вы получите сообщение об ошибке при перезапуске сервера Apache).

sudo a2enmod rewrite

Наконец, перезапустите сервер Apache

sudo /etc/init.d/apache2 restart

Теперь все должно работать.

Обратите внимание, что вам нужно изменить ваши вызовы ajax в вашем React с новым публичным IP / DNS.

0 голосов
/ 11 января 2019

Если ваш интерфейс - это приложение для создания реагирования, вы можете выполнить npm run build и обслуживать статические ресурсы в nodejs через nodejs на том же сервере. Это будет служить уменьшенным кускам.

app.use(express.static(path.join(__dirname, '../client/build')));

...