如何在同一台机器上通过nginx运行两个React项目

88次阅读

问题描述

正在使用React进行前端开发。他有一个运行在3000端口上的代码。他还有一个管理面板的代码，他希望将其从项目中分离出来，并在不同的端口上单独运行，比如3001端口。他在nginx配置文件中创建了两个项目的位置。

Under server block
location /admin/ {
    proxy_pass http://127.0.0.1:3001;
}
location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

通过这种方式，当用户打开localhost时，代码可以正常运行。但是，当用户输入localhost/admin/时，返回404错误。用户已经更改了管理面板index.html的标题，以确认nginx的路由是否正常工作。当用户访问管理面板的URL时，通过检查元素，用户发现标题已经更改，但由于主服务器的路由问题，返回404错误。用户还在管理面板代码的index.html文件中写了一个alert hello world，以便在渲染管理代码时生成警报。但是，当用户打开localhost/admin时，警报将生成，然后当用户关闭警报模态框时，页面将重定向到404错误页面。用户不知道为什么主代码在这里覆盖了管理代码。看起来好像同时获取了两个路由。因此，在访问管理URL后，立即加载index.html页面，然后从3000端口的项目加载路由，而不是3001端口。在3000端口的项目中没有这样的路由，因此返回404错误。用户想知道如何解决这种问题，是否是nginx或react的问题。

解决方案

请注意以下操作注意版本差异及修改前做好备份。

方案1

根据用户的描述，问题可能出现在nginx的配置中。以下是一些可能的解决方案：
1. 确保nginx已正确安装并正在运行。可以通过运行nginx -t命令来检查nginx配置文件的语法是否正确。
2. 检查nginx配置文件中的位置块是否正确配置。根据用户的描述，您已经在配置文件中定义了两个位置块，一个用于/admin/，一个用于/。确保这些位置块的语法正确，并且代理传递的地址是正确的。
3. 检查React应用程序的路由配置。根据用户的描述，当访问/admin/时，React应用程序的路由可能会导致问题。确保React应用程序的路由配置正确，并且/admin/的路由在应用程序中正确定义。
4. 检查React应用程序的打包配置。根据用户的描述，/admin/的页面加载了错误的资源文件，这可能是由于打包配置错误导致的。确保React应用程序的打包配置正确，并且/admin/的资源文件正确加载。

方案2

如果方案1无法解决问题，您可以尝试以下方法：
1. 将/admin/的代码移动到一个独立的React项目中，并在3001端口上运行该项目。确保/admin/的代码在独立项目中可以正常运行。
2. 在nginx配置文件中，将/admin/的位置块更改为代理到3001端口的独立项目。
3. 检查独立项目的路由配置和打包配置，确保/admin/的路由和资源文件正确配置。

请注意，这些解决方案是基于用户的问题描述和可能的原因提供的。由于缺乏更多细节，无法确定问题的确切原因。如果以上解决方案无法解决问题，请提供更多详细信息，以便我们能够更好地帮助您解决问题。

以上是解决这种问题的一些建议，希望对您有所帮助。如果您有任何其他问题或疑问，请随时提问。

正文完