1

I'm trying to come up with a solution for deploying multiple Single Page Apps to S3 with CloudFront.

I currently have 3 SPA's

  • app SPA
  • signup SPA
  • admin SPA

Ideally these would be served at

  • myproduct.com
  • myproduct.com/signup
  • myproduct.com/admin

In order to facilitate independ deploys of these applications i'd like to host them in separate buckets (with separate CloudFront distributions) to make deploys safer and faster.

I was imagining something like this:

*Bucket name*
root -> has dns for myproduct.com
   /signup -> serves s3://signup
   /onboarding -> serves s3://onboarding
   /admin -> serves s3://admin
signup
onboarding
admin

Is there any recommended s3 configuration that would accomplish a setup described above?

john_ryan
  • 1,557
  • 1
  • 16
  • 34

1 Answers1

1

You can create a single Amazon CloudFront distribution with three behaviors.

From Cache Behavior Settings:

When you create a new distribution, you specify settings for the default cache behavior, which automatically forwards all requests to the origin that you specify when you create the distribution. After you create a distribution, you can create additional cache behaviors that define how CloudFront responds when it receives a request for objects that match a path pattern, for example, *.jpg.

...

When you create a cache behavior, you specify the one origin from which you want CloudFront to get objects. As a result, if you want CloudFront to distribute objects from all of your origins, you must have at least as many cache behaviors (including the default cache behavior) as you have origins.

(You might have to use matching sub-paths within the three buckets.)

John Rotenstein
  • 241,921
  • 22
  • 380
  • 470
  • Thanks for the tip...I tried your suggestion but am seeing that when i add my signup origin and then add a behavior for /signup, it seems that cloudfront tries to load s3://signup-bucket/signup when i request myproduct.com/signup. This leads to a NoSuchKey error. – john_ryan Apr 20 '18 at 16:19
  • 1
    @john_ryan, the default behavior is that the entire path requested by the browser is what gets sent to the bucket. The Cache Behavior Path Pattern is used for matching and routing, but it doesn't get removed. You can either place the content within the expected paths within each bucket, or you can rewrite the paths with Lambda@Edge, as explained (with some simple example code) in [this answer](https://stackoverflow.com/a/31574851/1695906). – Michael - sqlbot Apr 21 '18 at 16:31