将 ReactJS 和 ExpressJS 部署到 Nginx

Posted 2023-02-21

【中文标题】将 ReactJS 和 ExpressJS 部署到 Nginx

【英文标题】：Deploy ReactJS & ExpressJS to Nginx

【发布时间】：2020-10-09 12:09:03

【问题描述】：

我有一个典型的 Ubuntu VPS 设置 (20.04LTS)，我在其中安装了 nginx 服务器。 我有两个本地存储库，带有前端 reactJS 代码存储库和后端 ExpressJS 代码存储库。 我将在 3000 端口上以永远启动的方式启动 ExpressJS。我也有一个 mysql 数据库。 我已将 Nginx 配置为使用根目录 /var/www/[Your repo name]/build 为静态文件提供服务；我可以打开 html 文件并且它正在工作。 问题是，我是否需要在另一个端口上启动 ReactJS npm run start 或者 Nginx 是否足够？您能帮我提供一些链接或最佳做法吗？

提前致谢。

【参考方案1】：

当用户打开您的基本 URL 并作为 get 调用的响应发送时，所有静态文件（如 index.html 和资产）都将从您的“root /var/www/[Your repo name]/build”文件夹中提供.在您的代码中，确保将“/api/”附加到来自 ui 的所有后端请求，以便将其转发到在端口 3030 上运行的服务。

【讨论】：

嗨。是的，我已将代码附加到 /api 。这很清楚。但是我仍然很困惑，我是否应该使用 npm run star 开始 ReactJS 前端，以及使用 npm run start 开始 ExpressJS 后端（并添加一些代理）。或者，如果我只运行没有 nextjs 的 react.router（我想我已经看到前端使用的 reactdom 包），则不需要这样做。使用 react npm run start ，我看到它启动了他自己的开发服务器。在这种情况下和 NGINX 的生产中的最佳实践是什么？

不需要在生产环境中运行开发服务器。您需要在生产服务器上构建您的项目（通过 jenkins 或手动登录到服务器机器），并且在创建“dist”文件夹时，它具有加载 UI 页面所需的所有文件。在 nginx 中，始终提供根路径中的 dist 文件夹，'/' 以便将包含 app.min.js 和 app.min.css 链接的 index.html 提供给请求页面的浏览器。

还有一点是，当您运行开发服务器时，它会将您的源映射暴露给外部世界，这可能不是一个好习惯。如果您开始提供静态捆绑包，那么转向无服务器架构会很方便。

@VIijay122 - 感谢您的精彩解释。您是否有一些关于如何构建 ReactJS 项目和创建 /dist 文件夹以及为生产进行所有 nginx 设置的链接。也许一些教程或最佳实践链接与这些步骤？

当然。通过 webpack 或通过脚本生成 dist 文件夹来构建 React 应用程序。生成 dist 后，从 nginx 配置中，将 dist 文件夹指向根 url。请参考以下链接了解详细步骤。 dev.to/xarala221/…

【参考方案2】：

如果您使用CRA（创建反应应用程序），它附带一个构建脚本，所以在运行npm run build 后，整个应用程序被构建到静态文件中，包括index.html 和一些js 和@ 987654328@ 文件。您需要做的就是配置nginx 来服务index.html。所以 nginx 就足够了。如果您在应用程序中使用 react-router，请记住，您可能需要使用 nginx 的 try_files 指令来为任何传入请求提供 index.html。

有关 react-router 和 nginx 的更多信息，请参阅this。

如果您正在执行s-s-r（服务器端渲染），您需要像pm2 或forever 这样的进程管理器在内部为您的应用程序提供服务，并使用nginx 的proxy_pass 指令将传入请求反向代理到您的应用程序。 More info

【讨论】：

嗨。感谢您的介绍。我认为我的开发人员正在使用创建反应应用程序。我已经将 nginx 配置为服务器 index.html。我不确定如何检查我们是否使用服务器端渲染。我在哪里可以查看？

如果您使用的是裸 CRA，则您没有执行 s-s-r，带有 s-s-r 的 React 应用程序通常构建在 nextjs、gatsby 之上，或者具有带有 @987654340 的自定义 s-s-r 引擎@ 在根目录中。

嗨。我发现我们正在使用 react Router ，所以我在 : server listen 80 default_server; 之前进行了配置服务器名称 _; # react app & front-end files location / root /home/ubuntu/front-end/html; try_files $uri /index.html; # 节点 api 反向代理位置 /api/ proxy_pass localhost:3030;我想这应该足够了。

感谢您的快速回复。我在公用文件夹中有 html 和 index.html 的文件。这对于 nginx 作为起点应该足够了吗？我的配置。

如果您想添加更多信息，请编辑您的问题。