Hey! I’m Mert and today we will learn how to deployment when build React app used to S3 and CloudFront with TravisCI.

TravisCI is free only in open source projects. It is an easy to use and highly popular service. Using GitHub, we will be able to manage the Continuous Deployment process. For this, we will use Amazon’s S3 and CloudFront services.

S3

Now, as a first step, we should create a bucket in S3 service and edit its policy to make it public.

You can add this code using the editor. Be sure to change the example-bucket field to your bucket name.

Then, enable static website hosting in the properties area.

You now have a public S3 bucket. By the way, don’t forget change the index document field to your root HTML file name. Finally S3 bucket is ready, let’s it ready CloudFront now.

CloudFront

Next step, you have to open the CloudFront service and create a new distribution.

In this area, you should edit the Origin Domain Name field to choose name of S3 Bucket’s you want to use and must be write into Default Root Object field your root HTML file name. This will take some time to be ready. Don’t worry. Don’t forget the Distribution ID , we will need it. Please, take a note.

IAM

Using IAM , to access S3 and CloudFront from the TravisCI we need to allow. So we need to add AmazonS3FullAccess and CloudFrontFullAccess permissions our account.

TravisCI

We need to create a .travis.yml file and we will configure this file. We’re going to need some secret keys, we need to add them on the Travis.

Our .travis.yml file should be as shown below:

Why did we use the travis-ci-cloudfront-invalidation package? You can read this source for the answer:

Thanks,

Mert.