0

I am looking to host several sites for people on a single S3 bucket. I understand that one could use Cloudfront and HAProxy to direct people to a specific location on an S3 bucket. My question is, what is the best means to build a react app on the fly, then send the 'build' folder to S3?

Is this even possible? I guess it's more of what's an efficient way to do this given the resources. Would I need to setup my own server or is there some serverless means using Lambda etc.

bearsworth
  • 77
  • 1
  • 2
  • 11
  • For more clarification here is what I'm attempting to setup: https://stackoverflow.com/questions/49812706/serving-a-multitude-of-static-sites-from-a-wildcard-domain-in-aws/49817210#49817210. – bearsworth Apr 10 '20 at 02:11
  • I was hoping someone could answer if I could somehow 'build' the react app on a server, then export the 'build' folder generated from react into an s3 bucket. If someone has done a similar implementation or has some thought of how to do this. My only gripe here is that I may be using react-router which may cause issues with the s3 bucket. – bearsworth Apr 10 '20 at 02:12

1 Answers1

1

@bearsworth It is easy to host React applications on S3 with a tool called AWS Amplify. One thing that would require some clarification is why you would like to host several sites from the same bucket?
With amplify you can start with:

npx create-react-app myappname

then install amplify and its react tools with:

npm i -s aws-amplify aws-amplify-react

next run(follow prompts):

amplify configure

followed by:

amplify init
Afterward go to the AWS Console and search for Amplify. You will see a screen like this one
the blue area 1 of 5 steps completed
Where is says get the most out of the Amplify console complete the second step to link your domain name. Click the Add a custom domain with a free SSL certificate link. It should look like this
connect your domain
You can also connect a branch to your favorite code repository and your off to the races!!!
The downside to your request is each site would be in a separate S3 bucket. Amplify is a serverless platform so zero EC2 instances are needed. Going this route has saved me hundreds of dollars per month in infrastructure costs. The Amplify platform takes the stress out of provisioning instances, Kubernetes clusters, DNS configuration, API development, Authentication flows, and storage retrieval. For the full-stack React developer I feel it is a great resource.
Some features to try are:
Amplify add storage
Amplify add API
Amplify add hosting
Amplify add Auth

happy coding

KrisCodes2
  • 73
  • 7
  • 1
    Thanks for this response. My main app is actually using AWS Amplify, so I kind of know how the framework works. The only issue I have is that using this as you mentioned would make sites use a separate S3 bucket per site and likely a seperate cloudfront distro. Here's a post to what I'm attempting to do to dynamically host sites: https://stackoverflow.com/questions/49812706/serving-a-multitude-of-static-sites-from-a-wildcard-domain-in-aws/49817210#49817210. My issue is that I'm looking to do this with react sites. – bearsworth Apr 10 '20 at 02:10
  • 1
    I see your point. Why host the same content in multiple buckets. Your approach could save money and if the code is as easy as it looks even simplify your storage needs. I will follow this post as I am curious as well. Good question. – KrisCodes2 Apr 10 '20 at 17:07