Search code examples
amazon-s3single-page-applicationamazon-cloudfront

Serve subfolders from separate S3 bucket


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?


Solution

  • 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.)