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

我已经使用Node Express创建了一个后端，它运行在

端口5000

上。我的前端使用React Js，它运行在

端口3000

上。它们都在根目录的不同文件夹中

---

我想上传这两个并部署到digital ocean服务器上。我不熟悉这个部门的流程。如何在服务器上部署这两个应用程序并通过一个命令运行，请

如果您的前端是create react app，您可以执行

npm run build

，并通过同一服务器中的nodejs为nodejs中的静态资产提供服务。它将服务于缩小的块

---

app.use（express.static（path.join（uu dirname，../client/build'））
您可以从Node.js/Express在服务器端渲染您的react应用程序，我认为当前您正在使用webpack在端口3000上渲染您的react应用程序。如果你可以上传你的代码来查看一下，这将更容易帮助你
这里是一种方法（使用节点服务器作为ApacheServer服务的React网站的API）

您可以让NodeJ在端口5000（远程服务器上）上运行，但请确保您使用的不是
localhost
，而是
0.0.0

例如，
app.listen（5000，“0.0.0.0”）

现在，您应该能够通过该端口上的公共IP/DNS名称与节点服务器通信，即MyPubliciPornSName:5000。（假设您已经安装了
nodejs
以及
npm
=>请注意版本，
apt get install nodejs
，默认情况下，将获取旧版本）

如果您需要更新版本的
nodejs
，则可以通过以下步骤获取它（您可以用首选版本替换该
setup_8.x
部件）

使用Apache2服务器为您的静态（React、css等）文件提供服务（您不需要运行
create React app server
）

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

现在，您应该能够在键入MyPubliciPordsName地址时看到react网站正在运行（假设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>


重新启动发动机
#不要重写文件或目录
RewriteCond%{REQUEST_FILENAME}-f[或]
RewriteCond%{REQUEST_FILENAME}-d
重写规则^-[L]
#将所有其他内容重写为index.html，以允许html5状态链接
重写规则^index.html[L]

在该文件的
部分下。（Apache不知道您的React路由。这将使它将不知道如何处理的每个请求推送到根目录下，并让React处理路由）

然后，您需要确保重写引擎正在运行（否则在重新启动Apache服务器时会出现错误）

sudo a2enmod重写

最后，重新启动Apache服务器

sudo/etc/init.d/apache2重启

现在，它应该起作用了

请注意，您需要使用新的公共IP/DNS修改React中的ajax调用。
目前我使用的是React的
npm start
。只有
npm run build
对Node和React都足够了？如何使用webpack？我想你已经在使用webpack了，它是一个资产绑定器，还有一些插件，其中一个叫做dev server，你可以为React应用提供服务，最简单的事情是检查您是否有webpack.config.js，以及是否有webpack npm dependencyNo我没有使用webpack。如何使用它？所以我建议你使用它，特别是如果你打算把它投入生产，我认为这将是另一个有很长答案的话题，所以我会尽我所能帮助你开始。您需要将webpack作为开发人员依赖项安装，然后使用与应用程序匹配的配置对象创建webpack.config.js，例如module.exports={mode:“production”/“production”|“development”|“none”//selected mode告诉webpack相应地使用其内置优化。条目：“./app/entry”，//string | object | array//默认为“./src”//这里是应用程序启动这里是服务器使用的更完整的配置文件
localhost
。如何将其更改为
0.0.0
@testteam，在您启动服务器的地方（即index.js）您有一行
app.listen（5000，…）
或
服务器。listen（5000）
或
服务器。listen（端口，…）
或类似于
listen
方法的东西。只需添加
0.0.0
作为该方法的第二个参数（
即app.listen（5000，“0.0.0”）
）
sudo apt-get update
sudo apt-get install apache2

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