What are the perfect ways to deploy a react app on AWS?

Tech QnA
1

I have a front-end react App and now I want to deploy it on AWS. Can someone guide me on this? How to do it?

2

Hey! Nice to see you in our community.

AWS React app deployment requires a few steps. Here is a detailed procedure to follow:

  1. Complete your React App
    Ensure that your React application is production-ready. With the following command, a production build may be made:
    npm run build
    The above command will optimize and minify files in a build directory and then, set your AWS account.

  2. Use AWS S3 bucket for hosting
    React apps can be hosted on AWS S3, which is appropriate for hosting static websites. For that, create a bucket on S3 and verify that the bucket name is exclusive to AWS.

To Activate the bucket’s static website hosting:

  • Go to the console for S3.
  • Pick out your container.
  • Select “Properties” from the menu.
  • Select “Host static website.”
  • Assign index.html to the Index document and index.html to the Error document.

  1. Upload your React application to S3
    Transfer all of the build directory’s contents to your S3 bucket.

  2. Configure permissions for S3 buckets
    Verify that the files are set up in your S3 bucket to be accessible by the whole public. This can be accomplished by amending the bucket policy.

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}
  1. Activate CORS on S3
    Set up CORS so that your React application may communicate with S3. Revise the bucket settings’ CORS configuration.
<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

Now, test if this works well.

That provides a high-level summary of the procedure. Depending on your unique needs and architecture, adjustments can be required. Always make sure your AWS resources are adequately secured, and while deploying on AWS, adhere to recommended practices.

Thank you

3

It’s great, easy to use and it does a lot of stuff behind the scenes so doesn’t have to worry about the underlying infrastructure.
But I want to worry about the infrastructure to minimize costs and know what is going on.

4

I understand then you should give a try to AWS S3 and CloudFront.

5

Yes, you can use Amazon S3 to store the static files for your React app (such as HTML, CSS, and JavaScript files), and then use CloudFront, Amazon’s content delivery network (CDN), to serve those files to users. This is a simple and cost-effective way to host a React app, but it does not provide the same level of automation and management features as Amplify or Elastic Beanstalk.

6

Ok, let me try this. I like to store and read from a few environment variables (such as API keys) that I have. Here, I’m picturing the manager of a Parameter store or a Secrets. Please let me know if there is a more effective or convenient approach to save these environment variables.

7

Um, there are two more options.

  1. AWS Elastic Beanstalk: Elastic Beanstalk is a fully managed service that makes it easy to deploy and run web applications in the cloud. It can deploy a React app by creating a Node.js runtime environment and uploading your app’s code.
  2. Other hosting options: There are also a number of other hosting options available on AWS, including EC2 (virtual servers), ECS (container-based hosting), and Lambda@Edge (serverless hosting). You can use any of these options to host a React app, but they may require more configuration and management than the other options listed above.

I hope this helps! If you have any other questions, please don’t hesitate to ask.