如何支持 2 个不同子域的 React js 应用程序
How to support react js app for 2 different sub domains
我有点难以支持 React js 以支持 2 个不同的子域。以下是我需要我的应用程序支持的子域
- www-dev.somedomain/apps/myapp
- app-dev.somedomain/myapp
如您所见，react-app-path 也在随着子域的变化而变化。我在我的 .env 文件中定义了 PUBLIC_URL 和 REACT_APP_PATH，如下所示。
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
使用上述环境变量 app-dev...URL 正在运行。如果我更改为 apps/myapp 的路径，则 www 子域正在工作。我需要一种同时支持两个子域的方法
我怎样才能做到这一点？
没办法，你的React app会被编译成static HTML, JS, and CSS文件，你只能在构建之前给构建工具传递参数，也就是你现在在做什么。一旦建筑完成，就无法更改。
您可以编写两个 shell 脚本，使用不同的环境变量。然后调用它们中的每一个将构建不同的网络应用程序。
最后，我通过以下步骤解决了这个问题；我正在使用 Nginx 重定向到同一主机。我遇到的问题是路径。
www-dev.somedomain/apps/myappapp-dev.somedomain/myapp
根据我的 Nginx 配置，两个 URL 都被重定向到服务器中的 /。然后应用程序找不到静态文件，因为路径与域不同。所以为了解决这个问题，我做了如下操作。
- 首先，从我的 env 文件中删除
PUBLIC_URL。然后应用程序文件将托管在 / 位置
- 向
package.json 文件添加了 homepage 属性。添加主页将提供与 index.html 相关的资产。阅读有关主页的更多信息。 Using `"homepage"` in package.json, without messing up paths for localhost
- 由于应用程序使用内部路由，我添加了简单的 Nginx 规则来重写静态文件的位置，如下所示。
rewrite /static/(.*)$ /static/ break;
这解决了我支持两个域的问题。
我有点难以支持 React js 以支持 2 个不同的子域。以下是我需要我的应用程序支持的子域
- www-dev.somedomain/apps/myapp
- app-dev.somedomain/myapp
如您所见，react-app-path 也在随着子域的变化而变化。我在我的 .env 文件中定义了 PUBLIC_URL 和 REACT_APP_PATH，如下所示。
REACT_APP_PATH=/myapp
GENERATE_SOURCEMAP=false
PUBLIC_URL=/myapp
使用上述环境变量 app-dev...URL 正在运行。如果我更改为 apps/myapp 的路径，则 www 子域正在工作。我需要一种同时支持两个子域的方法
我怎样才能做到这一点？
没办法，你的React app会被编译成static HTML, JS, and CSS文件，你只能在构建之前给构建工具传递参数，也就是你现在在做什么。一旦建筑完成，就无法更改。
您可以编写两个 shell 脚本，使用不同的环境变量。然后调用它们中的每一个将构建不同的网络应用程序。
最后，我通过以下步骤解决了这个问题；我正在使用 Nginx 重定向到同一主机。我遇到的问题是路径。
www-dev.somedomain/apps/myappapp-dev.somedomain/myapp
根据我的 Nginx 配置，两个 URL 都被重定向到服务器中的 /。然后应用程序找不到静态文件，因为路径与域不同。所以为了解决这个问题，我做了如下操作。
- 首先，从我的 env 文件中删除
PUBLIC_URL。然后应用程序文件将托管在/位置 - 向
package.json文件添加了homepage属性。添加主页将提供与 index.html 相关的资产。阅读有关主页的更多信息。 Using `"homepage"` in package.json, without messing up paths for localhost - 由于应用程序使用内部路由，我添加了简单的 Nginx 规则来重写静态文件的位置，如下所示。
rewrite /static/(.*)$ /static/ break;
这解决了我支持两个域的问题。