How to do Continuous Deployment of a React app to AWS S3 via Bitbucket Pipelines

Given the article Where should I host my git repository (2017), I am using Bitbucket right now for my “continuing education” projects. This article walks through a basic setup for CICD for a react app.

I chose to use Bitbucket pipelines because:

1. It’s free for 50 build minutes a month
2. Bitbucket private repos are free for 5 and less team members
3. It’s cheap to upgrade to 500 minutes ($2/user/month)

The Goal

For each git push to my origin, do the following:

1. test it
2. deploy it to a bucket on AWS S3

Assumptions:

• AWS S3 is already setup for hosting your react app (you have a S3 bucket setup to do static hosting and you’ve configured Route53 correctly).

Step 1 — Create a new IAM Group

I usually avoid attaching policies directly to users, but instead attach them to groups (e.g. the myapp.cd.pipeline group).

Step 2 — Create a new IAM User

I create a new user that I’ll put in the group (e.g. myapp.s3.cd) and give that user *only* programmatic access. By design, there’s no reason that user will ever need to use the management console.

Step 3 — Create a new IAM policy

Click Create Policy

Then click “Select” to the right of Copy an AWS Managed Policy

Type “s3” into the search box and then click “select” to the right of the AmazonS3FullAccess policy.

Open another tab and go to S3, select your app, and click “Copy Bucket ARN”.

Go back to your IAM tab (it should be on Review Policy still if you followed these steps) and replace the “*” for “Resource” with the copied ARN/* (see the next image). For example, you would enter “arn:aws:s3:::myapp.example.com/*” (note the training wildcard (*) symbol).

Step 4: Attach your new policy to the group you created

Go to IAM > Groups and select your myapp.cd.pipeline

Click Attach Policy

Type “s3” into the search box and attach our new policy:

and now all our permissions should be setup correctly. Jump over to bitbucket.

Step 5— Setup Bitbucket

Follow the basic bitbucket guide for getting a new git repo setup. After that’s complete, enable Bitbucket Pipelines.

Enable Pipelines

Open another tab and review Bitbucket’s Deploy to AWS guide.

Go back to your Bitbucket Pipeline and click the Environment Variables Setting. Then enter the AWS_ACCESS_KEY_ID and the AWS_SECRET_ACCESS_KEY. Click “Secured” when you enter the secret key so that it’s encrypted and doesn’t show in your log outpu.t

Setup AWS environment variables for your pipeline

If you use the default pipeline, it’ll be setup with npm. Given we’re dealing with a react app, there’s a fair chance you’re using yarn (which is also supported).

I modified my package.json to the below:

Notes:

• Note that See that CI=true in the test-cli script. This turns off interactive testing (which is the create-react-app default).

and I use the following bitbucket-pipelines.yml:

Note:

• The image is dseg/node7-python2-pip-yarn-alpine35 because I wanted to use the aws cli (which is what I typically use) instead of using boto directly (as in the AWS pipeline examples)

Now on a push, you can click into your pipeline and get the following console:

You also will have a build status page for each pipeline:

Seems pretty awesome for:

• Free
• 50 build minutes a month
• docker support