Deploy React to AWS Automatically

This tutorial walks you through the process of deploying your React application to AWS’s Simple Storage Service (S3) automatically using your GitHub repository.

Notice — you may incur billing expenses following this tutorial.

AWS screens may have changed since this article was published in May, 2019.

Prerequisites — you’ll need an AWS account and a GitHub account. You may clone my GitHub project AWS JavaScript which includes the buildspec.yml file— you may copy the contents of that buildspec.yml file below.

version: 0.1
phases:
install:
commands:
- npm install
- npm run build
- aws s3 cp build s3://$S3_BUCKET --recursive --exclude 'index.html'
- aws s3 cp build/index.html s3://$S3_BUCKET

To complete this tutorial you’ll also need a package.json file with references to all your NPM packages . If you’re not using the provided GitHub repository you’ll also need to include a public folder with an index.html inside of it (which can be blank).

Login to your AWS account, navigate to the S3 service and create a new bucket. Enter a name for your bucket — throughout this tutorial I use the name s3-bucket-for-react-application. Proceed to Step 3.

On Step 3 of the wizard, uncheck the Block all public access (bucket settings as pictured below.

Complete the wizard to create the bucket. Once complete, the bucket WILL NOT yet be available to the public as pictured below.

Select the bucket name and navigate to the Properties tab. Select Static website hosting as displayed below.

Once this display expands, select Use this bucket to host a website as displayed below.

Enter index.html into both the Index document and Error document fields and click save — an indicator and the Bucket hosting text should appear illuminated after completing this step.

Next, select the Permissions tab and then select the Bucket Policy button.

Copy and paste the below code into the Bucket policy editor. Replace the text bucket with the name you used to create your bucket — I choose s3-bucket-for-react-application. If you choose the name my-bucket you would enter "arn:aws:s3:::my-bucket/*".

{
 "Version": "2012-10-17",
 "Id": "Policy1546483269008",
 "Statement": [
  {
   "Sid": "Stmt1546483267692",
   "Effect": "Allow",
   "Principal": "*",
   "Action": [
    "s3:GetObject"
   ],
   "Resource": "arn:aws:s3:::bucket/*"
  }
 ]
}

Click the Save button at the top-right portion of your screen. You’ll receive a notification warning you thatThis bucket has public access.

Congratulations! You have successfully setup an AWS S3 bucket which can server static content. Next, we’ll create a Code Pipeline to deploy your React application to your AWS S3 bucket.

Select Services from the AWS main menu and enter pipeline. Select CodePipeline as displayed below.

Select Create pipeline on the following screen.

It’s important to use meaningful names with suffixes throughout the Code Pipeline process.

We’ll need to reference specific items later in this process, using suffixes enables us to quickly and easily identify the needed items

The first step in this wizard is to specify the name of your Pipeline. Suffix the name with -pipeline as displayed in the below image. EnsureAllow AWS CodePipeline to create a service role so it can be used with this new pipeline is selected and then click the Next button.

Select GitHub from the Source provider selection. Once the Connect to GitHub button appears — select it. You may be presented with a pop-up window asking you to Sign into your GitHub account.

After signing in you’ll be able to select one of your repositories from the list. You will not have aaronwht/aws-javascript as an option — select the repository you wish to deploy to your AWS S3 bucket, then select the Branch you wish to deploy to AWS S3 before clicking the Next button.

After clicking the Next button, select AWS CodeBuild from the available options and click the Next button.

Select the Create project button — a pop-up dialog will display. I display this below as two separate screen shots. I used s3-bucket-pipeline for my Pipeline so I’ll use s3-bucket-proj for my project name. I encourage you to simply replace the suffix -pipeline with -proj.

Select Ubuntu for the Operating system, Node.js for the Runtime(s) and the most recent version of nodejs for the Image as pictured below.

IMPORTANT STEP— This is a very easy step to miss. Expand the Additional configuration option highlighted below.

There’s a lot of scrolling required in this part of the modal.

The buildspec.yml file mentioned earlier includes an environment variable called S3_BUCKET. In my GitHub repository I provide instructions to create an .env file with the variable REACT_APP_API='https://api.domain.com/'. The Code Pipeline will transpile the environment values into your production JavaScript code. To take advantage of these environment variables you must include them in your build project.

It’s IMPORTANT that you enter the Name and Value accurately or your build WILL NOT WORK. Enter S3_BUCKET as one Environment variable with the name of your S3 bucket as its value. You may enter other Environment variables here as well.

Ensure Use a buildspec file is selected under the Buildspec section as displayed below.

I disabled the CloudWatch Logs as we don’t need them for this example. Click the Continue to CodePipeline button at the bottom of the screen.

Begin Sidebar:

If you receive a Policy already exists error you’ll have to delete the existing policy. This conflict occurs when trying to create build Pipelines with the same name. To delete the policy, open IAM in a new browser tab and select Policies, then search for the Policy name specified your error message. Delete at your own risk — if an active Pipeline’s using this Policy it’ll break. You should be able to continue this tutorial after removing any conflicts.

End Sidebar

Provided you did everything correctly, the pop-up window should disappear and your Project name should displayed appropriately.

After clicking the Next button you will be taken to the Add deploy stage where you need to select Amazon S3 from the Deploy provider options. You will be provided with a selection for Bucket — select the bucket you created previously in this tutorial.

After selecting your Bucket enter the * (asterisk) character in the S3 object key input before clicking the Next button. On the final step click the Create pipeline button.

After completing this process we’ll receive a congratulatory message. The build process has initiated your initial build, which will fail.

The wizard we used created several Roles and Policies for the Build Pipeline on our behalf. Earlier in the tutorial I instructed you to ensure the checkbox forAllow AWS CodePipeline to create a service role so it can be used with this new pipeline was checked — apparently to no avail? The problem is that the wizard created two IAM Roles which don’t have the rights to write to an S3 bucket.

Click the Services option on your main menu navigation and type IAM into the search box — select IAM Manage User Access and Encryption Keys.

Select theRoles link from the left navigation options. In the search box, enter the common name you used for your Pipeline and Project. I used s3-bucket so I enter that into the search box.

If nothing comes up for you, or you get lots of results, try searching using the word pipeline.

Select the Pipeline that has the suffix of -pipeline. Select the Attach policies button as pictured below.

On the next screen enter amazons3 into the search box and select AmazonS3FullAccess then click the Attach policy button (which may be hidden at the bottom-right portion of your screen).

Select the Roles link to return to the previous page. Again, in the search box enter the common name you used for your Project. I used s3-bucket so I’ll enter that into the search box, again.

If nothing comes up for you, or you get lots of results, try searching for proj.

Select the option that matches your project name and has the suffix of -proj. Select the Attach policies button as pictured below.

On the next screen enter amazons3 into the search box just like we did previously, select AmazonS3FullAccess then click the Attach policy button (which, again, may be hidden at the bottom-right portion of your screen).

Congratulations! You have applied the needed permissions to get your Pipeline working!

Return to the Pipeline service by selecting Services from the main menu navigation. Enter Pipeline into the search box and select Code Pipeline again. Select the Pipeline you just created. This will return you to your Pipeline — click the Edit button as we have a little house cleaning to do.

Select Edit stage button on the Edit: Deploy stage of the Pipeline.

The Deploy stage isn’t needed as the buildspec.yml file provides deployment instructions for us. Click the Delete button and confirm deletion by clicking the Delete button one more time in the modal.

Click the Save button at the top-right part of your screen, and again — click the Save button on the confirmation modal.

Finally click the Release change button at the top-right part of your screen, and again, click the Release button in the confirmation modal. The build should work appropriately this time and both stages of your Pipeline should reflect that.

One last gotcha…

The root of your application you needs a public folder with an index.html file. The contents of the index.html must include a div tag with an id of root <div id="root"></div>.

End last gotcha…

Navigate back to the S3 bucket, select the bucket you specified earlier, then select the Properties tab.

Clicking on the link will open a new tab displaying your React application.

Congratulations if you made it this far!!!
Checking in code to your GitHub repo will now kick off a build and deploy your application — automatically!

If you found this article useful consider clapping for me and making a donation.