Question

我正在尝试在运行Passenger的服务器上运行react应用。我可以运行简单的Node.js应用程序没问题，但是我不知道如何运行React应用程序。我现在才刚刚起步，所以我创建了默认的React示例项目，并试图将其运行在Passenger上。

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

任何帮助，将不胜感激。

Answer 1

我知道这是一个老问题了，但是我为我的案例找到了一种解决方案，该解决方案允许React应用程序使用不需要yarn或serve -s build（我的VPS是不允许我在不经常登录的情况下运行）。我在其他任何地方都找不到关于如何执行此操作的清晰文档。我找到的最接近的答案要求我构建一个express节点服务器以前端React应用程序（由于其他原因我不能这样做）。我希望这个答案可以帮助其他可能正在寻找类似问题的解决方案的人。我还要补充一点，我在两个不同的VPS云服务器（DreamHost VPS和HostGator）上测试了该解决方案。您的VPS或服务器可能需要修改后的设置才能完成此工作。

首先，您需要使用npm run build（在本地系统或服务器上，但是我建议您在本地系统上）创建可用于生产的React应用。如果您不知道如何执行此操作，可以从Creating a Production Build中的React文档中查找。生产构建的结果应为build目录。这是您的React应用，封装在一个可部署的目录中。
在运行Passenger的服务器上，您将需要在root级别的目录中设置两个目录（如果您的托管服务提供商尚未为您执行此操作），Passenger希望从中运行应用程序。创建一个public和tmp目录。
```
.
├── public
└── tmp
```
注意：如果要从此处运行其他节点应用程序，则可能需要一个node_modules或其他必需的目录。但是，如果您只是自己运行React应用，则不需要它们。

将步骤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

回到根目录级别，在public和tmp目录旁边（不在public目录中），创建一个包含以下代码的app.js文件：{ {2}}这也会创建旅客也需要连接的节点应用程序。代码中的// 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};是通往React应用程序实际入口点的路径。但是，在许多VPS设置上的“乘客”也将寻找./public/index.html文件进行连接。在某些情况下，您可能必须将此文件称为app.js而不是server.js。这将取决于您的托管服务提供商的乘客设置。
最后，您需要在app.js目录中创建一个名为restart.txt的空文件。乘客在您的服务器上使用此文件来检测何时应“重新启动” React应用。您只需要从服务器上的命令行执行tmp，即可让Passenger重新启动您的服务（至少那是它在我的服务器上起作用的方式）。
您现在应该可以从为服务器设置的任何地址访问React应用。

最终的根目录目录结构应如下所示（如果不需要touch restart.txt目录）：

node_modules

我还建议添加. ├── app.js ├── public └── tmp文件（同样取决于您的托管服务提供商），该文件禁止文件目录浏览等。某些VPS可能要求您修改或添加.htaccess文件才能使乘客完全正常工作。有关此信息，请参见您的VPS专用文档。

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

Answer 2

我尝试了上面的答案，它在某种程度上起作用了，但我找到了一种更简单的方法来实现这一目标。使用此解决方案，您可以在 apache 或 nginx 服务器上托管您的应用程序。

1.将主页键添加到您的 package.json 文件中

"author": "Your Name", 
"license": "Your license", 
"homepage": "https://your-domain.com/"

2.使用以下内容创建生产版本

npm run build

3.将生成的build文件夹的内容复制到你的服务器根目录

4.在根目录下创建一个.htaccess文件，内容如下

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

在Passanger上运行React应用

2 个答案: