Mert Koseoglu

CI/CD S3 and CloudFront with TravisCI

January 1, 2019 • ☕️ 2 min read

We’ll 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.

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

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 and our .travis.yml file should be as shown below:

language: node_js
node_js:
  - '9'
  - '8'
  - node
install:
- yarn global add travis-ci-cloudfront-invalidation
- yarn
script:
- yarn test
- yarn build
deploy:
  provider: s3
  access_key_id: $AWS_ACCESS_ID
  secret_access_key: $AWS_SECRET_ID
  bucket: 'XXX-frontend-app'
  local_dir: dist
  skip_cleanup: true
  on:
    branch: master
after_deploy:
  - travis-ci-cloudfront-invalidation -a $AWS_ACCESS_ID -s $AWS_SECRET_ID -c $CF_ID -i '/*' -b $TRAVIS_BRANCH -p $TRAVIS_PULL_REQUEST

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