时间戳

首页 > 解决方案 > 如何在服务器上部署 Node Js 后端和 React Js 前端？

node.js - 如何在服务器上部署 Node Js 后端和 React Js 前端？

问题描述

我使用运行在port 5000. 我的前端使用的是运行在port 3000. 并且它们都位于根目录的不同文件夹中。

我想上传这两个并部署在数字海洋服务器上。我是这个部门流程的新手。请问如何在服务器上部署这两个并通过一个命令运行

标签： node.jsreactjsweb-deploymentdigital-ocean

解决方案

这是一种方法（使用节点服务器作为由 Apache 服务器提供的 React 网站的 API）。

您可以让 nodejs 在端口 5000（在远程服务器上）上运行，但请确保您没有使用localhostbut 0.0.0.0.

IE。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

现在，它应该可以工作了。

请注意，您需要使用新的公共 IP/DNS 修改 React 中的 ajax 调用。

推荐阅读