How to Deploy a React App on Amazon S3

Petro Dubno, Software Developer at Bitcom Systems on 2019-05-10

After you have already built your React project you will want to host it somewhere to be publicly available, and preferably for free.
Amazon S3 is one of the leading hosting providers for a good reason:

  1. AWS offers free hosting options.
  2. AWS has a well developed infrastructure, covering issues of scalability, performance, security, easy management, etc.
  3. AWS fits customers of all sizes.

AWS S3 is a good start for a simple static React app, as you will be able to easily deploy it and update with S3 CLI.

Please follow our instructions to deploy your React app on Amazon S3.

AWS configuration

To deploy a website on S3, you need to create an AWS account.
Ensure that an AWS Identity and Access Management (IAM) profile is created.
Ensure that the AWS CLI tool is installed. For more information about platform specific procedures, see the Amazon documentation.
Ensure that you set up your AWS credentials on CLI. Note: open a new terminal, and type aws configure.

Create an Amazon S3 bucket

  • Log in to the AWS account.
  • Follow the guidelines for using the available access policy options and generate a policy with the following settings:
    • Effect: Allow
    • Principal: *
    • Service: Amazon S3
    • Actions: GetObject For the ARN, use the name of your bucket with /* at the end to provide everyone access to all files.
  • Set up the bucket as static hosting by doing the following:
    • In the bucket’s console, navigate to Properties then to Static Website Hosting.
    • Select Use this bucket to host a website.
    • Fill the form and click Save.
  • Update the Cross-Origin Resource Sharing (CORS) configuration by pasting the following into Prmissions > CORS configuration and click Save.
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Note: Here is my configuration. Modify the settings as required. With this configuration, your website can perform cross-origin requests to any origin. More information about CORS configuration you can find here.

Deploy your application by doing the following:

  • Update the bucket name in the deploy command in package.json: "deploy": "aws s3 sync webpack/dist/ s3://bucket-name", where bucket-name is name of your bucket.
  • Run in console the npm run build command. Then run npm run deploy command.

In general these settings are enough for our site to be available on the Internet.

Also, you can configure the Amazon CloudFront following this simple instruction at Getting Started with CloudFront.

In short, CloudFront is a web service for delivering content (web-site). CloudFront integrates with other AWS. The goal of the service is to give developers and enterprises an easy way to distribute content to end users with minimal latency and high data transfer rates.