Travis CI with S3

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.

pipeline setup for travis CI/CD Setup

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-bucketfield to your bucket name.

• https://docs.aws.amazon.com/en_us/AmazonS3/latest/dev/example-bucket-policies.html

• https://docs.aws.amazon.com/en_us/AmazonS3/latest/dev/using-with-s3-actions.html

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.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": [
                "s3:AbortMultipartUpload",
                "s3:DeleteObject",
                "s3:GetObject",
                "s3:GetObjectAcl",
                "s3:PutObject",
                "s3:PutObjectAcl"
            ],
            "Resource": "arn:aws:s3:::bucket/*"
        }
    ]
}

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 CloudFrontFullAccesspermissions 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:

warnings_are_errors: false
language: node_js
node_js:
  - '10'
  - node
install:
- yarn global add travis-ci-cloudfront-invalidation
- yarn
script:
- CI=false yarn build
deploy:
  provider: s3
  access_key_id: $AWS_ACCESS_ID
  secret_access_key: $AWS_SECRET_ID
  bucket: 'catchtheday.com'
  local_dir: build
  region: us-west-2
  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:

https://www.npmjs.com/package/travis-ci-cloudfront-invalidationwww.npmjs.com

GitHub - tkssharma/DevOpsTraining: DevOpsTrainingGitHub

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
File sizes after gzip:
  65.1 KB  build/static/js/2.5e5cab2f.chunk.js
  2.67 KB  build/static/js/main.f4d26a5b.chunk.js
  1.74 KB  build/static/css/main.e818454e.chunk.css
  762 B    build/static/js/runtime~main.a8a9905a.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
  "homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
  yarn global add serve
  serve -s build
Find out more about deployment here:
  https://bit.ly/CRA-deploy
Done in 13.69s.
The command "CI=false yarn build" exited with 0.
dpl_0
2.45s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl
Successfully installed dpl-1.10.11
1 gem installed
8.57s
dpl.1
Installing deploy dependencies
Successfully installed jmespath-1.4.0
Successfully installed aws-eventstream-1.0.3
Successfully installed aws-sigv4-1.1.0
Successfully installed aws-sdk-core-2.11.304
Successfully installed aws-sdk-resources-2.11.304
Successfully installed aws-sdk-2.11.304
Successfully installed mime-types-data-3.2019.0331
Successfully installed mime-types-3.2.2
Successfully installed dpl-s3-1.10.11
9 gems installed
Logging in with Access Key: ****************&&&&
Beginning upload of 12 files with 5 threads.
dpl.2
Preparing deploy
dpl.3
Deploying application
uploading "index.html" with {:content_type=>"text/html"}
uploading "static/js/runtime~main.a8a9905a.js.map" with {:content_type=>""}
uploading "asset-manifest.json" with {:content_type=>"application/json"}
uploading "precache-manifest.a945bef9e23e3fdfdd3a5bc84ed1654a.js" with {:content_type=>"application/javascript"}
uploading "service-worker.js" with {:content_type=>"application/javascript"}
uploading "static/js/main.f4d26a5b.chunk.js" with {:content_type=>"application/javascript"}
uploading "static/js/main.f4d26a5b.chunk.js.map" with {:content_type=>""}
uploading "static/js/runtime~main.a8a9905a.js" with {:content_type=>"application/javascript"}
uploading "static/js/2.5e5cab2f.chunk.js" with {:content_type=>"application/javascript"}
uploading "static/js/2.5e5cab2f.chunk.js.map" with {:content_type=>""}
uploading "static/css/main.e818454e.chunk.css.map" with {:content_type=>""}
uploading "static/css/main.e818454e.chunk.css" with {:content_type=>"text/css"}
after_deploy
0.47s$ travis-ci-cloudfront-invalidation -a $AWS_ACCESS_ID -s $AWS_SECRET_ID -c $CF_ID -i '/*' -b $TRAVIS_BRANCH -p $TRAVIS_PULL_REQUEST
2019-06-27T08:27:13.419Z - error: Error invalidating CloudFront Cache: {"message":"User: arn:aws:iam::736998360651:user/testCI is not authorized to perform: cloudfront:CreateInvalidation","code":"AccessDenied","time":"2019-06-27T08:27:13.416Z","requestId":"5d5c67a7-98b5-11e9-b947-ed27eb0a7763","statusCode":403,"retryable":false,"retryDelay":68.32954804381812}
Done. Your build exited with 0.