如何部署具有相同域名的前端和后端？

Question

我对部署和网络不是很熟悉，因为我主要是前端开发人员。我想用Laravel和React创建一个项目（分离，不与Blade集成），然后将它们部署到AWS。我只想将Laravel用作API服务器，并且打算将其部署在EC2上。如果我将我的React应用托管在S3上，我将如何与EC2实例上运行的API服务器共享同一域？

我知道我可以有单独的子域，例如React应用程序的www.example.com和API服务器的api.example.com。但是，如果我想在我的React应用程序中使用www.example.com，在我的API服务器中使用www.example.com/api，我有什么选择？您可以为我推荐哪些资源以使您更快地了解此主题？谢谢！

Answer 1

要使用S3和EC2，您需要使用可以根据条件分布到两个端点的服务。

为此最好的服务是CloudFront，它支持分发到S3和EC2（作为custom origin）。

为此，您将为S3存储桶创建一个origin，并为该API创建一个分发。由于您的API托管在/api/*路径上，因此在通过path pattern添加次要来源时，应将其添加为behaviour。

然后，CloudFront会将所有请求路由到您的EC2来源的/api/*路径。

我找到了一篇名为How to route to multiple origins with CloudFront的文章，希望可以更详细地说明实现此目的的步骤。