如何为两个不同的子域支持react js应用程序

Question

我有点难以支持react js来支持两个不同的子域。以下是我需要我的应用程序来支持的子域

• www-dev.somedomain/apps/myapp
• app-dev.somedomain/myapp

正如您所看到的，react应用程序路径也随着子域的变化而变化。我在.env文件中定义了PUBLIC_URL和REACT_APP_PATH，如下所示。

REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp

使用以上env-vars应用程序开发。。。URL正在工作。如果我更改为apps/myapp的路径，则www子域正在工作。我需要一种同时支持两个子域的方法

我怎样才能做到这一点？

Answer 1

最后，我通过以下步骤解决了这个问题；我使用Nginx重定向到同一个主机。我遇到的问题是路径问题。

• www-dev.somedomain/apps/myapp
• app-dev.somedomain/myapp

根据我的Nginx配置，两个URL都被重定向到服务器中的/。然后应用程序找不到静态文件，因为域的路径不同。因此，为了解决这个问题，我做了以下操作。

• 首先，从我的env文件中删除PUBLIC_URL。然后应用程序文件将托管在/位置
• 为package.json文件添加了homepage属性。添加主页将提供相对于index.html的资产。阅读更多关于主页的信息。使用"；主页"`在package.json中，不会打乱localhost的路径
• 由于该应用程序使用内部路由，我添加了简单的Nginx规则来重写静态文件的位置，如下所示。rewrite /static/(.*)$ /static/$1 break;

这解决了我支持两个doamins的问题。

Answer 2

不可能，你的React应用程序将被编译成静态HTML、JS和CSS文件，而你唯一可以将参数传递到构建工具的时间是在构建之前，这就是你现在正在做的。这座建筑一旦完工，就不能再改动了。

您可以使用不同的环境变量编写两个shell脚本。然后调用它们中的每一个将构建不同的web应用程序。