node.js - 在 Passenger 上运行 React 应用程序

Question

我正在尝试在运行 Passenger 的服务器上运行 React 应用程序。我可以毫无问题地运行简单的 Node.js 应用程序，但我不知道如何运行 React 应用程序。我现在才刚刚开始，所以我刚刚创建了默认的 React 示例项目，我正在尝试让它在 Passenger 上运行。

我已经完成了 npm build，但是有关如何运行该构建的应用程序的建议包括 yarn 和服务。我将如何配置 Passenger 服务器来托管我的 React 应用程序？

对此的任何帮助将不胜感激。

Answer 1

我知道这是一个较旧的问题，但我为我的案例找到了一个解决方案，允许 React 应用程序使用不需要 yarn 或 serve -s 的 Passenger 运行build (我的 VPS 不允许我在不持续登录的情况下运行)。我在其他地方找不到任何关于如何执行此操作的明确文档。我找到的最接近的答案要求我构建一个 express Node 服务器来前端 React 应用程序(由于其他原因我无法这样做)。我希望这个答案可以帮助其他可能正在寻找类似问题解决方案的人。我要补充的是，我在两个不同的 VPS 云服务器(DreamHost VPS 和 HostGator)上测试了此解决方案。您的 VPS 或服务器可能需要修改设置才能使其正常工作。

1. 首先，您需要使用 npm run build 创建生产就绪的 React 应用程序(在您的本地系统或服务器上，但我建议您使用本地系统)。如果您不知道如何执行此操作，可以从 Creating a Production Build 中的 React 文档查找。 。生产构建的结果应该是一个 build 目录。这是封装在单个可部署目录中的 React 应用程序。
2. 在运行 Passenger 的服务器上，您需要在 Passenger 期望运行应用程序的根级目录中设置两个目录(如果您的托管提供商尚未为您执行此操作)。创建 public 和 tmp 目录。

   .
   ├── public
   └── tmp
   

   注意:如果您要从此处运行其他 Node 应用程序，那么您可能需要 node_modules 或其他必需的目录。但如果您只是单独运行 React 应用程序，则不需要它们。
3. 将步骤 1 中的 build 目录的内容复制到服务器上的 public 目录中。结果应该是这样的。

   
   public
   ├── static
   │   ├── css
   │   │   ├── main.########.chunk.css
   │   │   └── main.########.chunk.css.map
   │   ├── js
   │   │   ├── main.########.chunk.js
   │   │   ├── main.########.chunk.js.map
   │   │   ├── runtime~main.########.js
   │   │   └── runtime~main.########.js.map
   │   └── media
   │       ├── background-image.########.png
   │       └── logo.########.svg
   ├── asset-manifest.json
   ├── favicon.gif
   ├── favicon.ico
   ├── index.html
   ├── index.tmp.html
   ├── manifest.json
   ├── precache-manifest.########################.js
   └── service-worker.js
   

4. 返回根目录级别，在 public 和 tmp 目录旁边(不在 public 目录内)创建一个 app.js 文件包含此代码:

   // app.js
   // A simple Node.JS app launcher for running with Passenger.
   const react_app = require("./public/index.html");
   module.exports = {create: react_app.create};

   这将创建 Passenger 也需要连接的 Node 应用程序。代码中的 ./public/index.html 是 React 应用程序实际入口点的路径。但许多 VPS 设置上的 Passenger 也会寻找 app.js 文件进行连接。在某些情况下，您可能必须调用此文件 server.js 而不是 app.js。这将取决于您的托管提供商的 Passenger 设置。
5. 最后，您需要在 tmp 目录中创建一个名为 restart.txt 的空文件。服务器上的 Passenger 使用此文件来检测 React 应用程序何时应“重新启动”。您只需从服务器上的命令行执行 touch restart.txt 即可让 Passenger 重新启动您的服务(至少在我的服务器上是这样的)。
6. 您现在应该能够从您为服务器设置的任何地址访问您的 React 应用。

最终的根级目录结构应如下所示(如果您不需要 node_modules 目录):

.
├── app.js
├── public
└── tmp

我还建议添加一个 .htaccess 文件(同样取决于您的托管提供商)，该文件禁止文件目录浏览等。某些 VPS 可能需要您修改或添加 .htaccess 文件才能使 Passenger 正常工作。有关此信息，请参阅您的 VPS 特定文档。

注意!如果您的 React 应用程序可以独立运行，则不需要整个过程。我的意思是，您可以将 React 生产构建过程的内容上传到 public 或 www 或您的服务器向世界公开的任何“公共(public)目录”。在许多情况下，在 React 构建文件夹中创建的 index.html 文件足以从 Web 服务器提供您的 React 应用程序。 😉