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

Question

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

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

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

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

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

Answer 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 的请求。

最好， 斯蒂芬

Answer 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;
}