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.
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.
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.
Why did we use the travis-ci-cloudfront-invalidation package? You can read this source for the answer:
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.
