Question

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

我想上传这两个文件并部署在Digital Ocean Server上。我是这个部门流程的新手。我该如何在服务器上部署这两项并通过一个命令运行

Answer 1

如果您的前端是create react app，则可以执行npm run build，并通过同一服务器中的nodejs在nodejs中提供静态资产。它将服务于缩小的块。

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

Answer 2

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

您可以让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

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

现在，当您键入 myPublicIpOrDNSname 地址（假设Apache正在运行sudo systemctl start apache2）时，您应该能够看到React网站正在运行。

要使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调用。

Answer 3

您可以在服务器端从Node.js / Express渲染您的react应用，我认为您当前正在使用webpack在端口3000上渲染您的react应用。如果您可以上传代码以查看一下，它将更容易帮助

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

3 个答案: