Deploying create-react-app to S3 and CloudFront

  1. Ease. Deploying static files requires far fewer moving parts than an app with a server. There’s less to set up and less to maintain.
  2. Cost. Because there’s less to set up and maintain, the cost of deploying a static application can be dramatically cheaper.

Deploy to S3

  • Create an account or sign in to the AWS Console: https://aws.amazon.com/
  • Navigate to the S3 service and click Create Bucket. Make up a clever name for your new bucket, a choose your configuration settings.
  • In the Set Permissions step, deselect the options to block public access — you want users to access the website assets that will live here — then create the bucket.
Deselect all; give the public access to visit your site.
  • Click on the newly-created bucket. Within the Properties, open the Static Website Hosting tab, and select Use this bucket to host a website. Fill in index.html for both the Index and Error Documents. By setting index.html as the Error Document, we can allow something like react-router to handle routes outside of the root.
  • Open the Permissions tab, then select Bucket Policy. You may choose to do something more nuanced here, but a good starting point is to provide read-only permissions for anonymous users — a policy provided in the AWS examples. Make sure its your bucket name under the "Resource" key.
  • Add the contents of your build directory to this bucket. This can be done by clicking on the bucket and clicking Upload. That’s it! You can find the URL to your application back under the Static Website Hosting tab, labeled Endpoint.

Bonus: Deploying with AWS CLI

AWS Access Key ID [None]: AKIAIOSFODNN7EXAMPLE
AWS Secret Access Key [None]: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
Default region name [None]: us-west-2
Default output format [None]: json
  • Create a bucket (if you didn’t already) and deploy the app:
// create a bucket
$ aws s3 mb s3://your-bucket-name
// list buckets
$ aws s3 ls
// build and deploy the app
$ npm run build && aws s3 sync build/ s3://your-bucket-name

Deploy to CloudFront

If it works on S3, why bother with CloudFront?

  • Select theCloudFront service in the AWS console, click Create Distribution, then under the web delivery method, click Get Started.
  • Select your Origin Settings. The Origin Domain Name choices pre-populate with S3 buckets. Selecting yours will also populate the Origin ID.
  • Within the Distribution Settings, set the Default Root Object to index.html.
  • You may choose to further configure the distribution, but that’s enough to get the job done. Select Create Distribution.
  • Click the ID of your newly created distribution to reach its settings page, then click on the Error Pages tab. Select Create Custom Error Response.
  • Select Yes for a custom error response, set/index.html for the response page path and 200: OK for the response code. This custom error page in the CloudFront distribution is analogous to the Error Document on the S3 bucket (and will work on IE, too). When done, click Create.
404 error codes work fine here, too.
  • That’s it! Give the deployment a handful of minutes, then check out your web app. You can find the URL on the distribution listings page, under the Domain Name column.

Wrapping Up

--

--

--

Author of Redux in Action: http://bit.ly/redux-in-action. Python/JavaScript developer at the Ethereum Foundation.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marc Garreau

Marc Garreau

Author of Redux in Action: http://bit.ly/redux-in-action. Python/JavaScript developer at the Ethereum Foundation.

More from Medium

How To Install Redis On Centos 8

Deploy a React App to Amazon S3 using Github Actions And Bitbucket Pipelines

Application Framework — SE3040

Designing Applications Using Frameworks