想要在没有子域的单个域上运行两个单独的反应应用程序

Posted 2023-03-27

【中文标题】想要在没有子域的单个域上运行两个单独的反应应用程序

【英文标题】：Want to run two separate react app on single domain without subdomain

【发布时间】：2021-09-14 13:27:35

【问题描述】：

目前我有两个独立的反应应用程序，在主域和子域上运行， 在https://example.com/ 上运行的主应用程序和 在 https://admin.example.com/ 上运行的管理应用程序

现在我想将两个应用合并到同一个域中

同一网址上的主应用 https://example.com/

管理应用开启 https://example.com/admin

如何做到这一点？ 我的应用托管在 AWS s3 存储桶上。

【问题讨论】：

你的意思是主应用应该在example.com上运行吗？

是的，第二个应用要在example.com/admin上运行

【参考方案1】：

如果您希望 CloudFront 从您的 AWS 资源或自定义源中的目录请求您的内容，请输入目录路径，以斜杠 (/) 开头。 CloudFront 将目录路径附加到 Origin Domain Name 的值，例如 cf-origin.example.com/production/images

例如，假设您为您的分配指定了以下值：

源域名 – 一个名为 DOC-EXAMPLE-BUCKET 的 Amazon S3 存储桶

原始路径 - /production

备用域名 (CNAME) – example.com

当用户在浏览器中输入 example.com/index.html 时，CloudFront 向 Amazon S3 发送 DOC-EXAMPLE-BUCKET/production/index.html 的请求。

当用户在浏览器中输入 example.com/acme/index.html 时，CloudFront 会向 Amazon S3 发送 DOC-EXAMPLE-BUCKET/production/acme/index.html 的请求。

最好， 斯蒂芬

【参考方案2】：

首先，您需要调整您的管理应用反应路由器配置。这是一篇关于如何做到这一点的优秀文章：How to deploy a React app to a subdirectory。接下来，您的 nginx 配置应如下所示：

location / 
    root <path/to/your/main/app>;
    try_files $uri $uri/ /index.html;

location /admin 
    alias <path/to/your/second/app>;
    try_files $uri $uri/ /admin/index.html;

如果您可以将您的第二个应用程序放在第一个应用程序的admin 子目录下（例如，第一个应用程序位于/var/www/html，第二个应用程序位于/var/www/html/admin，则可以使 nginx 配置更加简单：

root </path/to/your/main/app>;
location / 
    try_files $uri $uri/ /index.html;

location /admin 
    try_files $uri $uri/ /admin/index.html;