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

Question

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

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

同一url上的主应用程序https://example.com/

上的管理应用程序https://example.com/admin

如何做到这一点？我的应用程序托管在AWS s3 bucket上。

Answer 1

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

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

• Origin域名-一个名为DOC-EXAMPLE-bucket 的亚马逊S3存储桶

• 原始路径-/生产

• 备用域名(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请求。

最佳，Stefan

Answer 2

首先，您需要调整您的管理应用程序react路由器配置。这里有一篇关于如何做到这一点的优秀文章：如何将React应用程序部署到子目录中。接下来，您的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;
}