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

Question

我使用运行ning on port 5000 上的 Node Express 创建了一个后端。我的前端使用运行ning on port 3000 的 React Js。而且它们都在根目录下的不同文件夹中。

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

Answer 1

如果你的前端是create react app，你可以npm run build，并在同一台服务器上通过nodejs在nodejs中提供静态资源。它将提供缩小的块。

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

Answer 2

您可以在服务器端从您的 Node 渲染您的 React 应用程序。js/Express，我认为目前您正在使用 webpack 在端口 3000 上渲染您的 React 应用程序。如果您可以上传您的代码来查看它会更容易帮助

Answer 3

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

您可以将 nodejs 运行ning 保留在端口 5000 上（在远程服务器上），但请确保您使用的不是 localhost，而是 0.0.0.0.

即。 app.listen(5000, "0.0.0.0");

现在，您应该能够通过该端口上的 public 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

使用 npm run build 构建您的 React 项目，然后将在 /build 文件夹（在 React 文件夹中）中创建的文件放置到 /var/www/html（在远程服务器上）。请注意，您需要将 /build 文件夹中的文件和文件夹放在那里，而不是 /build 文件夹本身。

现在，当您键入 myPublicIpOrDNSname 地址时，您应该能够看到您的 React 网站运行ning（假设 Apache 是运行ning 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是运行ning（否则重启Apache服务器会报错）

sudo a2enmod rewrite

最后，重启 Apache 服务器

sudo /etc/init.d/apache2 restart

现在，应该可以了。

请注意，您需要使用新的 public IP/DNS.

修改 React 中的 ajax 调用

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

How can I deploy Node Js back-end and React Js front-end on server?

web-deployment

node.js

reactjs

digital-ocean